Steven Coaila Zaa | Portfolio

Full Stack Developer

A modern, interactive portfolio featuring 3D graphics, smooth animations, and a responsive design built with cutting-edge web technologies.

View Demo · Report Bug · Request Feature

✨ Features

Feature	Description
🎮 3D Interactive Hero	WebGL particle system with 150+ animated spheres and mouse interaction
⚡ Smooth Animations	GSAP-powered animations with ScrollTrigger integration
📱 Fully Responsive	Mobile-first design with touch interactions
🎯 Apple-Style Scroll	Magnetic scroll zones for project presentation
♿ Accessible	WCAG 2.1 AA compliant with reduced motion support
🔍 SEO Optimized	JSON-LD structured data, meta tags, and Open Graph
⚡ Blazing Fast	~115kb gzipped initial load with lazy loading

🛠️ Tech Stack

Core

3D & Animation

UI & Performance

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/StevenACZ/portfolio.git

# Navigate to project directory
cd portfolio

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:3000

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Create production build
npm run preview	Preview production build
npm run lint	Run ESLint checks

📁 Project Structure

src/
├── 📂 components/          # React components
│   ├── 📂 icons/           # SVG tech icons (21 icons)
│   ├── HeroSection.jsx     # 3D hero with particle system
│   ├── Navbar.jsx          # Desktop navigation
│   ├── MobileNav.jsx       # Mobile hamburger menu
│   ├── SkillsSection.jsx   # Tech stack with filters
│   ├── ProjectsSection.jsx # Project showcase
│   └── ...                 # Other UI components
├── 📂 hooks/               # Custom React hooks
│   ├── useHeroAnimations   # GSAP hero animations
│   ├── useProjectsScroll   # Magnetic scroll zones
│   └── useScrollSpy        # Active section detection
├── 📂 config/              # Configuration files
│   └── threeScene.js       # 3D particle system config
├── 📂 data/                # Content data
│   ├── projects.js         # Portfolio projects
│   ├── skills.js           # Tech skills & categories
│   └── experiences.js      # Work experience
└── 📂 styles/              # CSS stylesheets
    ├── globals.css         # CSS variables & base
    └── animations.css      # Animation classes

🎨 Featured Projects

PesoTracker macOS Weight Tracking App

BuenMouse macOS Productivity Tool

WW2 MAP Films Interactive Historical Map

🌐 Deployment

Build and deploy to any static hosting service:

# Create production build
npm run build

# Preview before deploying
npm run preview

The dist/ folder is ready for deployment to:

🤝 Connect

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by Steven Coaila Zaa