rudimentary about page

Author: Highfire1

public/about/anderson_1.jpeg

@@ -0,0 +1,55 @@
+import Image from "next/image";
+
+// import Link from "next/link";
+import Header from "@/components/header"
+import Footer from "@/components/footer";
+
+import HeroImage from '@/../public/purple.jpg'
+
+
+export default function page() {
+    return (
+        <div className="flex flex-col items-center w-full min-w-[200px]">
+
+            <div className="xl:w-[1200px] lg:w-[1000px] md:w-[768px] w-full px-4 flex gap-4 flex-col py-2">
+                <Header />
+
+                <Image src={HeroImage} className="h-[200px] w-full object-cover" alt="picture of sunset" priority />
+
+
+
+                <div className="flex flex-row gap-4 w-full">
+
+                    <div className="h-[300px] min-w-[200px] border-2 border-slate-600 rounded z-10">
+                        <Image src={"/about/anderson_1.jpeg"} height='300' width='200' className="h-[297px] w-[200px] object-cover rounded-sm z-0" alt="picture of anderson tseng" priority />
+                    </div>
+
+                    <div className="w-full border-2 border-gray-800 rounded p-2">
+                        <div className="">
+                            <p className="font-bold">Who is Anderson Tseng?</p>
+
+                            <p>🚧under construction 🚧</p>
+                            <p>.....come back later.</p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div className="h-[200px] w-full border-2 border-gray-800 rounded">
+
+                </div>
+
+
+
+
+
+
+                <Footer />
+            </div>
+
+
+
+
+        </div>
+    );
+}

public/purple.jpg

@@ -37,7 +37,7 @@ export default function Home() {
           <div className="w-[200px] hidden sm:flex flex-col gap-4">
 
             <div className="border-2 border-gray-800 rounded p-2">
-              <h3 className="font-bold">Links</h3>
+              <h3 className="font-bold">Links:</h3>
               <ul className="list-disc pl-5">
                 <li><a className="hover:underline" href="https://www.linkedin.com/in/andersontseng/">LinkedIn</a></li>
                 <li><a className="hover:underline" href="https://www.instagram.com/anderson_wootdidoo/">Instagram</a></li>

src/app/about/page.tsx

@@ -13,8 +13,8 @@ const Header = () => {
             </div>
 
             <div className="flex sm:gap-4 justify-end grow max-[99px]:w-full">
-                <Link href="/" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
-                Home
+                <Link href="/about" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
+                About
                 </Link>
                 <Link href="/blog" className="p-2 text-gray-500 dark:hover:text-gray-200 hover:text-gray-900">
                 Blog