---
import { GLOBAL } from "../lib/variables";
import { socials } from "../lib/socials";
import Layout from "../layouts/Layout.astro";
import Section from "../components/common/Section.astro";
import Prose from "../components/Prose.astro";

const aboutSocials = socials.filter(social => social.showInAbout);
---

<Layout>
  <Fragment slot="head">
    <title>About {GLOBAL.username} • {GLOBAL.shortDescription}</title>
    <meta
      name="description"
      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
    />
    <meta
      property="og:title"
      content={`About ${GLOBAL.username} • ${GLOBAL.shortDescription}`}
    />
    <meta
      property="og:description"
      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
    />
    <meta property="og:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} /> 
    <meta property="og:url" content={`${GLOBAL.rootUrl}/about`} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content={`About ${GLOBAL.username} • ${GLOBAL.shortDescription}`}
    />
    <meta
      name="twitter:description"
      content="Software engineer with experience in cloud computing, sustainability reporting, and high-performance computing."
    />
    <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}/about`} />
  </Fragment>
  
  <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">
        {aboutSocials.map((social) => (
          <a href={social.url} 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">
            <!-- Dark icon for light theme -->
            <img src={social.iconDark} alt={social.alt} class="w-6 h-6 zag-text light-theme-only" />
            <!-- Light icon for dark theme -->
            <img src={social.iconLight} alt={social.alt} class="w-6 h-6 zag-text dark-theme-only" />
            <span>{social.name}</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>
