Add intro component to about

src/package.json

@@ -20,6 +20,7 @@
     "@astrojs/mdx": "^4.0.2",
     "@astrojs/sitemap": "^3.2.1",
     "framer-motion": "^11.11.11",
+    "lucide-react": "^0.468.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",

src/pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       framer-motion:
         specifier: ^11.11.11
         version: 11.11.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      lucide-react:
+        specifier: ^0.468.0
+        version: 0.468.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -1432,6 +1435,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@0.468.0:
+    resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -3730,6 +3738,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@0.468.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0

src/src/components/about/intro.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { ChevronDown } from "lucide-react";
+
+export default function Intro() {
+  const scrollToNext = () => {
+    window.scrollTo({
+      top: window.innerHeight,
+      behavior: 'smooth'
+    });
+  };
+  
+  return (
+    <div className="w-full max-w-4xl px-4">
+      <div className="space-y-32 md:space-y-48">
+        <div className="flex flex-col sm:flex-row items-center sm:items-center justify-center gap-8 sm:gap-16">
+          <div className="w-32 h-32 sm:w-48 sm:h-48 shrink-0">
+            <img
+              src="/me.jpeg"
+              alt="Timothy Pidashev"
+              className="rounded-lg object-cover w-full h-full ring-2 ring-yellow-bright hover:ring-orange-bright transition-all duration-300"
+            />
+          </div>
+          <div className="text-center sm:text-left space-y-4 sm:space-y-6">
+            <h2 className="text-xl sm:text-5xl font-bold text-yellow-bright">
+              Timothy Pidashev
+            </h2>
+            <div className="text-sm sm:text-xl text-foreground/70 space-y-2 sm:space-y-3">
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-blue">Full Stack Developer</span>
+              </p>
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-green">Open Source Enthusiast</span>
+              </p>
+              <p className="flex items-center justify-center font-bold sm:justify-start gap-2">
+                <span className="text-yellow">Coffee Connoisseur</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <br/>
+        <div className="space-y-32 md:space-y-48">
+          <p className="text-foreground/80 text-center text-base sm:text-2xl italic max-w-3xl mx-auto font-medium">
+            Coffee-to-code conversion isn't just a clever phrase – 
+            <span className="text-aqua-bright"> it's how I approach each project:</span>
+            <span className="text-purple-bright"> methodically,</span>
+            <span className="text-blue-bright"> with attention to detail,</span>
+            <span className="text-green-bright"> and a refined process.</span>
+          </p>
+          <br/>
+          <div className="flex justify-center">
+            <button 
+              onClick={scrollToNext}
+              className="text-foreground/50 hover:text-yellow-bright transition-colors duration-300"
+              aria-label="Scroll to next section"
+            >
+              <ChevronDown size={40} className="animate-bounce" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/src/components/icons/chevron-down.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { ChevronDown } from "lucide-react";
+
+export const ChevronDownIcon = (props: React.ComponentProps<typeof ChevronDown>) => {
+  return <ChevronDown {...props} />;
+};

src/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { ChevronDownIcon } from "@/components/icons/chevron-down";

src/src/pages/about.astro

@@ -2,10 +2,11 @@
 import "@/style/globals.css"
 
 import MainLayout from "@/layouts/main.astro";
+import Intro from "@/components/about/intro";
 ---
 
 <MainLayout content={{ title: "About | Timothy Pidashev" }}>
   <div class="flex items-center justify-center h-screen w-full">
-    <h1 class="text-4xl text-blue font-bold">About</h1>
+    <Intro client:load />
   </div>
 </MainLayout>