Skip to content

Commit 4320a63

Browse files
davidagustinclaude
andcommitted
feat: Apple-style parallax redesign with dark mode and multi-view projects
- Add dark/light mode toggle with localStorage persistence (useTheme hook) - Apple-style parallax scroll effects with Framer Motion useScroll/useTransform - Multi-view Projects section: Grid, Carousel, and Table views with search/filter - Featured projects horizontal scroll strip with snap points - Scroll progress bar, animated counters, gradient orb decorations - Skip-to-content link and prefers-reduced-motion accessibility support - Update all components with comprehensive dark mode variants - Add 3 new projects (25 total): Backend Engineer Detective, Coding Tricks Practice, React 30 - Remove unused react-router-dom dependency - Update README for current state, add Claude project rules - WCAG 2.1 AA: ARIA labels, role="alert" on Snackbar, semantic HTML Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 49ae6bb commit 4320a63

17 files changed

Lines changed: 1249 additions & 431 deletions

.claude/rules/project-rules.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
description: Project rules – Ralph loop, README, wiki, push when done, no extra MD, multi-agent
3+
alwaysApply: true
4+
---
5+
6+
# Project Rules
7+
8+
## Ralph Loop – Tasks Until Done
9+
10+
When working on a task:
11+
12+
1. **Loop until done** – Keep iterating on the task until it is fully complete. Do not stop with partial implementations or "good enough" states.
13+
2. **Verify before claiming completion** – Before saying the task is done:
14+
- Run the relevant verification (tests, build, lint).
15+
- Read the output and confirm it actually passed.
16+
- Only then treat the task as complete.
17+
3. **No partial completion** – Deliver the full scope. If verification fails or something is missing, fix it and re-verify; do not leave failing tests or broken builds.
18+
4. **Use a todo list** – For multi-step work, track items (e.g. with a todo list) and ensure every item is completed before finishing.
19+
20+
Do not claim completion without fresh verification evidence (e.g. test/build output showing success).
21+
22+
---
23+
24+
## README & Wiki Before Commit
25+
26+
Before committing changes:
27+
28+
1. **Look at the codebase** – Review what changed (new features, APIs, structure, scripts, or config) so docs stay in sync.
29+
2. **Update README** – Add or edit README.md so it reflects current setup, usage, and behavior (e.g. new commands, env vars, or features). Keep it accurate and useful for someone cloning the repo.
30+
3. **Update the GitHub Wiki** – Push corresponding updates to the repo's GitHub wiki (`https://github.com/davidagustin/davidagustin.github.io/wiki`). Use `gh api` or clone the wiki repo (`davidagustin.github.io.wiki.git`) to create/update pages. The wiki should mirror major README sections with additional detail (e.g. per-feature pages, architecture docs, how-to guides). At minimum, keep the wiki Home page in sync with the README overview.
31+
32+
Do this **before** staging and committing. If the change is trivial and doesn't affect setup or usage, a README/wiki update may be unnecessary.
33+
34+
---
35+
36+
## Push When Done
37+
38+
When you finish a task that changes files:
39+
40+
1. **Stage** the relevant files (`git add`).
41+
2. **Commit** with a clear message describing the work.
42+
3. **Push** to the remote (`git push`).
43+
44+
Do this as the final step before telling the user the task is complete. If the user says "don't push" or the repo has no remote, skip the push step.
45+
46+
---
47+
48+
## No Extra Markdown Files – Consolidate to README
49+
50+
- **Do not** create additional `.md` files (e.g. CONTRIBUTING.md, CHANGELOG.md, docs/*.md, task plans, assignment lists) unless they have **functional value** for the app.
51+
- **Consolidate** all informational documentation into **README.md**.
52+
- **Delete stale planning files** – Task breakdowns, generation plans, assignment lists, and other one-time planning documents must be deleted once completed. Do not leave them in the repo.
53+
- **Audit on every commit** – Before committing, run `git ls-files '*.md'` and verify the only tracked markdown files are `README.md` and `.claude/rules/*.md`. If any other `.md` files exist, either delete them (if stale/informational) or consolidate their useful content into README.md.
54+
- **Exception:** Create a separate markdown file only when the app or tooling **uses it at runtime** (e.g. a template, config schema doc consumed by code, or required by a tool). Purely informational content belongs in README.md.
55+
56+
---
57+
58+
## Multi-Agent Unique Tasks
59+
60+
When spawning or orchestrating multiple agents (e.g. parallel workers, swarm, autopilot, pipeline, or any multi-agent flow):
61+
62+
1. **Assign distinct work** – Each agent must have a clearly different responsibility. No two agents should be given the same task, file, or subtask.
63+
2. **Partition by scope** – Split work by file, feature, layer, or step so there is no overlap (e.g. one agent on frontend, one on backend; or one per file/component).
64+
3. **Avoid duplicate effort** – Before spawning, confirm the task list has no duplicate entries. If using a shared task list, use atomic claiming or similar so only one agent takes each item.
65+
4. **Name or tag tasks** – When creating tasks for multiple agents, label them so it's obvious which agent does what (e.g. "Agent A: auth API", "Agent B: login UI").
66+
67+
If you are about to spawn N agents, ensure there are at least N unique tasks (or N non-overlapping scopes); never assign the same task to more than one agent.

README.md

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# David Agustin — Portfolio
22

3-
Personal portfolio showcasing 22 full-stack projects built with React, Next.js, Angular, Vue, SvelteKit, Python, and AI/ML technologies. Deployed across 8+ cloud platforms.
3+
Personal portfolio showcasing 25 full-stack projects built with React, Next.js, Angular, Vue, SvelteKit, Python, and AI/ML technologies. Deployed across 10+ cloud platforms.
44

55
**Live:** [davidagustin.github.io](https://davidagustin.github.io)
66

@@ -11,8 +11,8 @@ Personal portfolio showcasing 22 full-stack projects built with React, Next.js,
1111
| Layer | Technologies |
1212
|-------|-------------|
1313
| Framework | React 18, TypeScript |
14-
| Styling | Tailwind CSS 3, Inter font |
15-
| Animation | Framer Motion |
14+
| Styling | Tailwind CSS 3, Inter font, Dark Mode |
15+
| Animation | Framer Motion, Parallax Scroll Effects |
1616
| Email | EmailJS |
1717
| Build | Create React App |
1818
| Deploy | GitHub Pages |
@@ -32,7 +32,7 @@ Personal portfolio showcasing 22 full-stack projects built with React, Next.js,
3232
| [Sign Language Learning](https://spell-your-name.vercel.app/) | Next.js, MediaPipe | ASL learning with real-time hand tracking |
3333
| [Historigal](https://historigal-vercel.vercel.app) | Next.js 15, TypeScript | Search 37,860+ historical events |
3434

35-
[View all 22 projects on the live site.](https://davidagustin.github.io/#projects)
35+
[View all 25 projects on the live site.](https://davidagustin.github.io/#projects)
3636

3737
## All Projects
3838

@@ -45,6 +45,8 @@ Personal portfolio showcasing 22 full-stack projects built with React, Next.js,
4545
| MLI Learning Quiz | Next.js 15, React 19, TypeScript | [Live](https://ai-quiz-questions.vercel.app) · [GitHub](https://github.com/davidagustin/ai-quiz-questions) |
4646
| Rules of ML | Next.js 15, TypeScript | [Live](https://rules-of-machine-learning.vercel.app/) · [GitHub](https://github.com/davidagustin/rules-of-machine-learning) |
4747
| Sign Language Learning | Next.js 15, MediaPipe, React 19 | [Live](https://spell-your-name.vercel.app/) · [GitHub](https://github.com/davidagustin/spell-your-name) |
48+
| Coding Tricks Practice | Next.js, TypeScript, Monaco Editor | [Live](https://coding-tricks-practice.vercel.app) · [GitHub](https://github.com/davidagustin/coding-tricks-practice) |
49+
| React 30 | React 19, TypeScript, Framer Motion | [Live](https://react-30-nu.vercel.app) · [GitHub](https://github.com/davidagustin/react-30) |
4850

4951
### AI/ML
5052
| Project | Technologies | Links |
@@ -74,13 +76,14 @@ Personal portfolio showcasing 22 full-stack projects built with React, Next.js,
7476
| Project | Technologies | Links |
7577
|---------|-------------|-------|
7678
| UI Patterns React | Next.js 15, React 19, TypeScript 5.6 | [Live](https://ui-patterns-react.vercel.app/) · [GitHub](https://github.com/davidagustin/ui-patterns-react) |
79+
| Backend Engineer Detective | Node.js, Cloudflare Workers | [Live](https://backend-engineer-detective.app-production.workers.dev/) · [GitHub](https://github.com/davidagustin/backend-engineer-detective) |
7780
| React Interview Sandbox | React 18, TypeScript, Prism.js | [GitHub](https://github.com/davidagustin/react-interview-sandbox) |
7881
| Sudoku Game | React 18, Express.js, Heroku | [Live](https://heroku-sudoku-49243446e4d3.herokuapp.com/) · [GitHub](https://github.com/davidagustin/heroku-practice) |
7982
| Classic Snake Game | React 19, TypeScript, Framer Motion | [Live](https://classic-snake-game-phi.vercel.app/) · [GitHub](https://github.com/davidagustin/classic-snake-game) |
8083

8184
## Cloud Platforms
8285

83-
Vercel, AWS (Amplify), Azure (Static Web Apps), Heroku, Digital Ocean, Netlify, Render, Surge.sh, Firebase Hosting, GitLab Pages
86+
Vercel, AWS (Amplify), Azure (Static Web Apps), Heroku, Digital Ocean, Netlify, Render, Surge.sh, Firebase Hosting, GitLab Pages, Cloudflare Workers
8487

8588
## Local Development
8689

@@ -109,19 +112,21 @@ Open [http://localhost:3000](http://localhost:3000).
109112
src/
110113
├── components/
111114
│ ├── Navbar.tsx # Fixed navigation with scroll detection
112-
│ ├── Hero.tsx # Dark-themed landing section
115+
│ ├── Hero.tsx # Dark-themed landing section with parallax
113116
│ ├── About.tsx # Skills organized by domain
114-
│ ├── Projects.tsx # Filterable project grid (22 projects)
117+
│ ├── Projects.tsx # Multi-view projects (Grid, Carousel, Table)
115118
│ ├── Donation.tsx # Support section (Stripe, BTC, ETH)
116119
│ ├── Contact.tsx # EmailJS contact form
117120
│ ├── Footer.tsx # Site footer
118121
│ └── Snackbar.tsx # Toast notifications
122+
├── hooks/
123+
│ └── useScrollProgress.tsx # Scroll progress bar logic
119124
├── types/
120125
│ └── index.ts # TypeScript interfaces
121126
├── utils/
122-
│ ├── constants.ts # Project data, social links
127+
│ ├── constants.ts # Project data (25 projects), social links
123128
│ └── scroll.ts # Smooth scroll utility
124-
├── App.tsx # Root component
129+
├── App.tsx # Root component with theme toggle
125130
├── index.tsx # Entry point
126131
└── index.css # Tailwind config and custom styles
127132
```
@@ -131,8 +136,10 @@ src/
131136
- **Typography-first** — Content hierarchy through font weight, size, and spacing
132137
- **Restrained palette** — Dark hero, white/slate alternating sections
133138
- **Minimal decoration** — No emoji icons or gradient backgrounds on cards
134-
- **Accessible** — Semantic HTML, proper contrast, keyboard navigation
139+
- **Accessible** — Semantic HTML, proper contrast, keyboard navigation, skip-to-content link, prefers-reduced-motion support
135140
- **Responsive** — Mobile-first with sm/md/lg breakpoints
141+
- **Apple-style parallax** — Smooth scroll effects using Framer Motion useScroll/useTransform
142+
- **Dark/Light mode** — Theme toggle with localStorage persistence
136143

137144
## Support
138145

package-lock.json

Lines changed: 0 additions & 42 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0",
2222
"react-icons": "^4.10.0",
23-
"react-router-dom": "^6.8.0",
2423
"react-scripts": "5.0.1"
2524
},
2625
"devDependencies": {

src/App.tsx

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { motion } from 'framer-motion';
1+
import { motion, useScroll, useSpring } from 'framer-motion';
22
import type React from 'react';
33
import { useEffect, useState } from 'react';
44
import About from './components/About';
@@ -8,9 +8,13 @@ import Footer from './components/Footer';
88
import Hero from './components/Hero';
99
import Navbar from './components/Navbar';
1010
import Projects from './components/Projects';
11+
import { useTheme } from './hooks/useTheme';
1112

1213
const App: React.FC = () => {
1314
const [isLoading, setIsLoading] = useState<boolean>(true);
15+
const { theme, toggleTheme } = useTheme();
16+
const { scrollYProgress } = useScroll();
17+
const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30, restDelta: 0.001 });
1418

1519
useEffect(() => {
1620
const timer = setTimeout(() => {
@@ -23,12 +27,12 @@ const App: React.FC = () => {
2327
return (
2428
<div className="loading-screen">
2529
<motion.div
26-
initial={{ opacity: 0 }}
27-
animate={{ opacity: 1 }}
28-
transition={{ duration: 0.4 }}
30+
initial={{ opacity: 0, scale: 0.95 }}
31+
animate={{ opacity: 1, scale: 1 }}
32+
transition={{ duration: 0.5, ease: 'easeOut' }}
2933
className="loading-content"
3034
>
31-
<h2>David Agustin</h2>
35+
<h1>David Agustin</h1>
3236
<p>Portfolio</p>
3337
</motion.div>
3438
</div>
@@ -37,8 +41,15 @@ const App: React.FC = () => {
3741

3842
return (
3943
<div className="App">
40-
<Navbar />
41-
<main>
44+
<a
45+
href="#main-content"
46+
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-white focus:text-surface-900 focus:rounded-lg focus:shadow-lg focus:text-sm focus:font-semibold dark:focus:bg-surface-800 dark:focus:text-white"
47+
>
48+
Skip to main content
49+
</a>
50+
<motion.div className="scroll-progress" style={{ scaleX }} />
51+
<Navbar theme={theme} toggleTheme={toggleTheme} />
52+
<main id="main-content">
4253
<Hero />
4354
<About />
4455
<Projects />

0 commit comments

Comments
 (0)