contact section added

n0rrman · May 15, 2024 · 639a989 · 639a989
1 parent 8336002
commit 639a989
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 41 deletions.
diff --git a/src/actions/commands.json b/src/actions/commands.json
@@ -11,12 +11,32 @@
     },
     {
         "cmd": "github",
-        "value": "https://github.com/n0rrman",
+        "value": "https:github.com/n0rrman",
+        "actionCode": "redirect"
+    },
+    {
+        "cmd": "discord",
+        "value": "https:discord.com/users/235864356980523009",
+        "actionCode": "redirect"
+    },
+    {
+        "cmd": "email",
+        "value": "mailto:email@henriknorrman.com",
+        "actionCode": "redirect"
+    },
+    {
+        "cmd": "linkedin",
+        "value": "https:linkedin.com/in/henrik-norrman/",
         "actionCode": "redirect"
     },
     {
         "cmd": "source code",
-        "value": "https://github.com/n0rrman/henriknorrman.com",
+        "value": "https:github.com/n0rrman/henriknorrman.com",
+        "actionCode": "redirect"
+    },
+    {
+        "cmd": "rm -rf /",
+        "value": "https:youtube.com/watch?v=dQw4w9WgXcQ",
         "actionCode": "redirect"
     },
     {
@@ -26,7 +46,7 @@
     },
     {
         "cmd": "help",
-        "value": "These shell commands are defined internally. Type `help' to see this list.\n\twhoami\t\t\tdisplay effective user\n\tclear\t\t\tclear the terminal screen\n\tgithub\t\t\topen my github\n\tsource code\t\topen the source code repository\n\thelp\t\t\tlist available commands\n\texit\t\t\texit the terminal",
+        "value": "These shell commands are defined internally. Type `help' to see this list.\n\twhoami\t\t\tdisplay effective user\n\tclear\t\t\tclear the terminal screen\n\tsource code\t\topen the source code repository\n\tgithub\t\t\topen my github\n\tdiscord\t\t\tadd me on discord\n\temail\t\t\tsend me an email\n\tlinkedin\t\tconnect on linkedin\n\thelp\t\t\tlist available commands\n\trm -rf /\t\tdestroy every file on the server\n\texit\t\t\texit the terminal",
         "actionCode": "help"
     }
 ]
diff --git a/src/app/fonts.tsx b/src/app/fonts.tsx
@@ -19,5 +19,5 @@ export const hand = Delicious_Handrawn({
 
 export const main = Montserrat({
   subsets: ["latin"],
-  weight: ["400", "700"],
+  weight: ["400", "600"],
 });
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata, Viewport } from "next";
+import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -23,7 +23,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="bg-bgColour">{children}</body>
+      <body className="bg-bgLightColour">{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,7 +11,7 @@ export default function LandingPage() {
         <Image src={logo} fill alt="" priority loading="eager" />
       </div>
       <Terminal />
-      {/* <ContactSection /> */}
+      <ContactSection />
     </div>
   );
 }
diff --git a/src/components/contact-section.tsx b/src/components/contact-section.tsx
@@ -1,34 +1,65 @@
-import { FaGithub } from "react-icons/fa";
+import { FaGithub, FaGithubSquare } from "react-icons/fa";
 import { MdAlternateEmail } from "react-icons/md";
 import { BsDiscord } from "react-icons/bs";
 import { RxDiscordLogo } from "react-icons/rx";
-import { SiFrontendmentor } from "react-icons/si";
+import { IoLogoGithub } from "react-icons/io";
 import { SiAiohttp } from "react-icons/si";
 import { CgWebsite } from "react-icons/cg";
-import { FaLinkedinIn } from "react-icons/fa6";
-import { IoLogoLinkedin } from "react-icons/io";
+import { FaLinkedinIn, FaLinkedin } from "react-icons/fa6";
+import { AiFillDiscord } from "react-icons/ai";
 import { main } from "@/app/fonts";
+import LinkCard from "./link-card";
 
 export default function ContactSection() {
   return (
-    <div className={`${main.className} flex flex-col p-16 gap-8 text-4xl`}>
-      <h1 className={`${main.className}`}>Contact me</h1>
-      <div className="grid grid-cols-3 text-[5rem] gap-10">
-        <div className="shadow-xl rounded-md p-6 border-t-[0.3rem] border-discord">
-          <RxDiscordLogo className="text-discord" />
-          <h1 className="text-2xl">GitHub</h1>
-          <p className="text-xl">have a look at me github</p>
-        </div>
-        <div className="shadow-xl rounded-md p-6 border-t-[0.3rem] border-linkedin">
-          <FaLinkedinIn className="text-linkedin" />
-          <h1 className="text-2xl">LinkedIn</h1>
-          <p className="text-xl">Contact me on LinkedIn</p>
-        </div>
-        <div className="shadow-xl rounded-md p-6 border-t-[0.3rem] border-discord">
-          <RxDiscordLogo className="text-discord" />
-          <h1 className="text-2xl">Discord</h1>
-          <p className="text-xl">contact me on discord</p>
-        </div>
+    <div
+      className={`${main.className} flex flex-col p-5 md:p-16 gap-5 md:gap-8 text-3xl sm:text-4xl bg-bgDarkColour w-full max-w-[96.92ch]`}
+    >
+      <div className="flex flex-col gap-2">
+        <h1 className="text-bgLightColour tracking-wide">External Links</h1>
+        <p className="text-slate-200/70 text-sm sm:text-base max-w-[65ch]">
+          Links to external websites (for those who prefer not to use the
+          terminal). Feel free to connect with me via email, LinkedIn, or
+          Discord. You can also explore my repositories on GitHub.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-10 mx-auto">
+        <LinkCard
+          title="GitHub"
+          description="Explore my GitHub repositories."
+          username="n0rrman"
+          link="https://github.com/n0rrman/"
+          featureColour="border-github"
+          arrowColour="text-github"
+          icon={<IoLogoGithub className="text-github" />}
+        />
+        <LinkCard
+          title="Discord"
+          description="Add me on Discord."
+          username="n0rrman"
+          link="https://discord.com/users/235864356980523009"
+          featureColour="border-discord"
+          arrowColour="text-discord"
+          icon={<AiFillDiscord className="text-discord" />}
+        />
+        <LinkCard
+          title="Email"
+          description="Sent me an old school email."
+          username="email@henriknorrman.com"
+          link="mailto:email@henriknorrman.com"
+          featureColour="border-email"
+          arrowColour="text-email"
+          icon={<MdAlternateEmail className="text-email" />}
+        />
+        <LinkCard
+          title="LinkedIn"
+          description="Connect with me on LinkedIn."
+          username="henrik-norrman"
+          link="https://www.linkedin.com/in/henrik-norrman"
+          featureColour="border-linkedin"
+          arrowColour="text-linkedin"
+          icon={<FaLinkedin className="text-linkedin" />}
+        />
       </div>
     </div>
   );

diff --git a/src/components/link-card.tsx b/src/components/link-card.tsx
@@ -0,0 +1,52 @@
+import { FaGithub } from "react-icons/fa";
+import { MdAlternateEmail } from "react-icons/md";
+import { BsDiscord } from "react-icons/bs";
+import { RxDiscordLogo } from "react-icons/rx";
+import { SiFrontendmentor } from "react-icons/si";
+import { SiAiohttp } from "react-icons/si";
+import { CgWebsite } from "react-icons/cg";
+import { FaLinkedinIn } from "react-icons/fa6";
+import { IoLogoLinkedin } from "react-icons/io";
+import { FaArrowRight } from "react-icons/fa";
+import { main } from "@/app/fonts";
+
+interface LinkCardProps {
+  title: string;
+  description: string;
+  username: string;
+  link: string;
+  icon: React.ReactElement;
+  featureColour: string;
+  arrowColour: string;
+}
+
+export default function LinkCard({
+  title,
+  description,
+  username,
+  link,
+  icon,
+  featureColour,
+  arrowColour,
+}: LinkCardProps) {
+  return (
+    <div
+      className={`${featureColour} flex flex-col p-5 shadow-xl gap-3 text-slate-800 rounded-md border-t-[0.35rem] bg-bgLightColour max-w-[12.5ch] transition-all hover:scale-105 cursor-pointer group`}
+    >
+      <span className="text-[5rem]">{icon}</span>
+      <div className="flex flex-row gap-2 items-center text-2xl font-semibold tracking-wide">
+        <h2 className={`${featureColour} border-b-2`}>{title}</h2>
+        <span
+          className={`${arrowColour} text-lg opacity-70 group-hover:animate-rightBounce`}
+        >
+          <FaArrowRight />
+        </span>
+      </div>
+      <p className="text-lg opacity-75 leading-snug min-h-[7ch]">
+        {description}
+      </p>
+      <div className="border-b border-bgDarkColour -mx-5"></div>
+      <p className="text-sm opacity-75">{username}</p>
+    </div>
+  );
+}
diff --git a/src/components/terminal-screen.tsx b/src/components/terminal-screen.tsx
@@ -38,7 +38,7 @@ export default function TerminalScreen({
 
   return (
     <div
-      className="flex justify-center items-center text-[1.77vw] sm:text-xs lg:text-sm pb-[18ch] w-full"
+      className="flex justify-center items-center text-[1.77vw] md:text-xs lg:text-sm pb-[18ch] w-full"
       onClick={() => {
         inputRef!.current!.focus();
       }}
@@ -51,21 +51,21 @@ export default function TerminalScreen({
         </div>
       </div>
       <div
-        className={`${courier.className} z-40 px-[1.5ch] py-[0.5ch] mb-[13ch] bg-slate-800 text-slate-200 flex items-end w-full sm:w-[103ch] leading-snug tracking-wide overflow-hidden h-[57ch] rounded-md`}
+        className={`${courier.className} z-40 px-[1.5ch] py-[0.5ch] mb-[13ch] bg-slate-800 text-slate-200 flex items-end w-full md:w-[103ch] leading-snug tracking-wide overflow-hidden h-[57ch] rounded-none md:rounded-md`}
       >
         <form ref={formRef} onSubmit={submitHandler} className="select-text">
           <pre className="space-y-[0.25ch]">{renderedOutputs}</pre>
           <div className="flex flex-row items-end justify-start">
             {prompt}
             <input
               ref={inputRef}
-              className="bg-transparent w-[67ch] outline-none mt-[0.25ch]"
+              className="bg-transparent w-[80ch] outline-none mt-[0.25ch]"
               name="cmd"
               type="text"
             />
           </div>
           <div
-            className={`${hand.className} text-center hidden sm:block absolute translate-y-[13.5ch] lg:translate-y-[14ch] translate-x-[7ch] text-base lg:text-lg text-black w-[14ch] lg:w-[15ch] tracking-wider`}
+            className={`${hand.className} text-center hidden md:block absolute translate-y-[13.5ch] translate-x-[7ch] text-base lg:text-lg text-black w-[14ch] lg:w-[15ch] tracking-wider`}
           >
             <p>type &quot;help&quot;</p>
             <p>for commands</p>

diff --git a/src/components/terminal.tsx b/src/components/terminal.tsx
@@ -2,11 +2,11 @@
 
 import { useFormState } from "react-dom";
 import { useState, startTransition, useRef, useEffect } from "react";
-import { redirect } from "next/navigation";
 
 import { terminalState, CommandAction } from "@/actions";
 import { ActionCode } from "@/actions/action-codes";
 import TerminalScreen from "./terminal-screen";
+import { VscOutput } from "react-icons/vsc";
 
 export default function Terminal() {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -27,23 +27,42 @@ export default function Terminal() {
     if (formState.payload) {
       const { id, input, output, actionCode } = formState.payload;
 
-      setOutputs((outputs) => [...outputs!, { id, input, output, actionCode }]);
-      handleTerminalAction(output, actionCode);
+      const processedCommand = handleTerminalAction(
+        id,
+        input,
+        output,
+        actionCode
+      );
+      setOutputs((outputs) => [...outputs!, processedCommand]);
     }
   }, [formState]);
 
   // Handle action codes
-  const handleTerminalAction = (value: string, actionCode: string) => {
+  const handleTerminalAction = (
+    id: string,
+    input: string,
+    output: string,
+    actionCode: ActionCode
+  ) => {
     if (actionCode === ActionCode.CLEAR) {
       setOutputs([]);
     }
     if (actionCode === ActionCode.REDIRECT) {
-      redirect(value);
+      window.open(output);
+
+      return {
+        id,
+        input,
+        output: `Opening ${output.split(":")[1]}`,
+        actionCode,
+      };
     }
     if (actionCode === ActionCode.EXIT) {
       setOutputs([]);
       window.history.back();
     }
+
+    return { id, input, output, actionCode };
   };
 
   // Input submit handler

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,16 +8,29 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      animation: {
+        rightBounce: 'rightBounce 1s infinite',
+      },
+      keyframes: {
+        rightBounce: {
+          '0%, 100%': { transform: 'translateX(0)', animateTimingFunction: 'cubicBezier(0.8,0,1,1)' },
+          '50%': { transform: 'translateX(25%)', animateTimingFunction: 'cubicBezier(0,0,0.2,1)' },
+        }
+      },
       colors: {
-        "bgColour": '#E8EBED',
+        "bgLightColour": '#E8EBED',
+        "bgDarkColour": '#344B7E',
         "discord": '#7289da',
-        "linkedin": '#0077B5'
+        "github": "#333",
+        "linkedin": '#0077B5',
+        "email": "#d44638"
       },
       screens: {
-        'sm': '759px'
+        // 'sm': '759px'
       }
     }
   },
   plugins: [],
 }
 export default config
+