David Agustin — Portfolio

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

Live: davidagustin.github.io

---

Tech Stack

Layer	Technologies
Framework	React 18, TypeScript
Styling	Tailwind CSS 3, Inter font, Dark Mode
Animation	Framer Motion, Parallax Scroll Effects, Auto-scroll Featured Strip
Email	EmailJS
Build	Create React App
Deploy	GitHub Pages

Featured Projects

Project	Stack	Description
Coding Drills	Next.js 16, React 19, Monaco Editor, WebLLM	Interactive learning platform — thousands of problems across 25 languages
Sign Language Learning	Next.js 15, MediaPipe, React 19	ASL learning with real-time hand tracking
Backend Engineer Detective	Cloudflare Workers, TypeScript	121 investigation cases with AI mentor guidance
Coding Tricks Practice	Next.js, TypeScript, Monaco Editor	155+ LeetCode-style challenges across 19 categories
UI Patterns React	Next.js 15, React 19, TypeScript 5.6	90+ production-ready components, WCAG 2.1 AA
System Design Practice	Next.js 15, React 19, TypeScript	50 study topics, 40 concepts, 60 quizzes
TypeCode	React 19, TypeScript, Cloudflare Workers	Precision typing practice across 12 programming languages
Game Room	Expo, Fastify, Socket.IO, PostgreSQL, Redis, AWS	Real-time multiplayer Chess and Tic-Tac-Toe with AI opponents
React 30	Next.js 16, React 19, TypeScript	30 vanilla JS projects rebuilt as modern React

View all 27 projects on the live site.

All Projects

Education & Learning

Project	Technologies	Links
Coding Drills	Next.js 16, React 19, TypeScript 5, Monaco Editor, WebLLM	Live · GitHub
AI Learning Hub	Next.js 15, TypeScript, Tailwind CSS	Live · GitHub
System Design Practice	Next.js 15, React 19, TypeScript	Live · GitHub
MLI Learning Quiz	Next.js 15, React 19, TypeScript	Live · GitHub
Rules of ML	Next.js 15, TypeScript	Live · GitHub
Sign Language Learning	Next.js 15, MediaPipe, React 19	Live · GitHub
Coding Tricks Practice	Next.js, TypeScript, Monaco Editor	Live · GitHub
TypeCode	React 19, TypeScript 5.9, Cloudflare Workers	Live · GitHub
React 30	React 19, TypeScript, Framer Motion	Live · GitHub

AI/ML

Project	Technologies	Links
PIIxelate	Next.js 15, Tesseract.js, OpenAI, Anthropic	Live · GitHub
20 Newsgroups ML Dashboard	Next.js 15, Scikit-learn, XGBoost, LightGBM	Live · GitHub

E-commerce & Business

Project	Technologies	Links
TechStore	SvelteKit 2.0, TypeScript, Azure	Live · GitHub
Premium Auto Sales	Hugo, GitLab Pages, Multi-language	Live · GitLab
Elegant Furniture Store	Vue.js 3, Pinia, Tailwind CSS	Live · GitHub
Luxury Realty	Angular 17, TypeScript	Live · GitHub

Applications

Project	Technologies	Links
StreamFlix	Next.js 15, React 19, AWS Amplify	Live · GitHub
FoodRater	Angular 17, Firebase, RxJS	Live · GitHub
Historigal	Next.js 15, TypeScript 5	Live · GitHub
Hope Foundation	Gatsby, React, Digital Ocean	Live · GitHub
Law & Associates	Astro.js, Tailwind CSS, Netlify	Live · GitHub
A Very Nice Grocery List	Next.js 15, React 19	Live · GitHub

Developer Tools & Games

Project	Technologies	Links
UI Patterns React	Next.js 15, React 19, TypeScript 5.6	Live · GitHub
Backend Engineer Detective	Node.js, Cloudflare Workers	Live · GitHub
React Interview Sandbox	React 18, TypeScript, Prism.js	GitHub
Sudoku Game	React 18, Express.js, Heroku	Live · GitHub
Game Room	Expo 52, Fastify 5, Socket.IO, PostgreSQL, Redis, Docker, Terraform	Live · GitHub
Classic Snake Game	React 19, TypeScript, Framer Motion	Live · GitHub

Cloud Platforms

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

Local Development

git clone https://github.com/davidagustin/davidagustin.github.io.git
cd davidagustin.github.io
npm install
npm start

Open http://localhost:3000.

Scripts

Command	Description
npm start	Development server
npm run build	Production build
npm run deploy	Deploy to GitHub Pages
npm run lint	Run Biome linter
npm run format	Format with Biome

Architecture

src/
├── components/
│   ├── Navbar.tsx        # Fixed navigation with scroll detection
│   ├── Hero.tsx          # Dark-themed landing section with parallax
│   ├── About.tsx         # Skills organized by domain
│   ├── Projects.tsx      # Multi-view projects (Grid, Carousel, Table) with README highlights
│   ├── Contact.tsx       # EmailJS contact form
│   ├── Footer.tsx        # Site footer
│   └── Snackbar.tsx      # Toast notifications
├── hooks/
│   └── useScrollProgress.tsx  # Scroll progress bar logic
├── types/
│   └── index.ts          # TypeScript interfaces
├── utils/
│   ├── constants.ts      # Project data (27 projects), social links, README highlights
│   └── scroll.ts         # Smooth scroll utility
├── App.tsx               # Root component with theme toggle
├── index.tsx             # Entry point
└── index.css             # Tailwind config and custom styles

Design Principles

• Typography-first — Content hierarchy through font weight, size, and spacing
• Restrained palette — Dark hero, white/slate alternating sections
• Minimal decoration — No emoji icons or gradient backgrounds on cards
• Accessible — Semantic HTML, proper contrast, keyboard navigation, skip-to-content link, prefers-reduced-motion support
• Responsive — Mobile-first with sm/md/lg breakpoints
• Apple-style parallax — Smooth scroll effects using Framer Motion useScroll/useTransform
• Dark/Light mode — Theme toggle with localStorage persistence
• Enriched project modals — README highlights, tech details, and key features from each repo
• Multi-view projects — Grid (2/3/4 columns), Carousel (1/2/3 columns, single-card navigation), and expanded Table view with large thumbnails
• Auto-scrolling featured strip — Featured projects auto-advance with pause-on-hover and play/stop toggle
• Centered responsive navbar — Three-column layout: brand left, nav centered, theme toggle right

Support

If you find my projects helpful:

• Donate via Stripe
• BTC: bc1qkq0g79l2c7s33h28qlevt7jffxajcd3
• ETH: 0x846a4460455f9db3c0b3cd1e0e7d1070288e88f2

License

MIT

Contact

• Email: davidsyagustin@gmail.com
• LinkedIn: davidsyagustin
• GitHub: davidagustin
• Portfolio: davidagustin.github.io