feat: create intro section (#19)

* feat: add intro section * feat: add section divider
Skolaczk · Feb 12, 2024 · 56cd71f · 56cd71f
1 parent af8f206
commit 56cd71f
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 15 deletions.
diff --git a/public/michalskolak.pdf b/public/michalskolak.pdf
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,19 +1,14 @@
+import { Intro } from '@/components/intro';
 import { ThemeToggle } from '@/components/theme-toggle';
 
 const Home = () => {
   return (
     <>
-      <section className="container mt-10 flex flex-col items-center gap-3 text-center md:absolute md:left-1/2 md:top-1/2 md:mt-0 md:-translate-x-1/2 md:-translate-y-1/2">
-        <h1 className="mb-1 font-mono text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
-          Next.js starter template
-        </h1>
-        <p className="text-muted-foreground max-w-2xl">
-          A Next.js starter template, packed with features like TypeScript,
-          Tailwind CSS, Next-auth, Eslint, testing tools and more. Jumpstart
-          your project with efficiency and style.
-        </p>
-      </section>
-      <div className="fixed bottom-8 right-8">
+      <div className="container flex flex-col items-center">
+        <Intro />
+        <div className="bg-secondary h-16 w-1 rounded-full" />
+      </div>
+      <div className="fixed bottom-5 right-5 sm:bottom-8 sm:right-8">
         <ThemeToggle />
       </div>
     </>

diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -20,7 +20,7 @@ const buttonVariants = cva(
         default: 'h-10 px-4 py-2',
         sm: 'h-9 px-3',
         lg: 'h-11 px-8',
-        icon: 'h-12 w-12',
+        icon: 'h-11 w-11',
       },
     },
     defaultVariants: {

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -1,6 +1,24 @@
-import { Moon, Sun } from 'lucide-react';
+import { ArrowRight, Download, LucideProps, Moon, Sun } from 'lucide-react';
 
 export const Icons = {
   sun: Sun,
   moon: Moon,
+  arrowRight: ArrowRight,
+  download: Download,
+  github: (props: LucideProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.0004 2.40002C6.69879 2.40002 2.40039 6.69842 2.40039 12C2.40039 16.4984 5.49799 20.2624 9.67399 21.304C9.62919 21.1744 9.60039 21.024 9.60039 20.8376V19.1968C9.21079 19.1968 8.55799 19.1968 8.39399 19.1968C7.73719 19.1968 7.15319 18.9144 6.86999 18.3896C6.55559 17.8064 6.50119 16.9144 5.72199 16.3688C5.49079 16.1872 5.66679 15.98 5.93319 16.008C6.42519 16.1472 6.83319 16.4848 7.21719 16.9856C7.59959 17.4872 7.77959 17.6008 8.49399 17.6008C8.84039 17.6008 9.35879 17.5808 9.84679 17.504C10.1092 16.8376 10.5628 16.224 11.1172 15.9344C7.92039 15.6056 6.39479 14.0152 6.39479 11.856C6.39479 10.9264 6.79079 10.0272 7.46359 9.26962C7.24279 8.51762 6.96519 6.98402 7.54839 6.40002C8.98679 6.40002 9.85639 7.33282 10.0652 7.58482C10.782 7.33922 11.5692 7.20002 12.3964 7.20002C13.2252 7.20002 14.0156 7.33922 14.734 7.58642C14.9404 7.33602 15.8108 6.40002 17.2524 6.40002C17.838 6.98482 17.5572 8.52482 17.334 9.27522C18.0028 10.0312 18.3964 10.928 18.3964 11.856C18.3964 14.0136 16.8732 15.6032 13.6812 15.9336C14.5596 16.392 15.2004 17.68 15.2004 18.6504V20.8376C15.2004 20.9208 15.182 20.9808 15.1724 21.052C18.9132 19.7408 21.6004 16.1888 21.6004 12C21.6004 6.69842 17.302 2.40002 12.0004 2.40002Z"
+      />
+    </svg>
+  ),
+  linkedin: (props: LucideProps) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M19.1992 3.19995H4.79922C3.91522 3.19995 3.19922 3.91595 3.19922 4.79995V19.2C3.19922 20.084 3.91522 20.7999 4.79922 20.7999H19.1992C20.0832 20.7999 20.7992 20.084 20.7992 19.2V4.79995C20.7992 3.91595 20.0832 3.19995 19.1992 3.19995ZM8.76242 17.6H6.40242V10.0064H8.76242V17.6ZM7.55842 8.92075C6.79762 8.92075 6.18242 8.30395 6.18242 7.54475C6.18242 6.78555 6.79842 6.16955 7.55842 6.16955C8.31682 6.16955 8.93362 6.78635 8.93362 7.54475C8.93362 8.30395 8.31682 8.92075 7.55842 8.92075ZM17.6024 17.6H15.244V13.9072C15.244 13.0264 15.228 11.8935 14.0176 11.8935C12.7896 11.8935 12.6008 12.8528 12.6008 13.8432V17.6H10.2424V10.0064H12.5064V11.044H12.5384C12.8536 10.4472 13.6232 9.81755 14.7712 9.81755C17.1608 9.81755 17.6024 11.3904 17.6024 13.4352V17.6Z"
+      />
+    </svg>
+  ),
 };
diff --git a/src/components/intro.tsx b/src/components/intro.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link';
+
+import { Button } from '@/components/button';
+import { Icons } from '@/components/icons';
+
+export const Intro = () => {
+  return (
+    <section className="my-10 flex flex-col items-center gap-4 text-center">
+      <a href="#" className="bg-muted rounded px-3 py-1 text-sm font-medium">
+        🎉
+        <span className="ml-3">Check out my new project</span>
+      </a>
+      <h1 className="text-4xl font-bold leading-tight tracking-tighter sm:text-5xl">
+        Software developer with a passion for design
+      </h1>
+      <p className="text-muted-foreground max-w-2xl">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
+        aliquid commodi consequatur culpa, delectus dolore esse, eum laborum nam
+        nihil quaerat quas!
+      </p>
+      <div className="flex flex-row gap-2">
+        <Button asChild size="lg">
+          <Link href="#">
+            Get in touch <Icons.arrowRight className="ml-2 size-4" />
+          </Link>
+        </Button>
+        <Button
+          variant="secondary"
+          size="lg"
+          className="hidden sm:flex"
+          asChild
+        >
+          <a href="/michalskolak.pdf" download>
+            Download CV <Icons.download className="ml-2 size-4" />
+          </a>
+        </Button>
+        <Button variant="secondary" size="icon" asChild>
+          <a href="/michalskolak.pdf" download>
+            <Icons.linkedin className="size-6" />
+          </a>
+        </Button>
+        <Button variant="secondary" size="icon" asChild>
+          <a href="/michalskolak.pdf" download>
+            <Icons.github className="size-6" />
+          </a>
+        </Button>
+      </div>
+    </section>
+  );
+};
diff --git a/src/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
@@ -15,8 +15,8 @@ export const ThemeToggle = () => {
       aria-label="theme toggle"
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
     >
-      <Icons.sun className="dark:hidden" />
-      <Icons.moon className="hidden dark:block" />
+      <Icons.sun className="size-5 dark:hidden" />
+      <Icons.moon className="hidden size-5 dark:block" />
     </Button>
   );
 };