Initial Draft of About Page and Add Code Header Link
All checks were successful
Build and Deploy / build (push) Successful in 28s

This commit is contained in:
Justin Deal 2025-05-03 03:10:55 -07:00
parent b41afca053
commit c6573287fe
5 changed files with 307 additions and 21 deletions

View File

@ -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>)}

View File

@ -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
}

View File

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

View File

@ -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",

View File

@ -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:url" content={GLOBAL.rootUrl} />
<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={`${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>