feat: site overhaul — hero rewrite, projects promotion, structural cleanup#123
Merged
Conversation
…eanup
Hero & content (above-the-fold rewrite):
- Status pill ("Available · Independent OSS") with pulse
- Stats strip: 15+ Years, $100K+/mo Cloud saved, 5 PyPI packages, 5 OSS frameworks
- Tagline: "Founding-DevOps operator who ships OSS frameworks. Python + Go, multi-cloud, 15+ years."
- CTA hierarchy: Download Resume (primary), View Resume (secondary), icon-only socials
- Self-hosted fonts via @fontsource (removed render-blocking Google Fonts link)
Content & structure:
- radioactive-ralph and paranoid-passwd promoted to first-class projects[] (5 total)
- Explicit tab order: About → Projects → Work → Skills → Earlier Career → Education
- Per-job tech[] chips in resume.json; cloud providers (AWS/GCP/Azure) highlighted
- App.tsx decomposed 397 → 90 LOC; new src/components/sections/ directory
UX:
- Collapsing sticky header: absorbs mini-hero (name + Resume) once user scrolls past hero
- Horizontal scroll fade-mask for tab overflow
- Resume page: back-to-site nav bar, tagline, Featured Projects section, tech chips, anchor ids per job
- Cross-links / <-> /resume/; HTML resume option in footer
- Version + build-date displayed in footer (v1.3.0 · updated YYYY-MM-DD)
SEO & metadata:
- Canonical URLs; og:image (1200x630 with name/tagline/status); twitter:card; JSON-LD Person
- @astrojs/sitemap integration; site URL corrected to https://www.jonbogaty.com
- Layout.astro rewritten with full metadata surface
Design system:
- Brand tokens in index.css: --brand-amber, --brand-steel, --brand-success, --brand-on-light
- prefers-reduced-motion kills gradient animation + Framer Motion durations
- Hero name gradient extracted to .hero-name CSS utility class
Build:
- release.yml regenerates og-image + resume PDF/DOCX on every deploy
- scripts/generate-og-image.ts (Playwright-rendered) and scripts/generate-resume-pdf-only.ts
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (4)
📒 Files selected for processing (20)
📝 WalkthroughWalkthroughThis PR refactors the architecture to migrate from dynamic section rendering to explicit component imports, introduces Playwright-based artifact generation (OG image and resume PDF in CI), integrates sitemap plugin, updates configuration to custom domain, enhances HeroSection with status/stats, and enriches resume content with tech stacks and new projects. Changes
Sequence Diagram(s)OG Image and Resume PDF Generation Flow sequenceDiagram
participant CI as CI Workflow
participant Gen as Generate Script
participant PW as Playwright
participant Chrome as Chromium
participant Page as Page
participant FS as File System
CI->>Gen: Invoke generate-og-image.ts
Gen->>Gen: Load resume.json
Gen->>Gen: Build HTML template
Gen->>PW: Launch browser
PW->>Chrome: Start headless browser
Chrome-->>PW: Browser instance
Gen->>Page: Create new page
PW->>Page: Set viewport (1200×630)
Gen->>Page: Load HTML via setContent
Page->>Page: Render & wait networkidle (20s)
Gen->>Page: Take PNG screenshot
Page-->>Gen: Screenshot buffer
Gen->>FS: Write to public/og-image.png
FS-->>Gen: File written
Gen->>Chrome: Close browser
Chrome-->>Gen: Browser closed
Gen-->>CI: Log file size
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![amazon-q-developer[bot]](https://avatars.githubusercontent.com/in/1220912?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Summary
Note: This PR (#123) is already merged and closed. This review is performed post-merge based on available PR metadata.
PR Overview
This is a major site overhaul with 1,565 additions and 464 deletions across 24 files, including hero rewrite, SEO improvements, structural refactoring, and build automation.
Key Observations
Unable to Complete Full Review: The PR's source branch is no longer accessible, preventing detailed line-by-line code analysis of:
- New build scripts (
generate-og-image.ts,generate-resume-pdf-only.ts) - GitHub Actions workflow changes
- Component refactoring and new implementations
- Configuration changes
From PR Description - Incomplete Testing:
Two critical test items remain unchecked:
- Lighthouse 100/100/100 verification on deployed site
- og:image preview testing on LinkedIn/Slack
Recommendations
- Complete pending tests on the deployed site to verify SEO and performance improvements
- Monitor production for any issues from this large changeset
- For future PRs: Break large refactors (24 files) into smaller, focused PRs for proper security and functionality review
Since the code is already merged, ensure post-deployment verification is completed and monitor for any production issues.
You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request refactors the resume application by modularizing sections into individual components, enhancing the hero section with status and statistics, and adding automated scripts for generating Open Graph images and PDF resumes. It also improves SEO with JSON-LD and meta tags, and updates the resume content with detailed technical stacks for work experience and projects. Feedback suggests self-hosting fonts within the OG image generation script to eliminate external network dependencies and ensure build consistency.
Comment on lines
+18
to
+19
| @font-face { font-family: 'Instrument Serif'; src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizEREVNn4nADZqV5yRuqaKbiaLD.woff2) format('woff2'); font-weight: 400; } | ||
| @font-face { font-family: 'JetBrains Mono'; src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO1l.woff2) format('woff2'); font-weight: 500; } |
Contributor
There was a problem hiding this comment.
To improve build reliability and align with the site's self-hosting font strategy, consider loading the fonts from the local @fontsource packages instead of fetching them from Google Fonts. This removes an external network dependency from your build process and ensures consistency.
You can achieve this by reading the font files, converting them to base64 data URIs, and embedding them in the CSS.
Here's an example of how you could modify the script:
import { createRequire } from 'node:module';
import { readFileSync, writeFileSync } from 'node:fs';
// ... other imports
const require = createRequire(import.meta.url);
// Helper to read font file and create a base64 data URI
function getFontDataUri(path: string): string {
const fontPath = require.resolve(path);
const fontFile = readFileSync(fontPath);
return `data:font/woff2;base64,${fontFile.toString('base64')}`;
}
const instrumentSerif = getFontDataUri(
'@fontsource/instrument-serif/files/instrument-serif-latin-400-normal.woff2'
);
const jetbrainsMono = getFontDataUri(
'@fontsource/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff2'
);
// ...
const html = `<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
@font-face { font-family: 'Instrument Serif'; src: url(${instrumentSerif}) format('woff2'); font-weight: 400; }
@font-face { font-family: 'JetBrains Mono'; src: url(${jetbrainsMono}) format('woff2'); font-weight: 500; }
/* ... rest of the styles */
</style>
</head>
...
`;
// ...There was a problem hiding this comment.
Pull request overview
This PR overhauls the portfolio site’s above-the-fold experience and content structure, hardens SEO metadata, and updates the build/release pipeline to regenerate share + resume artifacts on deploy.
Changes:
- Decomposes the main app into section components with an explicit tab order and a collapsing sticky header.
- Expands resume/project data (tagline/status/stats, promoted projects, per-job tech chips) and updates the resume page layout.
- Adds SEO primitives (canonical, OG/Twitter tags, JSON-LD Person, sitemap) plus Playwright-based OG image and resume PDF generation in CI.
Reviewed changes
Copilot reviewed 19 out of 24 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/resume.astro | Adds featured projects section, back-nav/downloads, anchor ids, and per-job tech chips for the resume page. |
| src/layouts/Layout.astro | Introduces self-hosted font imports and adds canonical/OG/Twitter/JSON-LD metadata. |
| src/index.css | Adds brand CSS variables and new utility/animation styles (scroll fade mask, hero gradient, pulse, reduced-motion handling). |
| src/env.d.ts | Declares global build-time constants for version/build date. |
| src/content/resume.json | Extends resume content with hero metadata, promoted projects, and per-job tech arrays. |
| src/components/sections/SkillGrid.tsx | New skills grid layout with “headline” categories emphasized. |
| src/components/sections/ProjectGrid.tsx | New projects grid with deterministic accent color and package/tech rendering. |
| src/components/sections/JobList.tsx | New work experience UI with selectable job list and tech-chip highlighting for cloud platforms. |
| src/components/sections/EducationList.tsx | New education section renderer. |
| src/components/sections/EarlierCareer.tsx | New earlier-career summary renderer. |
| src/components/sections/AboutSection.tsx | New about section renderer with contact + profile links. |
| src/components/SiteFooter.tsx | Adds HTML resume link and displays injected version/build-date metadata. |
| src/components/SectionTabs.tsx | New sticky tabs header that collapses based on hero scroll sentinel. |
| src/components/HeroSection.tsx | Reworks hero to use tagline/status/stats and updates CTA hierarchy + social icon buttons. |
| src/App.tsx | Replaces monolithic renderer with explicit tab ordering and section components. |
| scripts/generate-resume-pdf-only.ts | New script to generate the PDF from prebuilt HTML using Playwright. |
| scripts/generate-og-image.ts | New Playwright-based OG image generator (1200×630) written to public/. |
| public/Jon_Bogaty_Resume.docx | Updates the committed DOCX resume artifact. |
| pnpm-lock.yaml | Adds lockfile entries for sitemap, fontsource, and astro check tooling. |
| package.json | Adds sitemap/fontsource deps, astro check dev dependency, OG generation script, and updates homepage URL. |
| astro.config.mjs | Sets site to the custom domain, enables sitemap, and injects build metadata via Vite define. |
| .github/workflows/release.yml | Installs Playwright browser in CI and regenerates OG image + resume PDF artifacts during deploy. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comment on lines
2
to
6
| /** | ||
| * Print-optimized resume page. | ||
| * Rendered as static HTML by Astro — zero JavaScript. | ||
| * Pandoc converts this to PDF and DOCX during the build. | ||
| */ |
| body { padding: 0; } | ||
| @page { margin: 0.5in; size: letter; } | ||
| .sitenav { display: none; } | ||
| .tech-chips { display: none; } |
| .catch(() => { | ||
| // Shader load failed — CSS fallback stays | ||
| }) | ||
| .catch(() => {}) |
Comment on lines
+7
to
+19
| import { chromium } from 'playwright' | ||
| import resume from '../src/content/resume.json' with { type: 'json' } | ||
|
|
||
| const root = resolve(import.meta.dirname!, '..') | ||
| const out = resolve(root, 'public/og-image.png') | ||
|
|
||
| const html = `<!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <style> | ||
| @font-face { font-family: 'Instrument Serif'; src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizEREVNn4nADZqV5yRuqaKbiaLD.woff2) format('woff2'); font-weight: 400; } | ||
| @font-face { font-family: 'JetBrains Mono'; src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDba2o-flEEny0FZhsfKu5WU4xD-IQ-PuZJJXxfpAO1l.woff2) format('woff2'); font-weight: 500; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Above-the-fold rewrite + structural cleanup + SEO hardening in one shot.
Hero
Content
Structure
SEO
Build
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Updates