other pages in progress

app/about/me/page.tsx

@@ -1,5 +1,7 @@
 'use client';
 import { useState } from "react";
+import Software from "./software.mdx";
+import CompanyShowcase from "@/components/About/CompanyShowcase";
 
 export default function AboutMe() {
     const [selected, setSelected] = useState<'musician' | 'developer'>();
@@ -15,11 +17,12 @@ export default function AboutMe() {
 
             {selected === 'developer' && (
                 <div>
-                    <h2>Software Engineer</h2>
                     <p>
-                        I am a software engineer with a passion for creating beautiful, functional, and accessible web applications.
+                        I have been writing software for about three years, and have produced valuable work for several
-                        I have experience with React, TypeScript, Node.js, and more.
+                        companies working in a variety of paradigms.
                     </p>
+
+                    <p>Here are some traits that my supervisors have consistently praised:</p>
                 </div>
             )}
 

app/about/me/software.mdx

@@ -0,0 +1,10 @@
+# Software Engineer
+
+I have been writing software for about three years, and have produced valuable work for several
+companies working in a variety of paradigms.
+
+## Some 
+
+## Some ways I have brought value:
+
+

app/about/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 export default function AboutPage() {
     return (
-        <div>
+        <div className="flex flex-col min-h-[50vh] bg-gradient-to-b from-black to-purple-950">
             <Link href="/about/me">About me</Link>
             <Link href="/about/resume">My resume</Link>
             <Link href="/about/skills">Skills</Link>

app/layout.tsx

@@ -1,15 +1,16 @@
 'use client'
 
+import './globals.css'
+
 import Head from 'next/head'
 import Navbar from '@/components/Navbar'
 import SiteTree from '@/components/SiteTree'
+import components from '@/components/mdx'
 import { MDXProvider } from '@mdx-js/react'
 import { Inter, Besley, Cabin } from 'next/font/google'
-import components from '@/components/mdx'
-import './globals.css'
-import { useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { IconContext } from 'react-icons'
+import { useEffect, useState } from 'react'
 
 export const inter = Inter({ subsets: ['latin'] })
 export const besley = Besley({ subsets: ['latin'] })
@@ -30,6 +31,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       case '/':
         setBg('bg-slate-900');
         break;
+      case '/about':
+      case '/about/me':
+        setBg('bg-purple-950');
+        break;
       default:
         setBg('bg-slate-900');
         break;
@@ -60,6 +65,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <IconContext.Provider value={{}}>
           <MDXProvider components={components}>
             <main className={`${bg} min-h-screen`}>
+              <div id="navbar-spacer" className="h-[6rem] w-full" />
               {children}
             </main>
           </MDXProvider>

app/page.tsx

@@ -12,7 +12,6 @@ export default function Home() {
 
   return (
     <>
-      <div aria-description="spacer" className="h-[6rem] w-full" />
       <div id="hero" className="bg-gradient-to-b from-black to-slate-900 p-4 flex flex-col min-h-[50vh]">
         <span className={"px-4 mb-2 mt-4 bg-clip-text text-transparent uppercase text-3xl sm:text-6xl font-extrabold bg-opacity-100 animate-text-gradient bg-gradient-to-r " + `from-${firstColor.split('-').slice(1).join('-')} to-${secondColor.split('-').slice(1).join('-')}`}>
           Mikayla Dobson

components/About/CompanyShowcase.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { RxTriangleDown } from "react-icons/rx";
+
+interface CompanyShowcaseProps {
+    companyName: string
+    children: React.ReactNode
+}
+
+export default function CompanyShowcase({ companyName, children }: CompanyShowcaseProps) {
+    const [collapsed, setCollapsed] = useState(true);
+
+    useEffect(() => console.log(collapsed), [collapsed]);
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex items-center">
+                <h1>{companyName}</h1>
+                <div className="transition-transform duration-700 cursor-pointer">
+                    <RxTriangleDown className={collapsed ? "" : "rotate-180"} onClick={() => setCollapsed(!collapsed)} />
+                </div>
+                {/* <button onClick={() => setCollapsed(!collapsed)}>Show more</button> */}
+            </div>
+            <div className={"flex flex-col"}>
+                { collapsed ? <></> : children }
+            </div>
+        </div>
+    )
+}