Merge pull request #9 from n0rrman/dev

contact section added
n0rrman · May 15, 2024 · 2924bd9 · 2924bd9
2 parents fd4f632 + 639a989
commit 2924bd9
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
+