Redesign site: new layout, components, styles, screenshots, and screenshot script

[BryanPan342]

Motivation

• Refresh the portfolio site with a tighter, more polished layout and clearer content hierarchy for home and about pages.
• Improve component semantics, accessibility, and developer ergonomics by adding IDs, alt text, typed handlers, and richer Project props.
• Add a reproducible visual regression aid by capturing page screenshots and excluding them from source control.

Description

• Reworked pages and components: rewritten pages/index.tsx and pages/about.tsx with new copy and structure, updated components/Footer.tsx, components/Navbar.tsx, and components/Project.tsx to include semantic markup, accessibility attributes, alt text, typed event handler (onSubmit), and new props (ctaLabel, eyebrow, tags).
• Large stylesheet overhaul: replaced and expanded SCSS modules under styles/ (Home.module.scss, About.module.scss, Footer.module.scss, Project.module.scss, Navbar.module.scss, globals.scss, and _variables.module.scss) to implement the new layout, design tokens, responsive rules, and color system.
• Added visual assets and tooling: new screenshot SVGs under screenshots/, a headless capture script scripts/screenshot.js, and a package.json script screenshot to run it; .gitignore updated to ignore the screenshots/ folder.
• Minor packaging and UX tweaks: updated package.json scripts and improved button/link markup and styles across the site.

Testing

• Performed a local build with yarn build to validate TypeScript and Next.js compilation and the changes to page/component code.
• Ran the linters via yarn run lint to catch obvious style/type issues; both build and lint checks completed successfully.

---

Codex Task

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9c2ed4263a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Declare Playwright for the new screenshot script

In a clean checkout, yarn run screenshot invokes this new script, but scripts/screenshot.js calls require('playwright') and playwright is not listed in dependencies or devDependencies. That means the visual-regression aid exits immediately unless a developer has manually installed an undeclared package, so the new package script is not reproducible from the committed lockfile.

Useful? React with 👍 / 👎.