Skip to content

Commit 1e3c2d8

Browse files
davidagustinclaude
davidagustin
and
claude
committed
feat: complete portfolio redesign with professional UI/UX
- Redesign all components with typography-first, no-emoji aesthetic - Dark hero section, clean white cards, restrained color palette - Add Donation component (Stripe, BTC, ETH with click-to-copy) - Add PIIxelate project (7-layer PII detection) - Remove icon field from projects, remove ~30 unused icon imports - Rewrite README with organized project tables and architecture docs - Update Tailwind config with primary/surface color scales - Bundle size reduced by ~9KB from unused import cleanup Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 039fa47 commit 1e3c2d8

File tree

13 files changed

+840
-1475
lines changed

13 files changed

+840
-1475
lines changed

‎README.md‎

Lines changed: 129 additions & 331 deletions
Large diffs are not rendered by default.

‎src/App.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type React from 'react';
33
import { useEffect, useState } from 'react';
44
import About from './components/About';
55
import Contact from './components/Contact';
6+
import Donation from './components/Donation';
67
import Footer from './components/Footer';
78
import Hero from './components/Hero';
89
import Navbar from './components/Navbar';
@@ -12,25 +13,23 @@ const App: React.FC = () => {
1213
const [isLoading, setIsLoading] = useState<boolean>(true);
1314

1415
useEffect(() => {
15-
// Simulate loading time
1616
const timer = setTimeout(() => {
1717
setIsLoading(false);
18-
}, 1000);
19-
18+
}, 800);
2019
return () => clearTimeout(timer);
2120
}, []);
2221

2322
if (isLoading) {
2423
return (
2524
<div className="loading-screen">
2625
<motion.div
27-
initial={{ opacity: 0, scale: 0.5 }}
28-
animate={{ opacity: 1, scale: 1 }}
29-
transition={{ duration: 0.5 }}
26+
initial={{ opacity: 0 }}
27+
animate={{ opacity: 1 }}
28+
transition={{ duration: 0.4 }}
3029
className="loading-content"
3130
>
3231
<h2>David Agustin</h2>
33-
<p>Loading Portfolio...</p>
32+
<p>Portfolio</p>
3433
</motion.div>
3534
</div>
3635
);
@@ -43,6 +42,7 @@ const App: React.FC = () => {
4342
<Hero />
4443
<About />
4544
<Projects />
45+
<Donation />
4646
<Contact />
4747
</main>
4848
<Footer />

‎src/components/About.tsx‎

Lines changed: 69 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -2,164 +2,90 @@ import { motion } from 'framer-motion';
22
import type React from 'react';
33

44
const About: React.FC = () => {
5-
const technologies = [
6-
// Frontend Frameworks & Libraries
7-
{ name: 'Next.js', color: 'bg-black text-white' },
8-
{ name: 'React', color: 'bg-blue-600 text-white' },
9-
{ name: 'Angular', color: 'bg-red-600 text-white' },
10-
{ name: 'Vue.js', color: 'bg-green-600 text-white' },
11-
{ name: 'Astro.js', color: 'bg-purple-600 text-white' },
12-
{ name: 'Gatsby', color: 'bg-purple-100 text-purple-700' },
13-
{ name: 'Hugo', color: 'bg-pink-100 text-pink-700' },
14-
15-
// Languages & Type Safety
16-
{ name: 'TypeScript', color: 'bg-blue-600 text-white' },
17-
{ name: 'JavaScript', color: 'bg-yellow-100 text-yellow-800' },
18-
{ name: 'HTML5', color: 'bg-orange-100 text-orange-700' },
19-
{ name: 'CSS3', color: 'bg-blue-100 text-blue-700' },
20-
{ name: 'Python', color: 'bg-blue-100 text-blue-700' },
21-
22-
// Styling & UI
23-
{ name: 'Tailwind CSS', color: 'bg-cyan-100 text-cyan-700' },
24-
{ name: 'Material-UI', color: 'bg-blue-600 text-white' },
25-
{ name: 'Material Design', color: 'bg-blue-100 text-blue-700' },
26-
{ name: 'Lucide React', color: 'bg-gray-100 text-gray-700' },
27-
{ name: 'Sass', color: 'bg-pink-100 text-pink-700' },
28-
{ name: 'Google Fonts', color: 'bg-gray-100 text-gray-700' },
29-
30-
// Backend & APIs
31-
{ name: 'Node.js', color: 'bg-green-100 text-green-700' },
32-
{ name: 'Express.js', color: 'bg-gray-100 text-gray-700' },
33-
{ name: 'Firebase', color: 'bg-yellow-100 text-yellow-800' },
34-
{ name: 'Firestore', color: 'bg-orange-100 text-orange-700' },
35-
{ name: 'REST APIs', color: 'bg-gray-100 text-gray-700' },
36-
{ name: 'React Hooks', color: 'bg-blue-100 text-blue-700' },
37-
38-
// State Management & Routing
39-
{ name: 'Pinia', color: 'bg-yellow-100 text-yellow-800' },
40-
{ name: 'Vue Router', color: 'bg-green-100 text-green-700' },
41-
{ name: 'RxJS', color: 'bg-pink-100 text-pink-700' },
42-
43-
// Build Tools & Development
44-
{ name: 'Vite', color: 'bg-purple-100 text-purple-700' },
45-
{ name: 'Webpack', color: 'bg-blue-100 text-blue-700' },
46-
47-
// AI/ML & Data Science
48-
{ name: 'Scikit-learn', color: 'bg-orange-100 text-orange-700' },
49-
{ name: 'XGBoost', color: 'bg-green-100 text-green-700' },
50-
{ name: 'LightGBM', color: 'bg-blue-100 text-blue-700' },
51-
{ name: 'Machine Learning', color: 'bg-purple-100 text-purple-700' },
52-
{ name: 'Deep Learning', color: 'bg-indigo-100 text-indigo-700' },
53-
{ name: 'TensorFlow', color: 'bg-orange-100 text-orange-700' },
54-
{ name: 'PyTorch', color: 'bg-red-100 text-red-700' },
55-
{ name: 'OpenAI API', color: 'bg-green-100 text-green-700' },
56-
57-
// Databases
58-
{ name: 'MongoDB', color: 'bg-green-100 text-green-700' },
59-
{ name: 'PostgreSQL', color: 'bg-blue-100 text-blue-700' },
60-
{ name: 'MySQL', color: 'bg-blue-600 text-white' },
61-
62-
// Cloud & Deployment
63-
{ name: 'Vercel', color: 'bg-black text-white' },
64-
{ name: 'Netlify', color: 'bg-green-100 text-green-700' },
65-
{ name: 'Surge.sh', color: 'bg-purple-100 text-purple-700' },
66-
{ name: 'Render', color: 'bg-blue-100 text-blue-700' },
67-
{ name: 'Heroku', color: 'bg-purple-600 text-white' },
68-
{ name: 'Digital Ocean', color: 'bg-blue-600 text-white' },
69-
{ name: 'AWS', color: 'bg-orange-100 text-orange-700' },
70-
{ name: 'AWS Amplify', color: 'bg-orange-100 text-orange-700' },
71-
{ name: 'GitLab Pages', color: 'bg-orange-100 text-orange-700' },
72-
73-
// DevOps & Tools
74-
{ name: 'Docker', color: 'bg-blue-100 text-blue-700' },
75-
{ name: 'Kubernetes', color: 'bg-blue-600 text-white' },
76-
{ name: 'Git', color: 'bg-orange-100 text-orange-700' },
77-
{ name: 'GitHub', color: 'bg-gray-800 text-white' },
78-
{ name: 'CI/CD', color: 'bg-purple-100 text-purple-700' },
79-
80-
// Testing & Quality
81-
{ name: 'Jest', color: 'bg-red-100 text-red-700' },
82-
{ name: 'Cypress', color: 'bg-green-100 text-green-700' },
83-
{ name: 'Storybook', color: 'bg-pink-100 text-pink-700' },
84-
85-
// Additional Skills
86-
{ name: 'SEO Optimized', color: 'bg-green-100 text-green-700' },
87-
{ name: 'Responsive Design', color: 'bg-cyan-100 text-cyan-700' },
88-
{ name: 'Performance', color: 'bg-orange-100 text-orange-700' },
5+
const skills = [
6+
{
7+
title: 'Frontend',
8+
items: ['React', 'Next.js', 'Angular', 'Vue.js', 'SvelteKit', 'TypeScript', 'Tailwind CSS'],
9+
},
10+
{
11+
title: 'Backend',
12+
items: ['Node.js', 'Express', 'Python', 'Firebase', 'REST APIs', 'MongoDB', 'PostgreSQL'],
13+
},
14+
{
15+
title: 'AI/ML',
16+
items: ['Scikit-learn', 'TensorFlow', 'PyTorch', 'OpenAI', 'MediaPipe', 'XGBoost', 'WebLLM'],
17+
},
18+
{
19+
title: 'Infrastructure',
20+
items: ['AWS', 'Azure', 'Vercel', 'Docker', 'Kubernetes', 'CI/CD', 'Git'],
21+
},
8922
];
9023

9124
return (
92-
<section id="about" className="py-20 bg-gray-50">
25+
<section id="about" className="py-24 bg-white">
9326
<div className="container">
9427
<motion.div
95-
initial={{ opacity: 0, y: 50 }}
28+
initial={{ opacity: 0, y: 30 }}
9629
whileInView={{ opacity: 1, y: 0 }}
97-
transition={{ duration: 0.6 }}
30+
transition={{ duration: 0.5 }}
9831
viewport={{ once: true }}
9932
>
100-
<h2 className="section-title">About Me</h2>
101-
<div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
102-
<div>
103-
<h3 className="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6">
104-
Full Stack Developer
105-
</h3>
106-
<p className="text-base sm:text-lg text-gray-600 mb-4 sm:mb-6">
107-
I'm a passionate full-stack developer with expertise in modern
108-
web technologies, artificial intelligence, and machine learning.
109-
I love creating innovative solutions that solve real-world
110-
problems and deliver exceptional user experiences.
33+
<h2 className="section-title">About</h2>
34+
<p className="section-subtitle">
35+
Full stack developer with expertise in modern web technologies and AI/ML.
36+
</p>
37+
38+
<div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
39+
<div className="lg:col-span-2">
40+
<p className="text-surface-600 leading-relaxed mb-6">
41+
I build modern web applications using React, Next.js, Node.js, Python,
42+
and AI/ML frameworks. With 20+ deployed projects spanning e-commerce
43+
platforms, educational tools, ML dashboards, and interactive games,
44+
I focus on creating clean, performant, and accessible experiences.
11145
</p>
112-
<p className="text-base sm:text-lg text-gray-600 mb-6 sm:mb-8">
113-
With experience across 15+ diverse projects and 50+ technologies including React, Next.js, Node.js, Python, Hugo, and various AI/ML frameworks, I bring ideas to life through clean, efficient, and scalable code. I'm constantly learning and exploring new technologies to stay at the forefront of web development and AI innovation.
46+
<p className="text-surface-600 leading-relaxed mb-8">
47+
My work covers the full stack -- from SvelteKit storefronts on Azure
48+
to machine learning pipelines with Scikit-learn, from real-time Firebase
49+
apps to Hugo sites with multi-language support. I'm constantly exploring
50+
new technologies and building tools that help people learn.
11451
</p>
115-
116-
{/* Technology Chips */}
117-
<div className="mb-6">
118-
<h4 className="text-base sm:text-lg font-semibold text-gray-800 mb-3 sm:mb-4">Technologies & Skills</h4>
119-
<div className="flex flex-wrap gap-1.5 sm:gap-2">
120-
{technologies.map((tech, index) => (
121-
<motion.span
122-
key={tech.name}
123-
className={`px-2 sm:px-3 py-1 sm:py-1.5 ${tech.color} rounded-full text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 cursor-default`}
124-
initial={{ opacity: 0, scale: 0.8 }}
125-
whileInView={{ opacity: 1, scale: 1 }}
126-
transition={{ duration: 0.3, delay: index * 0.02 }}
127-
viewport={{ once: true }}
128-
whileHover={{ scale: 1.05, y: -2 }}
129-
>
130-
{tech.name}
131-
</motion.span>
132-
))}
133-
</div>
134-
</div>
135-
136-
{/* Key Strengths */}
137-
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
138-
<div className="bg-white p-3 sm:p-4 rounded-lg shadow-sm border border-gray-200">
139-
<h5 className="font-semibold text-gray-800 mb-2 text-sm sm:text-base">🚀 Frontend Excellence</h5>
140-
<p className="text-xs sm:text-sm text-gray-600">Modern React apps with Next.js, TypeScript, and responsive design</p>
141-
</div>
142-
<div className="bg-white p-3 sm:p-4 rounded-lg shadow-sm border border-gray-200">
143-
<h5 className="font-semibold text-gray-800 mb-2 text-sm sm:text-base">⚡ Backend Development</h5>
144-
<p className="text-xs sm:text-sm text-gray-600">Scalable APIs with Node.js, Python, and robust database design</p>
52+
53+
<div className="flex gap-12">
54+
<div>
55+
<div className="text-3xl font-bold text-surface-900">22</div>
56+
<div className="text-sm text-surface-500 mt-1">Projects</div>
14557
</div>
146-
<div className="bg-white p-3 sm:p-4 rounded-lg shadow-sm border border-gray-200">
147-
<h5 className="font-semibold text-gray-800 mb-2 text-sm sm:text-base">🤖 AI Integration</h5>
148-
<p className="text-xs sm:text-sm text-gray-600">Machine learning models, AI APIs, and intelligent automation</p>
58+
<div>
59+
<div className="text-3xl font-bold text-surface-900">50+</div>
60+
<div className="text-sm text-surface-500 mt-1">Technologies</div>
14961
</div>
150-
<div className="bg-white p-3 sm:p-4 rounded-lg shadow-sm border border-gray-200">
151-
<h5 className="font-semibold text-gray-800 mb-2 text-sm sm:text-base">☁️ Cloud & DevOps</h5>
152-
<p className="text-xs sm:text-sm text-gray-600">AWS deployment, Docker containers, and CI/CD pipelines</p>
62+
<div>
63+
<div className="text-3xl font-bold text-surface-900">8</div>
64+
<div className="text-sm text-surface-500 mt-1">Platforms</div>
15365
</div>
15466
</div>
15567
</div>
156-
157-
<div className="relative">
158-
<div className="w-full h-64 sm:h-80 lg:h-96 bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl shadow-2xl">
159-
{/* Placeholder for profile image or illustration */}
160-
<div className="flex items-center justify-center h-full text-white text-4xl sm:text-5xl lg:text-6xl">
161-
👨‍💻
162-
</div>
68+
69+
<div className="lg:col-span-3">
70+
<div className="grid sm:grid-cols-2 gap-8">
71+
{skills.map((group) => (
72+
<div key={group.title}>
73+
<h4 className="text-sm font-semibold text-surface-900 uppercase tracking-wider mb-4">
74+
{group.title}
75+
</h4>
76+
<ul className="space-y-2.5">
77+
{group.items.map((item) => (
78+
<li
79+
key={item}
80+
className="text-sm text-surface-600 flex items-center gap-2"
81+
>
82+
<span className="w-1 h-1 rounded-full bg-primary-500 flex-shrink-0" />
83+
{item}
84+
</li>
85+
))}
86+
</ul>
87+
</div>
88+
))}
16389
</div>
16490
</div>
16591
</div>

0 commit comments

Comments
 (0)