feat: add about page

vignesh-gupta · Oct 30, 2024 · 23f816b · 23f816b
1 parent 9b2d670
commit 23f816b
Show file tree

Hide file tree

Showing 11 changed files with 246 additions and 74 deletions.
diff --git a/public/logo-white.svg b/public/logo-white.svg
diff --git a/public/portrait.jpg b/public/portrait.jpg
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -0,0 +1,125 @@
+import PageContainer from "@/components/common/page-container";
+import GetInTouch from "@/components/get-in-touch";
+import Image from "next/image";
+import Link from "next/link";
+
+const AboutPage = () => {
+  return (
+    <>
+      <div className="py-16 pt-32 container max-w-[1024px] mx-auto">
+        <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl text-primary">
+          A little bit about me
+        </h1>
+        <p className="mb-16 mt-4 text-base text-muted/60 md:text-2xl">
+          Who I am and what I do.
+        </p>
+      </div>
+      <div className="h-[1px] w-full bg-black/10 dark:bg-white/10" />
+      <PageContainer>
+        <div className="grid w-full grid-cols-1 md:grid-cols-12">
+          <div className="col-span-12 flex flex-col gap-12 md:col-span-8 md:pr-12 text-pretty">
+            <div className="flex flex-col gap-2">
+              <p className="font-semibold uppercase text-muted-foreground/50 dark:text-medium-gray">
+                Who I am
+              </p>
+              <p className="text-[18px] leading-[160%] text-muted">
+                I&apos;m{" "}
+                <span className="text-onyx dark:text-white">Vignesh</span> a
+                passionate software engineer who loves crafting seamless web
+                experiences and exploring innovative technologies. With a knack
+                for problem-solving and a drive for efficiency, I thrive in
+                dynamic environments.
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="font-semibold uppercase text-muted-foreground/50 dark:text-medium-gray">
+                What I Do
+              </p>
+              <p className="text-[18px] leading-[160%] text-muted">
+                With two years of invaluable experience, I’ve honed my skills in
+                JavaScript and TypeScript, focusing on frameworks like Next.js
+                and React. I specialize in building intuitive, interactive web
+                applications using Tailwind CSS and various CMS platforms,
+                enabling seamless user experiences. My work enhances team
+                collaboration and empowers businesses to streamline their
+                processes. I thrive on tackling complex challenges and
+                delivering solutions that create a tangible impact.
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="font-semibold uppercase text-muted-foreground/50 dark:text-medium-gray">
+                What I Did
+              </p>
+              <p className="text-[18px] leading-[160%] text-muted">
+                Before diving into full-stack development, I focused on
+                optimizing web applications. I boosted loading speeds with
+                Next.js, enhancing user engagement, and streamlined APIs to
+                create a smoother experience. My projects, like Projectify and
+                DigiBee Marketplace, reflect my ability to develop solutions
+                that foster collaboration and drive success.
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-[18px] leading-[160%] text-muted">
+                Feel free to reach out via{" "}
+                <Link
+                  href="mailto:[email protected]"
+                  prefetch={false}
+                  className="cursor-pointer rounded-lg justify-center items-center inline-flex font-medium transition text-onyx underline underline-offset-4 dark:text-white"
+                >
+                  e-mail
+                </Link>
+                , or follow me on{" "}
+                <Link
+                  href="https://x.com/vigneshfixes"
+                  prefetch={false}
+                  className="cursor-pointer rounded-lg justify-center items-center inline-flex font-medium transition text-onyx underline underline-offset-4 dark:text-white"
+                >
+                  Twitter
+                </Link>
+                . Want to see where I’ve worked? Check out my{" "}
+                <Link
+                  href="https://drive.google.com/file/d/1_7DQZxg3KBvJPRgenwehwwpq7Ioj7xiY/view?usp=sharing"
+                  className="cursor-pointer rounded-lg justify-center items-center inline-flex font-medium transition text-onyx underline underline-offset-4 dark:text-white"
+                >
+                  Resume
+                </Link>
+                , or Connect with me on{" "}
+                <Link
+                  href="https://www.linkedin.com/in/vigneshgupta/"
+                  className="cursor-pointer rounded-lg justify-center items-center inline-flex font-medium transition text-onyx underline underline-offset-4 dark:text-white"
+                >
+                  LinkedIn.
+                </Link>
+              </p>
+            </div>
+            <div className="flex flex-col gap-2">
+              <p className="text-[18px] leading-[160%] text-muted">
+                Let’s build something great, together!
+              </p>
+            </div>
+
+            <GetInTouch className="flex md:hidden" />
+          </div>
+
+          <div className="-order-1 col-span-12 md:order-2 md:col-span-4">
+            <div className="group relative mb-20 flex justify-center">
+              <picture className="relative z-20 block w-fit overflow-hidden rounded-2xl border-[1px] border-card-border">
+                <Image
+                  src="/portrait.jpg"
+                  width={400}
+                  height={400}
+                  alt="Vignesh"
+                />
+              </picture>
+            </div>
+
+            <GetInTouch className="hidden md:flex" />
+          </div>
+        </div>
+      </PageContainer>
+    </>
+  );
+};
+
+export default AboutPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({
         <ThemeProvider attribute="class" defaultTheme="dark">
           <TooltipProvider>
             <Header />
-            <ThemeSwitch className="fixed bottom-10 left-10" />
+            <ThemeSwitch className="fixed bottom-10 left-10 z-10" />
             {children}
             <Footer />
           </TooltipProvider>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,6 +5,7 @@ import InfoCards, { InfoCardsProps } from "@/components/info/info-cards";
 import ProjectSection from "@/components/project/project-section";
 import { Button } from "@/components/ui/button";
 import { SendHorizontal } from "lucide-react";
+import PageContainer from "@/components/common/page-container";
 
 const info: InfoCardsProps[] = [
   {
@@ -32,7 +33,7 @@ const info: InfoCardsProps[] = [
 
 const HomePage = () => {
   return (
-    <main className="container max-w-screen-lg px-8 pt-16 mx-auto space-y-20">
+    <PageContainer>
       <HeroSection />
       <ProjectSection showHeader />
 
@@ -67,7 +68,7 @@ const HomePage = () => {
           </Link>
         </Button>
       </section>
-    </main>
+    </PageContainer>
   );
 };
 

diff --git a/src/components/common/footer.tsx b/src/components/common/footer.tsx
@@ -1,14 +1,15 @@
-import Image from "next/image";
-import React from "react";
+import { navLinks, socials } from "@/lib/constants";
+import Logo from "./logo";
+import Link from "next/link";
 
 const Footer = () => {
   return (
-    <footer className="relative mt-16 min-h-[326px] pb-32 md:pb-12">
+    <footer className=" container mx-auto px-5 relative mt-16 min-h-[326px] pb-32 md:pb-12 z-0">
       <div className="h-[1px] w-full bg-black/10 dark:bg-white/10"></div>
       <div className="container mx-auto relative z-10 mt-20 flex w-full max-w-5xl flex-col items-start justify-between gap-12 md:h-[236px] md:flex-row">
         <div className="flex flex-col justify-between h-full">
           <div className="flex flex-col ">
-            <Image src="/logo.svg" width={150} height={150} alt="Logo" />
+            <Logo width={150} height={150} />
             <p className="mt-4 text-onyx/60 dark:text-white/40">
               Thanks for stopping by <span className="text-2xl">ッ</span>
             </p>
@@ -18,76 +19,40 @@ const Footer = () => {
             Reserved.
           </p>
         </div>
-        <div className="grid grid-cols-1 gap-10 -order-1 md:order-2 md:grid-cols-2 md:gap-20">
+        <div className="grid  gap-16 -order-1 md:order-2 grid-cols-2 md:gap-20">
           <div className="flex flex-col gap-8">
             <p className="font-bold text-onyx dark:text-white">Links</p>
             <ul className="flex flex-col gap-4">
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a className="transition-colors duration-150" href="/about">
-                  About
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a className="transition-colors duration-150" href="/work">
-                  Work
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a className="transition-colors duration-150" href="/uses">
-                  Tech Stack
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a className="transition-colors duration-150" href="/bookshelf">
-                  Bookshelf
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a className="transition-colors duration-150" href="/contact">
-                  Contact
-                </a>
-              </li>
+              {navLinks.map((link) => (
+                <li
+                  key={`footer-link-${link.name}`}
+                  className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white"
+                >
+                  <Link
+                    prefetch={false}
+                    className="transition-colors duration-150"
+                    href={link.href}
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
           <div className="flex flex-col gap-8">
             <p className="font-bold text-onyx dark:text-white">Elsewhere</p>
             <ul className="flex flex-col gap-4 text-muted">
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a
-                  className="transition-colors duration-150"
-                  target="_blank"
-                  href="https://www.linkedin.com/in/eihab-khan/"
-                >
-                  LinkedIn
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a
-                  className="transition-colors duration-150"
-                  target="_blank"
-                  href="https://github.com/eihabkhan"
-                >
-                  GitHub
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a
-                  className="transition-colors duration-150"
-                  target="_blank"
-                  href="https://x.com/itseihab"
-                >
-                  X (Twitter)
-                </a>
-              </li>
-              <li className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
-                <a
-                  className="transition-colors duration-150"
-                  target="_blank"
-                  href="https://discord.com/users/itseihab"
-                >
-                  Discord
-                </a>
-              </li>
+              {socials.map((social) => (
+                <li key={`footer-socials-${social.name}`} className="flex items-center gap-2 group text-onyx/60 hover:text-onyx dark:text-muted dark:hover:text-white">
+                  <Link
+                    className="transition-colors duration-150"
+                    target="_blank"
+                    href={social.href}
+                  >
+                    {social.name}
+                  </Link>
+                </li>
+              ))}
             </ul>
           </div>
         </div>

diff --git a/src/components/common/header.tsx b/src/components/common/header.tsx
@@ -1,6 +1,6 @@
 import { navLinks, socials } from "@/lib/constants";
-import Image from "next/image";
 import Link from "next/link";
+import Logo from "./logo";
 import MobileNav from "./mobile-nav";
 
 const Header = () => {
@@ -10,7 +10,7 @@ const Header = () => {
         <div className="container mx-auto flex h-16 w-full max-w-[1024px] items-center justify-between rounded-full border-[1px] border-white/25 bg-white/25 px-8 backdrop-blur-md dark:border-[#5E5E5E]/20 dark:bg-[#18181D]/30">
           <div className="flex items-center gap-10">
             <Link aria-label="Vignesh Gupta Logo" href="/">
-              <Image src="/logo.svg" width={50} height={50} alt="Logo" />
+              <Logo width={50} height={50} />
             </Link>
             <nav
               aria-label="Main"

diff --git a/src/components/common/logo.tsx b/src/components/common/logo.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+type LogoProps = {
+  className?: string;
+  height: number;
+  width: number;
+};
+
+const Logo = ({ className, height, width }: LogoProps) => {
+  return (
+    <svg
+      width={height}
+      height={width}
+      viewBox={`0 0 92 60`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${className}`}
+    >
+      <path
+        d="M0 0H14.0063V5.7732H6.06723V54.2268H14.0063V60H0V0Z"
+        fill="hsl(var(--foreground))"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60.7897 14.4007C57.2272 10.6886 52.3223 8.83249 46.075 8.83249C42.0994 8.83249 38.5886 9.73323 35.5424 11.5347C32.4962 13.2816 30.1212 15.7655 28.4173 18.9863C27.5541 20.6406 26.9164 22.429 26.5042 24.3515H18.1493L14.0063 33.4806H26.1476C26.4952 36.3109 27.2776 38.8765 28.4948 41.1774C30.2502 44.3437 32.7027 46.8003 35.8521 48.5472C39.0532 50.2941 42.7964 51.1675 47.0818 51.1675C50.3861 51.1675 53.5098 50.567 56.4527 49.366C59.3957 48.165 61.8739 46.4727 63.8875 44.2891L58.1565 38.0658C56.9174 39.2668 55.3427 40.2221 53.4323 40.9318C51.522 41.5869 49.5342 41.9144 47.469 41.9144C44.4228 41.9144 41.8929 41.1501 39.8793 39.6216C37.9175 38.0931 36.7558 36.0461 36.3943 33.4806H74.7714L77.9937 24.3515H65.7016C64.9768 20.3355 63.3395 17.0185 60.7897 14.4007ZM55.905 24.3515C55.4549 22.6178 54.5791 21.1843 53.2774 20.0509C51.522 18.5223 49.2244 17.7581 46.3848 17.7581C43.6483 17.7581 41.4024 18.5223 39.647 20.0509C38.3761 21.1503 37.4786 22.5839 36.9546 24.3515H55.905Z"
+        fill="hsl(var(--foreground))"
+      />
+      <path
+        d="M77.9937 0H92V60H77.9937V54.2268H85.9328V5.7732H77.9937V0Z"
+        fill="hsl(var(--foreground))"
+      />
+    </svg>
+  );
+};
+
+export default Logo;
diff --git a/src/components/common/mobile-nav.tsx b/src/components/common/mobile-nav.tsx
@@ -1,16 +1,15 @@
 import { navLinks, socials } from "@/lib/constants";
-import Image from "next/image";
 import Link from "next/link";
-import React from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import Logo from "./logo";
 
 const MobileNav = () => {
   return (
     <header className="fixed z-[999] md:hidden px-4 bottom-10 inset-x-0 block">
       <div className="container mx-auto flex h-16 w-full max-w-[1024px] items-center justify-between rounded-full border-[1px] border-white/25 bg-white/25 px-8 backdrop-blur-md dark:border-[#5E5E5E]/20 dark:bg-[#18181D]/30">
         <div className="flex items-center flex-1">
           <Link aria-label="Vignesh Gupta Logo" href="/">
-            <Image src="/logo.svg" width={50} height={50} alt="Logo" />
+            <Logo width={50} height={50} />
           </Link>
           <nav className="relative flex justify-center flex-1">
             <ul className="m-0 flex list-none items-center gap-5 sm:gap-10 rounded-[6px] p-1 justify-evenly shrink">

diff --git a/src/components/common/page-container.tsx b/src/components/common/page-container.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import React, { PropsWithChildren } from "react";
+
+const PageContainer = ({
+  children,
+className,
+}: PropsWithChildren<{ className?: string }>) => {
+  return (
+    <main className={cn("container max-w-screen-lg px-8 pt-16 mx-auto space-y-20", className)}>
+      {children}
+    </main>
+  );
+};
+
+export default PageContainer;