David Agustin - Portfolio Website

A modern, responsive portfolio website showcasing 19+ diverse projects and 50+ technologies across full-stack development, AI/ML, and modern web applications. Built with React, TypeScript, and Tailwind CSS featuring smooth animations and clean design.

🚀 Features

• Modern Design: Clean, professional design with smooth animations
• Responsive: Fully responsive across all devices
• TypeScript: Type-safe development with TypeScript
• Tailwind CSS: Utility-first CSS framework for styling
• Framer Motion: Smooth animations and transitions
• GitHub Pages: Deployed on GitHub Pages
• Performance Optimized: Fast loading and optimized for performance
• Reliable Contact Form: EmailJS integration for cross-browser email functionality
• Diverse Tech Stack: Showcases projects built with React, Angular, Vue.js, SvelteKit, Astro.js, and AI/ML technologies
• AI/ML Focus: Specialized in machine learning applications and AI integration

🛠️ Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Animations: Framer Motion
• Icons: React Icons
• Email Service: EmailJS (reliable contact form functionality)
• Build Tool: Create React App
• Linting: Biome
• Deployment: GitHub Pages

🎯 Featured Projects

This portfolio showcases 19+ diverse projects built with modern web technologies and AI/ML frameworks:

⚡ TechStore - Computer Hardware Store - E-commerce Platform

• Tech Stack: SvelteKit 2.0, TypeScript, Tailwind CSS, Lucide Svelte, Azure Static Web Apps
• Features: 8 product categories, advanced shopping cart, search & filter system, mobile-first design
• Live Demo: https://ashy-sky-078d0441e.2.azurestaticapps.net
• GitHub: https://github.com/davidagustin/azure-static-practice

🤖 20 Newsgroups ML Analysis Dashboard - Machine Learning Dashboard

• Tech Stack: Next.js, React, TypeScript, Material-UI, Python, Scikit-learn, XGBoost, LightGBM, Vercel
• Features: 10+ ML algorithms, interactive visualizations, hyperparameter tuning, real-time model comparison
• Live Demo: https://machine-learning-project-theta.vercel.app
• GitHub: https://github.com/davidagustin/machine-learning-project

📚 Rules of Machine Learning - Memorization App - ML Education Platform

• Tech Stack: Next.js 15, TypeScript, Tailwind CSS, Vercel
• Features: 43 ML Engineering Rules, three study modes (Browse, Study, Flashcard), category filtering, progress tracking
• Live Demo: https://rules-of-machine-learning.vercel.app/
• GitHub: https://github.com/davidagustin/rules-of-machine-learning

🧠 MLI Learning Quiz App - AI Education Platform

• Tech Stack: Next.js, React, TypeScript, Tailwind CSS, Vercel
• Features: 5 quiz categories, smart mnemonics, progress analytics, interactive learning
• Live Demo: https://ai-quiz-questions.vercel.app
• GitHub: https://github.com/davidagustin/ai-quiz-questions

❤️ Hope Foundation - Charity Website

• Tech Stack: Gatsby, React, Digital Ocean, SEO Optimized, Responsive Design
• Features: Donation system, volunteer portal, event management, program showcase
• Live Demo: https://sample-gatsby-6fe3p.ondigitalocean.app
• GitHub: https://github.com/hope-foundation/charity-website

🔍 Historigal - Historical Events Search Engine

• Tech Stack: Next.js, TypeScript, Tailwind CSS, React Hooks, Vercel
• Features: 37,860+ historical events, advanced search, citation parsing, Google-like autocomplete
• Live Demo: https://historigal-vercel.vercel.app
• GitHub: https://github.com/davidagustin/historigal-vercel

🧠 AI Learning Hub - Interactive AI Education Platform

• Tech Stack: Next.js, TypeScript, Tailwind CSS, React Hooks, Vercel
• Features: 30+ learning sections, 1000+ quiz questions, character-based learning, interactive mnemonics
• Live Demo: https://comprehensive-ai-learning-app.vercel.app
• GitHub: https://github.com/davidagustin/comprehensive-ai-learning-app

🛒 A Very Nice Grocery List - Modern Shopping App

• Tech Stack: Next.js, React, TypeScript, CSS3, Vercel
• Features: Add/remove items, duplicate prevention, auto-scroll, dark theme
• Live Demo: https://a-very-nice-grocery-list-vercel.vercel.app
• GitHub: https://github.com/davidagustin/a-very-nice-grocery-list-vercel

🏠 Luxury Realty - Angular Real Estate Application

• Tech Stack: Angular, TypeScript, CSS3, Surge.sh, Google Fonts
• Features: Property listings, advanced search, interactive galleries, responsive design
• Live Demo: https://my-surge-practice-site.surge.sh
• GitHub: https://github.com/davidagustin/surge-practice

🪑 Elegant Furniture Store - Vue.js E-commerce

• Tech Stack: Vue.js, Vite, Tailwind CSS, Pinia, Vue Router, Render
• Features: Product catalog, shopping cart, responsive design, state management
• Live Demo: https://render-practice-or72.onrender.com
• GitHub: https://github.com/davidagustin/render-practice

⚖️ Law & Associates - Professional Law Firm Website

• Tech Stack: Astro.js, Tailwind CSS, TypeScript, Netlify
• Features: Professional design, practice areas, team profiles, contact forms
• Live Demo: https://netlify-practice-one.netlify.app
• GitHub: https://github.com/davidagustin/netlify-practice

🍽️ FoodRater - Restaurant Rating App - Food & Rating Platform

• Tech Stack: Angular 17, Firebase, TypeScript, Tailwind CSS, Material Design, RxJS
• Features: Restaurant discovery, 5-star rating system, user authentication, real-time data
• Live Demo: https://firebase-practice--fir-practice-54eb3.us-central1.hosted.app/
• GitHub: https://github.com/davidagustin/firebase-practice

🧩 Sudoku Game - Interactive Puzzle Game

• Tech Stack: React 18, Express.js, Node.js, Webpack 5, Heroku, CSS3
• Features: Three difficulty levels, real-time validation, interactive gameplay, modern UI/UX
• Live Demo: https://heroku-sudoku-49243446e4d3.herokuapp.com/
• GitHub: https://github.com/davidagustin/heroku-practice

🤟 Sign Language Learning App - AI-Powered ASL Education

• Tech Stack: Next.js 15.4.5, React 19, TypeScript, Tailwind CSS, MediaPipe Hands, Vercel
• Features: Real-time hand tracking, AI-powered gesture recognition, personalized learning, ASL alphabet guide
• Live Demo: https://spell-your-name.vercel.app/
• GitHub: https://github.com/davidagustin/spell-your-name

🧠 System Design Learning Application - Comprehensive Learning Platform

• Tech Stack: Next.js 15, React 19, TypeScript, Tailwind CSS, Vercel
• Features: 50 study materials, 40 core concepts, 60 quiz questions, dark mode support, advanced progress tracking
• Live Demo: https://system-design-practice.vercel.app/
• GitHub: https://github.com/davidagustin/system-design-practice

🎨 UI Patterns React - Component Library

• Tech Stack: Next.js 15, React 19, TypeScript 5.6, Tailwind CSS 3.4, Vercel
• Features: 90+ UI patterns, 100% TypeScript coverage, WCAG 2.1 AA compliant, dark mode support
• Live Demo: https://ui-patterns-react.vercel.app/
• GitHub: https://github.com/davidagustin/ui-patterns-react

⚡ React Interview Code Sandbox - Development Tool

• Tech Stack: React 18, TypeScript, BEM CSS, Tailwind CSS, Prism.js, Jest
• Features: Built-in interview timer, live code preview, resizable panels, professional syntax highlighting
• GitHub: https://github.com/davidagustin/react-interview-sandbox

📁 Project Structure

src/
├── components/          # React components
│   ├── About.tsx       # About section with 50+ tech chips
│   ├── Contact.tsx     # Contact form
│   ├── Footer.tsx      # Footer component
│   ├── Hero.tsx        # Hero section with stats
│   ├── Navbar.tsx      # Navigation bar
│   └── Projects.tsx    # Projects showcase (19+ projects)
├── hooks/              # Custom React hooks
├── types/              # TypeScript type definitions
├── utils/              # Utility functions
│   ├── constants.ts    # App constants and project data
│   └── scroll.ts       # Scroll utilities
├── App.tsx             # Main app component
├── index.tsx           # App entry point
└── index.css           # Global styles

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/davidagustin/davidagustin.github.io.git
cd davidagustin.github.io

2. Install dependencies:

npm install

3. Start the development server:

npm start

4. Open http://localhost:3000 to view it in the browser.

📝 Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Launches the test runner
• npm run lint - Runs Biome linter
• npm run format - Formats code with Biome
• npm run check - Runs Biome check (lint + format)
• npm run deploy - Deploys to GitHub Pages

🎨 Customization

Colors

The project uses a custom color palette defined in tailwind.config.js:

• Primary: Blue gradient (#0284c7 to #c026d3)
• Secondary: Purple gradient

Components

Each section is a separate component in the src/components/ directory:

• Update content in the respective component files
• Modify styling using Tailwind CSS classes
• Add new sections by creating new components

Constants

App-wide constants are defined in src/utils/constants.ts:

• Navigation items
• Social links
• Project data (19+ projects)
• Contact information

🚀 Deployment

The project is configured for GitHub Pages deployment:

1. Build the project:

npm run build

2. Deploy to GitHub Pages:

npm run deploy

The site will be available at: https://davidagustin.github.io

📱 Responsive Design

The website is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🔧 Development

Code Quality

• Biome: Used for linting and formatting
• TypeScript: Type safety and better development experience
• ESLint: Additional linting rules

File Organization

• Components are organized by feature
• Utility functions are separated into dedicated files
• Types are centralized in the types/ directory
• Constants are managed in utils/constants.ts

🛠️ Technologies & Frameworks

This portfolio demonstrates expertise across 50+ modern web technologies:

Frontend Frameworks & Libraries

• Next.js - React framework for production
• React.js - Modern applications with hooks and patterns
• Angular - Full-featured applications with TypeScript
• Vue.js - Progressive framework with Composition API
• Astro.js - Static site generation for performance
• Gatsby - React-based static site generator

Email & Communication

• EmailJS - Frontend email service for contact forms

Languages & Type Safety

• TypeScript - Type-safe JavaScript development
• JavaScript - Modern ES6+ features
• HTML5 - Semantic markup
• CSS3 - Modern styling with Flexbox and Grid
• Python - Backend development and AI/ML

Styling & UI

• Tailwind CSS - Utility-first CSS framework
• Material-UI - React component library
• Material Design - Design system and components
• Sass - CSS preprocessor
• Google Fonts - Typography

Backend & APIs

• Node.js - JavaScript runtime
• Express.js - Web application framework
• Firebase - Backend-as-a-Service platform
• Firestore - NoSQL cloud database
• REST APIs - API development
• React Hooks - Modern React state management

State Management & Routing

• Pinia - Vue.js state management
• Vue Router - Vue.js routing solution
• RxJS - Reactive programming library

Build Tools & Development

• Vite - Next-generation frontend tooling
• Webpack - Module bundler

AI/ML & Data Science

• Scikit-learn - Machine learning library
• XGBoost - Gradient boosting framework
• LightGBM - Light gradient boosting machine
• Machine Learning - Algorithm development
• Deep Learning - Neural networks
• TensorFlow - Deep learning framework
• PyTorch - Machine learning framework
• OpenAI API - AI integration

Databases

• MongoDB - NoSQL database
• PostgreSQL - Relational database
• MySQL - Database management

Cloud & Deployment

• Vercel - React/Next.js deployment platform
• Netlify - Static site hosting and deployment
• Surge.sh - Simple static site deployment
• Render - Cloud application hosting
• Heroku - Cloud application platform
• Digital Ocean - Cloud infrastructure
• AWS - Cloud computing platform
• Firebase Hosting - Static site hosting and deployment

DevOps & Tools

• Docker - Containerization
• Kubernetes - Container orchestration
• Git - Version control
• GitHub - Code hosting and collaboration
• CI/CD - Continuous integration/deployment

Testing & Quality

• Jest - JavaScript testing framework
• Cypress - End-to-end testing
• Storybook - Component development environment

Additional Skills

• SEO Optimized - Search engine optimization
• Responsive Design - Mobile-first development
• Performance - Optimization and monitoring

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

📞 Contact

• Email: davidsyagustin@gmail.com
• LinkedIn: David Agustin
• GitHub: davidagustin
• Portfolio: https://davidagustin.github.io (with working contact form)

---

Full Stack Developer & AI Enthusiast - Built with ❤️ by David Agustin