Initial Draft of About Page and Add Code Header Link

src/components/Footer.astro

@@ -33,7 +33,7 @@ const year = date.getFullYear();
             ></path>
           </svg>
         </Anchor>)}
-        {GLOBAL.twitterProfile && (<Anchor url={GLOBAL.twitterProfile} aria-label="Twitter Profile">
+        {GLOBAL.giteaProfile && (<Anchor url={GLOBAL.giteaProfile} aria-label="Gitea Profile">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -42,7 +42,7 @@ const year = date.getFullYear();
           >
             <path
               class="zag-fill zag-transition"
-              d="m17.687 3.063l-4.996 5.711l-4.32-5.711H2.112l7.477 9.776l-7.086 8.099h3.034l5.469-6.25l4.78 6.25h6.102l-7.794-10.304l6.625-7.571zm-1.064 16.06L5.654 4.782h1.803l10.846 14.34z"
+              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
             ></path>
           </svg>
         </Anchor>)}

src/components/ProjectSnippet.astro

@@ -22,7 +22,7 @@ const { title, description, url, githubUrl, liveUrl, tags } = Astro.props;
       {
         githubUrl ? (
           <Anchor url={githubUrl} class="text-base" external>
-            GitHub
+            Source
           </Anchor>
         ) : null
       }

src/layouts/ProjectLayout.astro

@@ -52,7 +52,7 @@ const sourceUrl = generateSourceUrl(frontmatter.filename, "projects");
         {
           frontmatter.githubUrl ? (
             <Anchor url={frontmatter.githubUrl} class="text-base" external>
-              GitHub
+              Source
             </Anchor>
           ) : null
         }

src/lib/variables.ts

@@ -37,11 +37,11 @@ export const GLOBAL = {
   // Menu items
   menu: {
     home: "/",
+    about: "/about",
     blog: "/blog",
     projects: "/projects",
     homelab: "/homelab",
-    // about: "/about",
+    code: "https://code.justin.deal",
-    // code: "https://code.justin.deal",
     // videos: "https://www.youtube.com/@justin_deal",
     // homelab: "https://homelab.justin.deal",
     // contact: "/contact",

src/pages/about.astro

@@ -1,43 +1,329 @@
 ---
-import { featuredArticles, featuredProjects } from "../lib/featured";
 import { GLOBAL } from "../lib/variables";
 import Layout from "../layouts/Layout.astro";
-import Hero from "../components/home/Hero.astro";
 import Section from "../components/common/Section.astro";
+import Prose from "../components/Prose.astro";
 ---
 
 <Layout>
   <Fragment slot="head">
-    <title>{GLOBAL.username} • {GLOBAL.shortDescription}</title>
+    <title>About {GLOBAL.username} • {GLOBAL.shortDescription}</title>
     <meta
       name="description"
-      content={GLOBAL.longDescription}
+      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
     />
     <meta
       property="og:title"
-      content={`${GLOBAL.username} • ${GLOBAL.shortDescription}`}
+      content={`About ${GLOBAL.username} • ${GLOBAL.shortDescription}`}
     />
     <meta
       property="og:description"
-      content={GLOBAL.longDescription}
+      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
     />
-    <meta property="og:image" content={`${GLOBAL.rootUrl}/pixel_avatar.png`} /> 
+    <meta property="og:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} /> 
-    <meta property="og:url" content={GLOBAL.rootUrl} />
+    <meta property="og:url" content={`${GLOBAL.rootUrl}/about`} />
     <meta name="twitter:card" content="summary_large_image" />
     <meta
       name="twitter:title"
-      content={`${GLOBAL.username} • ${GLOBAL.shortDescription}`}
+      content={`About ${GLOBAL.username} • ${GLOBAL.shortDescription}`}
     />
     <meta
       name="twitter:description"
-      content={GLOBAL.longDescription}
+      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
     />
-    <meta name="twitter:image" content={`${GLOBAL.rootUrl}/pixel_avatar .png`} />
+    <meta name="twitter:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} />
     <meta http-equiv="content-language" content="en" />
     <meta name="language" content="English" />
-    <link rel="canonical" href={GLOBAL.rootUrl} />
+    <link rel="canonical" href={`${GLOBAL.rootUrl}/about`} />
   </Fragment>
-  <Section class="my-16">
+  
-    <Hero />
+  <Section class="mt-8">
+    <div class="flex flex-col gap-4 mt-8 mb-8">
+      <h1 class="text-3xl sm:text-4xl leading-tight font-display">
+        About Me
+      </h1>
+      <p class="text-xl zag-text-muted">
+        Software engineer with a passion for cloud computing, sustainability, and high-performance systems.
+      </p>
+    </div>
+
+    <!-- Profile Summary -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+      <div class="md:col-span-1">
+        <div class="aspect-square w-full max-w-[250px] mx-auto md:mx-0 rounded-lg overflow-hidden -zag-bg">
+          <img 
+            src="/pixel_avatar.png" 
+            alt="Justin Deal" 
+            class="w-full h-full object-cover"
+          />
+        </div>
+      </div>
+      <div class="md:col-span-2">
+        <div class="zag-bg-alt p-6 rounded-lg shadow-sm">
+          <h2 class="text-2xl font-display mb-4">Professional Summary</h2>
+          <p class="mb-4">
+            I'm a Software Development Engineer at Amazon with expertise in sustainability reporting, ESG systems, and cloud infrastructure. My background spans high-performance computing, data analytics, and full-stack development.
+          </p>
+          <p>
+            With a Master's in Computer Science from Georgia Tech (in progress) and a strong foundation in AI and networking, I combine technical expertise with a passion for creating systems that make a positive impact.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Experience Timeline -->
+    <div class="mb-16" x-data="{ activeTab: 'amazon' }">
+      <h2 class="text-2xl font-display mb-6">Work Experience</h2>
+      
+      <!-- Experience Tabs -->
+      <div class="flex flex-wrap gap-2 mb-6 border-b zag-border-b">
+        <button 
+          @click="activeTab = 'amazon'" 
+          :class="activeTab === 'amazon' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          Amazon
+        </button>
+        <button 
+          @click="activeTab = 'hpe'" 
+          :class="activeTab === 'hpe' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          HPE
+        </button>
+        <button 
+          @click="activeTab = 'research'" 
+          :class="activeTab === 'research' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          Research
+        </button>
+      </div>
+      
+      <!-- Amazon Experience -->
+      <div x-show="activeTab === 'amazon'" class="zag-bg-alt p-6 rounded-lg shadow-sm">
+        <div class="flex flex-col sm:flex-row justify-between mb-4">
+          <h3 class="text-xl font-semibold">Amazon</h3>
+          <span class="zag-text-muted">July 2021 - Present</span>
+        </div>
+        
+        <div class="mb-6">
+          <div class="flex flex-col sm:flex-row justify-between mb-2">
+            <h4 class="font-semibold">Software Development Engineer II</h4>
+            <span class="zag-text-muted">August 2024 - Present</span>
+          </div>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Certified as an Amazon Guardian, acting as a bridge between development team and security engineers</li>
+            <li>Led away team development of on-demand report generation and egress</li>
+            <li>Designed and implemented capabilities for ESG reporting on precomputed data</li>
+          </ul>
+        </div>
+        
+        <div>
+          <div class="flex flex-col sm:flex-row justify-between mb-2">
+            <h4 class="font-semibold">Software Development Engineer</h4>
+            <span class="zag-text-muted">July 2021 - August 2024</span>
+          </div>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Led sustainability reporting tech team for Amazon's 2024 Carbon Footprint report</li>
+            <li>Automated experimental ESG reports in Amazon's sustainability systems</li>
+            <li>Implemented and maintained critical environmental reporting systems</li>
+            <li>Designed and implemented an ESG metadata store for customer report creation</li>
+            <li>Expanded supply chain simulation capabilities for slow-moving items</li>
+            <li>Implemented monitoring and dashboards across various systems</li>
+          </ul>
+        </div>
+      </div>
+      
+      <!-- HPE Experience -->
+      <div x-show="activeTab === 'hpe'" class="zag-bg-alt p-6 rounded-lg shadow-sm" style="display: none;">
+        <div class="flex flex-col sm:flex-row justify-between mb-4">
+          <h3 class="text-xl font-semibold">Hewlett Packard Enterprise</h3>
+          <span class="zag-text-muted">May 2020 - August 2020</span>
+        </div>
+        
+        <div>
+          <h4 class="font-semibold mb-2">Software Engineering Intern - Storage</h4>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Redesigned core test scheduling infrastructure for flexible algorithm selection and configuration</li>
+            <li>Refactored test scheduling algorithm to a modular design</li>
+            <li>Created a novel process for developing new scheduling algorithms with maximum code reuse</li>
+          </ul>
+        </div>
+      </div>
+      
+      <!-- Research Experience -->
+      <div x-show="activeTab === 'research'" class="zag-bg-alt p-6 rounded-lg shadow-sm" style="display: none;">
+        <div class="mb-6">
+          <div class="flex flex-col sm:flex-row justify-between mb-4">
+            <h3 class="text-xl font-semibold">Georgia Tech Research Institute (GTRI)</h3>
+            <span class="zag-text-muted">May 2019 - June 2020</span>
+          </div>
+          
+          <h4 class="font-semibold mb-2">High Performance Computing and Data Analytics Researcher</h4>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Contributed data annotation and validation tools to an open-source healthcare analytic platform</li>
+            <li>Optimized ray-tracing applications using novel algorithms</li>
+            <li>Designed and implemented an API for the HPC cluster's database with interactive frontend</li>
+            <li>Developed parallelized HPC applications with CUDA C and Open MPI</li>
+            <li>Conducted data analysis on cluster usage data, creating 17 unique visualizations</li>
+          </ul>
+        </div>
+        
+        <div>
+          <div class="flex flex-col sm:flex-row justify-between mb-4">
+            <h3 class="text-xl font-semibold">Georgia Tech Discrete Math and Molecular Biology</h3>
+            <span class="zag-text-muted">December 2018 - May 2019</span>
+          </div>
+          
+          <h4 class="font-semibold mb-2">Math Department Student Researcher</h4>
+          <ul class="list-disc pl-5 space-y-2">
+            <li>Developed interactive visualization tools for non-coding RNA secondary structures using D3.js</li>
+            <li>Created a parser to translate HTML to a custom file format</li>
+            <li>Wrote weekly reports and research summaries to guide further development</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- Skills Section -->
+    <div class="mb-16" x-data="{ activeSkillTab: 'languages' }">
+      <h2 class="text-2xl font-display mb-6">Technical Skills</h2>
+      
+      <!-- Skill Category Tabs -->
+      <div class="flex flex-wrap gap-2 mb-6 border-b zag-border-b">
+        <button 
+          @click="activeSkillTab = 'languages'" 
+          :class="activeSkillTab === 'languages' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          Languages
+        </button>
+        <button 
+          @click="activeSkillTab = 'aws'" 
+          :class="activeSkillTab === 'aws' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          AWS Services
+        </button>
+        <button 
+          @click="activeSkillTab = 'frameworks'" 
+          :class="activeSkillTab === 'frameworks' ? 'zag-text-accent font-semibold border-b-2 zag-border-accent -mb-px' : 'zag-text-muted'" 
+          class="px-4 py-2 transition-colors"
+        >
+          Frameworks & Libraries
+        </button>
+      </div>
+      
+      <!-- Languages -->
+      <div x-show="activeSkillTab === 'languages'" class="zag-bg-alt p-6 rounded-lg shadow-sm">
+        <div class="flex flex-wrap gap-3">
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Java</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Scala</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Python</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">TypeScript</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">C/C++</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">JavaScript</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">SQL</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">x86-64 Assembly</span>
+        </div>
+      </div>
+      
+      <!-- AWS Services -->
+      <div x-show="activeSkillTab === 'aws'" class="zag-bg-alt p-6 rounded-lg shadow-sm" style="display: none;">
+        <div class="flex flex-wrap gap-3">
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">SQS</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">SNS</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Lambda</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">EMR</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">EMR Serverless</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">API Gateway</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">IAM</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">S3</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">DynamoDB</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Athena</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Step Functions</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">CloudWatch</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">CloudFormation</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Glue</span>
+        </div>
+      </div>
+      
+      <!-- Frameworks & Libraries -->
+      <div x-show="activeSkillTab === 'frameworks'" class="zag-bg-alt p-6 rounded-lg shadow-sm" style="display: none;">
+        <div class="flex flex-wrap gap-3">
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Spark</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">React</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">CUDA</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Open MPI</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Flask</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Java Spring</span>
+          <span class="-zag-text -zag-bg zag-transition px-3 py-2 rounded-md font-semibold">Knockout.js</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Education Section -->
+    <div class="mb-16">
+      <h2 class="text-2xl font-display mb-6">Education</h2>
+      
+      <div class="zag-bg-alt p-6 rounded-lg shadow-sm">
+        <div class="mb-6">
+          <div class="flex flex-col sm:flex-row justify-between mb-2">
+            <h3 class="text-xl font-semibold">Georgia Institute of Technology</h3>
+            <span class="zag-text-muted">In Progress</span>
+          </div>
+          <p class="font-medium">Master of Science in Computer Science</p>
+          <p class="zag-text-muted">Concentration: Computer Systems</p>
+        </div>
+        
+        <div>
+          <div class="flex flex-col sm:flex-row justify-between mb-2">
+            <h3 class="text-xl font-semibold">Georgia Institute of Technology</h3>
+            <span class="zag-text-muted">May 2021</span>
+          </div>
+          <p class="font-medium">Bachelor of Science in Computer Science, Minor: Public Policy</p>
+          <p class="zag-text-muted">Concentrations: Artificial Intelligence, Information and Networking</p>
+          <p class="zag-text-muted">GPA: 3.60</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Connect Section -->
+    <div class="mb-16">
+      <h2 class="text-2xl font-display mb-6">Connect</h2>
+      
+      <div class="flex flex-wrap gap-4">
+        <a href={GLOBAL.githubProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+          </svg>
+          <span>GitHub</span>
+        </a>
+        
+        <a href={GLOBAL.linkedinProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
+            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+            <rect x="2" y="9" width="4" height="12"></rect>
+            <circle cx="4" cy="4" r="2"></circle>
+          </svg>
+          <span>LinkedIn</span>
+        </a>
+        
+        <a href={GLOBAL.giteaProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
+            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+          </svg>
+          <span>Gitea</span>
+        </a>
+      </div>
+    </div>
   </Section>
 </Layout>
+
+<script>
+  // Alpine.js is already included in the site
+  document.addEventListener('alpine:init', () => {
+    // Any additional Alpine.js initialization can go here
+  });
+</script>