update colors and add darkmode

sajadevo · Jan 20, 2025 · 168b0ff · 168b0ff
1 parent 7d82886
commit 168b0ff
Show file tree

Hide file tree

Showing 14 changed files with 411 additions and 99 deletions.
diff --git a/app/components/hero.tsx b/app/components/hero.tsx
@@ -15,59 +15,59 @@ import { Contra } from "@/icons";
 export function Hero() {
   return (
     <section className="p-8 sm:p-10 lg:p-20">
-      <div className="max-w-2xl mx-auto">
-        <div className="relative size-26 md:size-28 lg:size-32 ">
+      <div className="mx-auto max-w-2xl">
+        <div className="relative size-26 md:size-28 lg:size-32">
           <Image
             src="/avatar.png"
             alt="sajadevo avatar"
             width={1024}
             height={1024}
-            className="size-full border border-secondary object-cover object-center rounded-full"
+            className="border-secondary size-full rounded-full border object-cover object-center"
           />
           <TooltipProvider delayDuration={0}>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Link
                   href="https://tiny.supply?ref=sajadevo"
                   target="_blank"
-                  className="absolute bottom-2 right-2"
+                  className="absolute right-2 bottom-2"
                 >
                   <Image
                     src="https://framerusercontent.com/images/HAsr1urDKnVXkS4v4m7XoFC7GE.svg"
                     alt="tiny supply"
                     width={250}
                     height={250}
-                    className="size-6 bg-secondary border border-secondary rounded-full"
+                    className="bg-secondary border-secondary size-6 rounded-full border"
                   />
                 </Link>
               </TooltipTrigger>
               <TooltipContent side="right">PFP by Darius</TooltipContent>
             </Tooltip>
           </TooltipProvider>
         </div>
-        <h1 className="text-primary font-medium text-2xl xs:text-3xl md:text-4xl lg:text-5xl mt-8 leading-tight">
+        <h1 className="xs:text-3xl mt-8 text-2xl leading-tight font-medium text-black md:text-4xl lg:text-5xl">
           Hey, I&apos;m Sajad.
           <br />
           Developer & Designer
         </h1>
-        <p className="text-foreground text-balance text-base md:text-lg mt-4">
+        <p className="text-foreground mt-4 text-base text-balance md:text-lg">
           A web developer and designer with 7+ year experience helping startups
           and early-stage companies to build their websites and apps.
         </p>
-        <div className="flex items-center flex-col xs:flex-row gap-3 mt-8">
+        <div className="xs:flex-row mt-8 flex flex-col items-center gap-3">
           <Link
             href="https://cal.com/sajadevo/talk-with-sajad"
             target="_blank"
-            className="w-full xs:w-auto"
+            className="xs:w-auto w-full"
           >
             <Button className="w-full">Book a call</Button>
           </Link>
           <Link
             href="https://contra.com/sajadevo"
             target="_blank"
-            className="w-full xs:w-auto"
+            className="xs:w-auto w-full"
           >
-            <Button variant="secondary" className="gap-2 w-full">
+            <Button variant="secondary" className="w-full gap-2">
               <Contra className="size-4 shrink-0" /> Hire me on Contra
             </Button>
           </Link>

diff --git a/app/components/services.tsx b/app/components/services.tsx
@@ -9,11 +9,11 @@ import { Codepen, Figma, PencilRuler } from "lucide-react";
 export function Services() {
   return (
     <section className="p-8 sm:p-10 lg:p-20">
-      <div className="max-w-2xl mx-auto">
-        <h2 className="text-xl md:text-2xl text-black font-medium mb-10">
+      <div className="mx-auto max-w-2xl">
+        <h2 className="mb-10 text-xl font-medium text-black md:text-2xl">
           What I do
         </h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <ServiceCard
             icon={Codepen}
             title="Web Development"
@@ -30,28 +30,28 @@ export function Services() {
             title="Product Design"
             description="Delivering functional and visually engaging products that meet business goals and user needs."
           />
-          <div className="border border-secondary flex flex-col justify-center items-center border-dashed rounded-[10px] p-6 text-center">
+          <div className="border-secondary flex flex-col items-center justify-center rounded-[10px] border border-dashed p-6 text-center">
             <div className="flex items-center justify-center gap-2">
               <Image
                 src="/avatar.png"
                 alt="sajadevo avatar"
                 width={256}
                 height={256}
-                className="size-10 border border-secondary object-cover object-center rounded-full"
+                className="border-secondary size-10 rounded-full border object-cover object-center"
               />
-              <span className="font-medium text-foreground">+</span>
-              <div className="size-10 rounded-full border text-xs bg-background font-medium text-primary border-secondary grid place-items-center">
+              <span className="text-foreground font-medium">+</span>
+              <div className="bg-background border-secondary grid size-10 place-items-center rounded-full border text-xs font-medium text-black">
                 You
               </div>
             </div>
-            <p className="text-foreground max-w-40 text-base mx-auto my-4">
+            <p className="text-foreground mx-auto my-4 max-w-40 text-base">
               Currently accepting projects for Q1 2025
             </p>
             <Link
               href="https://cal.com/sajadevo/talk-with-sajad"
               target="_blank"
             >
-              <Button className="h-9 px-3 text-sm rounded-lg">
+              <Button className="h-9 rounded-lg px-3 text-sm">
                 Book a call
               </Button>
             </Link>

diff --git a/app/globals.css b/app/globals.css
@@ -14,6 +14,17 @@
   --breakpoint-xs: 480px;
 }
 
+@variant dark (&:where(.dark, .dark *));
+
+.dark {
+  --color-white: #010101;
+  --color-black: #fcfcfc;
+  --color-background: #010101;
+  --color-foreground: #a4a4a4;
+  --color-secondary: #151515;
+  --color-primary: #fcfcfc;
+}
+
 ::selection {
   @apply bg-primary text-white;
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,8 @@
 // @components
-import { Header, Footer, FrameLines } from "@/components";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
+import { Providers } from "@/components/providers";
+import { FrameLines } from "@/components/frame-lines";
 import { OpenPanelComponent } from "@openpanel/nextjs";
 
 // @utils
@@ -30,7 +33,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <OpenPanelComponent
         clientId={process.env.OPENPANEL_CLIENT_ID!}
         trackScreenViews={true}
@@ -40,12 +43,14 @@ export default function RootLayout({
       <body
         className={`${georgiaSerif.variable} ${geistSans.variable} bg-background relative overflow-x-hidden px-6 antialiased sm:px-8 md:px-16`}
       >
-        <FrameLines />
-        <Header />
-        <main className="min-h-[calc(100vh-48px)] md:min-h-[calc(100vh-65px)]">
-          {children}
-        </main>
-        <Footer />
+        <Providers>
+          <FrameLines />
+          <Header />
+          <main className="min-h-[calc(100vh-48px)] md:min-h-[calc(100vh-65px)]">
+            {children}
+          </main>
+          <Footer />
+        </Providers>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 // @components
 import Link from "next/link";
-import { Button } from "@/components";
+import { Button } from "@/components/button";
 
 // @icons
 import { Contra } from "@/icons";
@@ -27,7 +27,7 @@ export default async function Home() {
   return (
     <div className="grid min-h-[calc(100vh-48px)] place-items-center md:min-h-[calc(100vh-65px)]">
       <div className="mx-auto max-w-4xl px-6 pt-12 pb-24 sm:px-8 sm:pt-16 sm:pb-36">
-        <h1 className="text-primary xs:text-3xl font-serif text-3xl leading-tight sm:text-4xl md:text-5xl">
+        <h1 className="xs:text-3xl font-serif text-3xl leading-tight text-black sm:text-4xl md:text-5xl">
           Hey, I&apos;m Sajad.
           <br />
           Developer & Designer

diff --git a/components/button.tsx b/components/button.tsx
@@ -14,7 +14,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-white border-primary hover:opacity-85",
         secondary:
-          "bg-transparent text-primary border-secondary hover:bg-secondary/25",
+          "bg-transparent text-black border-secondary hover:bg-secondary/25 dark:hover:bg-secondary/50",
       },
     },
     defaultVariants: {

diff --git a/components/header.tsx b/components/header.tsx
@@ -5,17 +5,19 @@ import React from "react";
 // @components
 import Image from "next/image";
 import Link, { type LinkProps } from "next/link";
+import { Button } from "@/components/button";
+import { ThemeToggle } from "@/components/theme-toggle";
 import {
   Dialog,
   DialogTrigger,
   DialogOverlay,
   DialogPortal,
   DialogClose,
 } from "@/components/dialog";
-import { Button } from "@/components/button";
+import { Sajad } from "@/components/sajad";
 
 // @icons
-import { RiCommandLine, RiSunLine, RiCloseLine } from "@remixicon/react";
+import { RiCommandLine, RiCloseLine, RiArrowRightLine } from "@remixicon/react";
 
 // @hooks
 import { usePathname } from "next/navigation";
@@ -34,15 +36,9 @@ export function Header() {
     <header className="flex justify-between">
       <Link
         href="/"
-        className="border-secondary hover:bg-secondary/25 size-12 border-r bg-transparent p-2 transition-colors duration-200 md:size-16 md:p-3"
+        className="border-secondary hover:bg-secondary/25 dark:hover:bg-secondary/50 size-12 border-r bg-transparent p-2 transition-colors duration-200 md:size-16 md:p-3"
       >
-        <Image
-          src="/avatar.svg"
-          alt="avatar"
-          width={64}
-          height={64}
-          className="size-full"
-        />
+        <Sajad className="text-primary size-full" />
       </Link>
       <nav className="hidden h-12 items-center gap-1 sm:flex md:h-16">
         {links.map((link) => {
@@ -60,13 +56,11 @@ export function Header() {
         })}
       </nav>
       <div className="flex">
-        <button className="hover:bg-secondary/25 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-colors duration-200 hover:text-black md:size-16">
-          <RiSunLine className="size-4 transition-colors duration-200 md:size-5" />
-        </button>
+        <ThemeToggle />
         <Dialog>
           <DialogTrigger asChild>
-            <button className="hover:bg-secondary/25 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-colors duration-200 hover:text-black sm:hidden md:size-16">
-              <RiCommandLine className="size-4 transition-colors duration-200 md:size-5" />
+            <button className="hover:bg-secondary/25 dark:hover:bg-secondary/50 border-secondary text-foreground grid size-12 cursor-pointer place-items-center overflow-hidden border-l bg-transparent p-1 text-base font-normal transition-all duration-200 hover:text-black sm:hidden md:size-16">
+              <RiCommandLine className="size-4 md:size-5" />
             </button>
           </DialogTrigger>
           <DialogPortal>
@@ -79,8 +73,8 @@ export function Header() {
                 <RiCloseLine className="size-5" />
               </Button>
             </DialogClose>
-            <div className="fixed top-1/2 left-1/2 z-50 size-3/4 -translate-x-1/2 -translate-y-1/2">
-              <div className="border-secondary relative grid size-full place-items-center border">
+            <div className="fixed top-1/2 left-1/2 z-50 w-1/2 -translate-x-1/2 -translate-y-1/2">
+              <div className="border-secondary relative size-full border">
                 {/* dots */}
                 <div
                   className={cn(
@@ -106,7 +100,22 @@ export function Header() {
                     "right-0 bottom-0 translate-x-1/2 translate-y-1/2",
                   )}
                 />
-                hello
+                {/* menu */}
+                <div className="divide-secondary divide-y">
+                  {links.map((link) => {
+                    const isHome = link === "home";
+
+                    return (
+                      <MobileNavLink
+                        key={link}
+                        href={isHome ? "/" : link}
+                        isActive={pathname === (isHome ? "/" : `/${link}`)}
+                      >
+                        {link}
+                      </MobileNavLink>
+                    );
+                  })}
+                </div>
               </div>
             </div>
           </DialogPortal>
@@ -135,3 +144,24 @@ function NavLink({
     </Link>
   );
 }
+
+function MobileNavLink({
+  children,
+  isActive,
+  ...props
+}: { children: React.ReactNode; isActive?: boolean } & LinkProps) {
+  return (
+    <Link
+      {...props}
+      className={cn(
+        "group/nav-link text-foreground hover:bg-secondary/25 dark:hover:bg-secondary/50 flex h-full w-full items-center justify-between gap-4 py-4 pr-4 pl-5 text-xl capitalize transition-all duration-200 hover:text-black",
+        {
+          "text-black": isActive,
+        },
+      )}
+    >
+      {children}
+      <RiArrowRightLine className="size-5 translate-x-1/2 opacity-0 transition-all duration-200 group-hover/nav-link:translate-x-0 group-hover/nav-link:opacity-100" />
+    </Link>
+  );
+}
diff --git a/components/index.ts b/components/index.ts
diff --git a/components/providers.tsx b/components/providers.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+// @components
+import { ThemeProvider } from "next-themes";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="light"
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}