From 639a989e974af269a9a1068fbbb6e807521aca45 Mon Sep 17 00:00:00 2001 From: n0rrman Date: Wed, 15 May 2024 22:55:52 +0700 Subject: [PATCH] contact section added --- src/actions/commands.json | 26 +++++++++-- src/app/fonts.tsx | 2 +- src/app/layout.tsx | 4 +- src/app/page.tsx | 2 +- src/components/contact-section.tsx | 75 +++++++++++++++++++++--------- src/components/link-card.tsx | 52 +++++++++++++++++++++ src/components/terminal-screen.tsx | 8 ++-- src/components/terminal.tsx | 29 ++++++++++-- tailwind.config.ts | 19 ++++++-- 9 files changed, 176 insertions(+), 41 deletions(-) create mode 100644 src/components/link-card.tsx diff --git a/src/actions/commands.json b/src/actions/commands.json index fdd701e..bccb447 100644 --- 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" } ] \ No newline at end of file diff --git a/src/app/fonts.tsx b/src/app/fonts.tsx index ddf7e9b..9abaaf0 100644 --- 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 index ca05198..2d3c73c 100644 --- 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 ( - {children} + {children} ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 244b033..4cd0dd5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,7 +11,7 @@ export default function LandingPage() { - {/* */} + ); } diff --git a/src/components/contact-section.tsx b/src/components/contact-section.tsx index 2461c50..31f98fd 100644 --- 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 ( -
-

Contact me

-
-
- -

GitHub

-

have a look at me github

-
-
- -

LinkedIn

-

Contact me on LinkedIn

-
-
- -

Discord

-

contact me on discord

-
+
+
+

External Links

+

+ 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. +

+
+
+ } + /> + } + /> + } + /> + } + />
); diff --git a/src/components/link-card.tsx b/src/components/link-card.tsx new file mode 100644 index 0000000..d9b7da0 --- /dev/null +++ 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 ( +
+ {icon} +
+

{title}

+ + + +
+

+ {description} +

+
+

{username}

+
+ ); +} diff --git a/src/components/terminal-screen.tsx b/src/components/terminal-screen.tsx index f54d691..12669e7 100644 --- a/src/components/terminal-screen.tsx +++ b/src/components/terminal-screen.tsx @@ -38,7 +38,7 @@ export default function TerminalScreen({ return (
{ inputRef!.current!.focus(); }} @@ -51,7 +51,7 @@ export default function TerminalScreen({ 
{renderedOutputs}
@@ -59,13 +59,13 @@ export default function TerminalScreen({ {prompt}