Skip to content

Commit 4501449

Browse files
davidagustinclaude
davidagustin
and
claude
committed
feat: enriched projects with README highlights, carousel improvements, and UI enhancements
Add readmeHighlights data (overview, highlights, techDetails) to all 25 projects from their GitHub READMEs. Project modals now display rich content including key highlights and detailed tech stack info. Carousel moves one card at a time with pure slide animation, adjustable column count (1/2/3). Table view has larger thumbnails. Featured strip auto-scrolls with pause-on-hover and play/stop toggle. Navbar centered responsively. Support strip moved above footer. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 4320a63 commit 4501449

6 files changed

Lines changed: 618 additions & 177 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Personal portfolio showcasing 25 full-stack projects built with React, Next.js,
1212
|-------|-------------|
1313
| Framework | React 18, TypeScript |
1414
| Styling | Tailwind CSS 3, Inter font, Dark Mode |
15-
| Animation | Framer Motion, Parallax Scroll Effects |
15+
| Animation | Framer Motion, Parallax Scroll Effects, Auto-scroll Featured Strip |
1616
| Email | EmailJS |
1717
| Build | Create React App |
1818
| Deploy | GitHub Pages |
@@ -114,7 +114,7 @@ src/
114114
│ ├── Navbar.tsx # Fixed navigation with scroll detection
115115
│ ├── Hero.tsx # Dark-themed landing section with parallax
116116
│ ├── About.tsx # Skills organized by domain
117-
│ ├── Projects.tsx # Multi-view projects (Grid, Carousel, Table)
117+
│ ├── Projects.tsx # Multi-view projects (Grid, Carousel, Table) with README highlights
118118
│ ├── Donation.tsx # Support section (Stripe, BTC, ETH)
119119
│ ├── Contact.tsx # EmailJS contact form
120120
│ ├── Footer.tsx # Site footer
@@ -124,7 +124,7 @@ src/
124124
├── types/
125125
│ └── index.ts # TypeScript interfaces
126126
├── utils/
127-
│ ├── constants.ts # Project data (25 projects), social links
127+
│ ├── constants.ts # Project data (25 projects), social links, README highlights
128128
│ └── scroll.ts # Smooth scroll utility
129129
├── App.tsx # Root component with theme toggle
130130
├── index.tsx # Entry point
@@ -140,6 +140,10 @@ src/
140140
- **Responsive** — Mobile-first with sm/md/lg breakpoints
141141
- **Apple-style parallax** — Smooth scroll effects using Framer Motion useScroll/useTransform
142142
- **Dark/Light mode** — Theme toggle with localStorage persistence
143+
- **Enriched project modals** — README highlights, tech details, and key features from each repo
144+
- **Multi-view projects** — Grid (2/3/4 columns), Carousel (1/2/3 columns, single-card navigation), and expanded Table view with large thumbnails
145+
- **Auto-scrolling featured strip** — Featured projects auto-advance with pause-on-hover and play/stop toggle
146+
- **Centered responsive navbar** — Three-column layout: brand left, nav centered, theme toggle right
143147

144148
## Support
145149

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ const App: React.FC = () => {
5555
<Projects />
5656
<Contact />
5757
</main>
58-
<Footer />
5958
<Donation />
59+
<Footer />
6060
</div>
6161
);
6262
};

‎src/components/Navbar.tsx‎

Lines changed: 51 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -46,20 +46,24 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
4646
transition={{ duration: 0.5 }}
4747
>
4848
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
49-
<div className="flex justify-between items-center h-16">
50-
<button
51-
type="button"
52-
onClick={() => scrollToSection('home')}
53-
className={`text-lg font-bold tracking-tight transition-colors ${
54-
scrolled
55-
? 'text-surface-900 dark:text-white hover:text-primary-700 dark:hover:text-primary-400'
56-
: 'text-white hover:text-primary-300'
57-
}`}
58-
>
59-
David Agustin
60-
</button>
49+
<div className="flex items-center h-16">
50+
{/* Left: Brand */}
51+
<div className="flex-1">
52+
<button
53+
type="button"
54+
onClick={() => scrollToSection('home')}
55+
className={`text-lg font-bold tracking-tight transition-colors ${
56+
scrolled
57+
? 'text-surface-900 dark:text-white hover:text-primary-700 dark:hover:text-primary-400'
58+
: 'text-white hover:text-primary-300'
59+
}`}
60+
>
61+
David Agustin
62+
</button>
63+
</div>
6164

62-
<div className="hidden md:flex items-center gap-8">
65+
{/* Center: Nav links */}
66+
<div className="hidden md:flex items-center">
6367
<ul className="flex items-center gap-8">
6468
{navItems.map((item) => (
6569
<li key={item.id}>
@@ -80,22 +84,10 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
8084
</li>
8185
))}
8286
</ul>
83-
84-
<button
85-
type="button"
86-
onClick={toggleTheme}
87-
aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
88-
className={`p-2 rounded-lg transition-colors duration-200 ${
89-
scrolled
90-
? 'text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800'
91-
: 'text-surface-300 hover:text-white hover:bg-white/10'
92-
}`}
93-
>
94-
{theme === 'dark' ? <FaSun size={16} /> : <FaMoon size={16} />}
95-
</button>
9687
</div>
9788

98-
<div className="md:hidden flex items-center gap-2">
89+
{/* Right: Theme toggle + Mobile menu */}
90+
<div className="flex-1 flex items-center justify-end gap-2">
9991
<button
10092
type="button"
10193
onClick={toggleTheme}
@@ -109,35 +101,38 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
109101
{theme === 'dark' ? <FaSun size={16} /> : <FaMoon size={16} />}
110102
</button>
111103

112-
<button
113-
type="button"
114-
className="flex flex-col gap-1.5 p-2"
115-
onClick={() => setIsOpen(!isOpen)}
116-
aria-label="Toggle menu"
117-
aria-expanded={isOpen}
118-
>
119-
<span
120-
className={`w-5 h-px transition-all duration-300 ${
121-
scrolled
122-
? 'bg-surface-800 dark:bg-white'
123-
: 'bg-white'
124-
} ${isOpen ? 'rotate-45 translate-y-[3.5px]' : ''}`}
125-
/>
126-
<span
127-
className={`w-5 h-px transition-all duration-300 ${
128-
scrolled
129-
? 'bg-surface-800 dark:bg-white'
130-
: 'bg-white'
131-
} ${isOpen ? 'opacity-0' : ''}`}
132-
/>
133-
<span
134-
className={`w-5 h-px transition-all duration-300 ${
135-
scrolled
136-
? 'bg-surface-800 dark:bg-white'
137-
: 'bg-white'
138-
} ${isOpen ? '-rotate-45 -translate-y-[3.5px]' : ''}`}
139-
/>
140-
</button>
104+
{/* Mobile hamburger - only on small screens */}
105+
<div className="md:hidden">
106+
<button
107+
type="button"
108+
className="flex flex-col gap-1.5 p-2"
109+
onClick={() => setIsOpen(!isOpen)}
110+
aria-label="Toggle menu"
111+
aria-expanded={isOpen}
112+
>
113+
<span
114+
className={`w-5 h-px transition-all duration-300 ${
115+
scrolled
116+
? 'bg-surface-800 dark:bg-white'
117+
: 'bg-white'
118+
} ${isOpen ? 'rotate-45 translate-y-[3.5px]' : ''}`}
119+
/>
120+
<span
121+
className={`w-5 h-px transition-all duration-300 ${
122+
scrolled
123+
? 'bg-surface-800 dark:bg-white'
124+
: 'bg-white'
125+
} ${isOpen ? 'opacity-0' : ''}`}
126+
/>
127+
<span
128+
className={`w-5 h-px transition-all duration-300 ${
129+
scrolled
130+
? 'bg-surface-800 dark:bg-white'
131+
: 'bg-white'
132+
} ${isOpen ? '-rotate-45 -translate-y-[3.5px]' : ''}`}
133+
/>
134+
</button>
135+
</div>
141136
</div>
142137
</div>
143138

0 commit comments

Comments
 (0)