Skip to content

gluppler/GABECZH

BranchesTags

Repository files navigation

🟩 Super Game Boy Portfolio - Full-Stack Next.js Application

A production-quality portfolio website built with Next.js, featuring a Super Game Boy pea-green aesthetic with enhanced vibrant colors, modern portfolio design principles, full offline support (PWA), and comprehensive full-stack implementations. Optimized for Vercel Free Tier - no custom domain required!

🚀 Tech Stack

  • Framework: Next.js 16.0.7 (App Router)
  • Runtime: Node.js
  • Language: TypeScript
  • Styling: Tailwind CSS
  • Deployment: Vercel Free Tier (automatic .vercel.app domain)
  • PWA: Service Worker + IndexedDB for offline support
  • Theme: Super Game Boy - Fixed color scheme, no theme switching

✨ Features

Client-Side

  • ✅ Server-Side Rendering (SSR)
  • ✅ Client hydration
  • ✅ Request batching
  • ✅ Local caching (SWR + IndexedDB)
  • ✅ Polling / revalidation logic
  • ✅ Offline asset / API caching

Server-Side

  • ✅ Next.js Route Handlers (/app/api/*)
  • ✅ CORS policy configuration
  • ✅ Rate limiting using proxy (Next.js 16+)
  • ✅ Input validation
  • ✅ Logging / observability
  • ✅ Security headers

Data & Query Layer

  • ✅ Database abstraction (in-memory with Redis-ready structure)
  • ✅ Query optimization (pagination, indexing)
  • ✅ Server-side caching (ISR / revalidate)
  • ✅ Stale-while-revalidate strategy

Performance & Scalability

  • ✅ Stale-while-revalidate
  • ✅ Cache invalidation
  • ✅ Rate limiting thresholds
  • ✅ Backpressure / error fallback behavior

🎮 Site Structure

  1. BOOT SCREEN - SSR loading screen with Super Game Boy boot sequence
  2. MAIN MENU - Keyboard navigation (↑↓ keys + Enter) - Desktop focused experience
    • PROFILE - Tech skills as modules (enhanced Super Game Boy colors)
    • PROJECTS - Cartridge list with batched APIs
    • SYSTEM STATUS - Health checks
    • NETWORK - Polling status with cache indicators
    • DEBUG - SSR timing, cache stats, rate limit info

🎨 Design System

Super Game Boy Color Palette

  • Dark: #0f380f (Deep forest green - background)
  • Medium: #306230 (Medium green - frames)
  • Light: #8bac0f (Bright pea-green - buttons)
  • Lighter: #9bbc0f (Light pea-green - screen/text)
  • Accent: #c4cf9f (Super Game Boy accent - highlights)
  • Border: #1a1a1a (Black borders)
  • Shadow: #2d5016 (Shadow green)

Modern Portfolio Principles Applied

  • ✅ Responsive design (mobile-first)
  • ✅ Accessibility (ARIA labels, keyboard navigation)
  • ✅ Smooth scrolling and transitions
  • ✅ Enhanced typography and spacing
  • ✅ Interactive hover states
  • ✅ Better touch targets (min 44px)
  • ✅ Semantic HTML structure
  • ✅ No theme switching - Fixed Super Game Boy aesthetic

🔒 Security

CVE-2025-66478 / CVE-2025-55182 Mitigation

This project includes comprehensive mitigations for the critical RCE vulnerability in React Server Components and Next.js:

Patched Versions

  • Next.js: 16.0.7 (patched version)
  • React: 19.2.1 (patched version)

Runtime Defenses

  1. Request Body Size Limits: Maximum 10KB body size enforced
  2. Content-Type Validation: Whitelist of allowed content types
  3. Payload Validation: Whitelist schema validation for server actions
  4. Nested Object Depth Limits: Maximum 3 levels of nesting
  5. Prototype Pollution Prevention: Blocks __proto__, constructor, prototype keys
  6. Suspicious Pattern Detection: Blocks eval, Function, require in payloads

Implementation

See lib/security.ts for all security utilities. These are integrated into:

  • API route handlers (app/api/*/route.ts)
  • Middleware (middleware.ts)

📁 Project Structure

GABECZH/
├── app/
│   ├── api/              # API routes with CORS, rate limiting
│   │   ├── projects/
│   │   ├── status/
│   │   ├── network/
│   │   └── debug/
│   ├── profile/          # Profile page
│   ├── projects/         # Projects page
│   ├── status/           # System status
│   ├── network/          # Network status
│   ├── debug/            # Debug panel
│   ├── layout.tsx        # Root layout with PWA registration
│   ├── page.tsx          # Home page with boot screen
│   └── globals.css       # Game Boy theme styles
├── components/           # React components
│   ├── BootScreen.tsx
│   ├── MainMenu.tsx
│   ├── ProjectsList.tsx
│   ├── SystemStatus.tsx
│   ├── NetworkStatus.tsx
│   └── DebugPanel.tsx
├── lib/
│   ├── cache.ts          # IndexedDB caching utilities
│   └── security.ts       # Security validation functions
├── public/
│   ├── sw.js             # Service Worker
│   └── manifest.json     # PWA manifest
├── proxy.ts              # Rate limiting & CORS (Next.js 16+ proxy convention)
├── next.config.ts        # Next.js config with security headers
└── package.json

🛠️ Installation & Setup

  1. Install dependencies:

    npm install

  2. Run development server:

    npm run dev

  3. Build for production:

    npm run build
npm start

🚢 Deployment to Vercel (Free Tier)

Quick Deploy (No Custom Domain Required)

  1. Push to GitHub:

    git add .
git commit -m "Initial commit"
git push origin main

  2. Deploy to Vercel Free Tier:

    • Sign up at https://vercel.com (free)
    • Connect your GitHub repository
    • Vercel will automatically detect Next.js
    • Deploy!
    • Your site will be live at your-project.vercel.app (free tier)

  3. Environment Variables (if needed):

    • Add any required environment variables in Vercel dashboard
    • Free tier supports unlimited environment variables

Free Tier Features Used

  • ✅ Automatic .vercel.app domain (no custom domain purchase needed)
  • ✅ Unlimited deployments
  • ✅ Preview deployments for every PR
  • ✅ Serverless Functions (100GB-hours/month)
  • ✅ Edge Network & CDN
  • ✅ Automatic SSL certificates
  • ✅ Environment variables
  • ✅ Analytics (limited)

Note: This project is optimized for Vercel Free Tier - no custom domain configuration required!

🎨 Design System

Super Game Boy Enhanced Palette

  • Dark: #0f380f (Deep forest green - background)
  • Medium: #306230 (Medium green - frames)
  • Light: #8bac0f (Bright pea-green - buttons)
  • Lighter: #9bbc0f (Light pea-green - screen/text)
  • Accent: #c4cf9f (Super Game Boy accent - highlights)
  • Border: #1a1a1a (Black borders)
  • Shadow: #2d5016 (Shadow green)

Note: Fixed color scheme - no theme switching. Pure Super Game Boy aesthetic!

Typography (Modern Portfolio Principles)

  • Font: Monospace (pixel font for nostalgia)
  • Size: 16px base (improved readability)
  • Line height: 1.6 (better spacing)
  • Letter spacing: 0.5px
  • Text rendering: optimizeLegibility
  • Font smoothing: antialiased

📊 Caching Strategy

Client-Side

  • SWR: React hooks for data fetching with revalidation
  • IndexedDB: Persistent cache for API responses
  • Service Worker: Cache-first for static assets, network-first for API

Server-Side

  • ISR: Incremental Static Regeneration with 30s revalidate
  • In-Memory Cache: API response caching (production: use Redis)
  • Stale-While-Revalidate: Serve stale data while fetching fresh

🔄 API Design

Rate Limiting

  • Limit: 100 requests per minute per IP
  • Headers: X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset
  • Response: 429 Too Many Requests when exceeded

CORS

  • Allowed Origins: Configurable in proxy.ts
  • Methods: GET, POST, OPTIONS
  • Headers: Content-Type, Authorization

Input Validation

  • Query parameter validation
  • Body size limits (10KB)
  • Content-type whitelist
  • Payload schema validation

📱 PWA / Offline Support

Service Worker

  • Static Assets: Cache-first strategy
  • API Routes: Network-first with cache fallback
  • Offline Fallback: Returns cached data or error message

IndexedDB

  • Stores API responses with TTL
  • Automatic expiration
  • Used by client components for offline access

🧪 Testing

Manual Testing Checklist

  • Boot screen displays correctly
  • Navigation works with keyboard (↑↓ Enter)
  • All pages load with SSR
  • API routes respond correctly
  • Rate limiting works
  • Offline mode functions
  • Service Worker registers
  • Cache statistics update

📝 Architecture Decisions

  1. App Router: Using Next.js 16 App Router for modern SSR
  2. TypeScript: Full type safety
  3. Tailwind CSS: Utility-first CSS with custom Game Boy theme
  4. SWR: Data fetching with built-in caching and revalidation
  5. In-Memory Cache: Simple for demo, Redis-ready structure for production
  6. Service Worker: Custom implementation for full control

🔐 Security Best Practices

  1. Security Headers: Configured in next.config.ts
  2. Input Validation: All user input validated
  3. Rate Limiting: Prevents abuse
  4. CORS: Properly configured
  5. Body Size Limits: Prevents DoS
  6. Content-Type Validation: Prevents injection
  7. Payload Sanitization: Whitelist-based validation

📚 Additional Resources

🐛 Known Limitations

  1. In-Memory Cache: Not persistent across server restarts (use Redis in production)
  2. Rate Limiting: In-memory (use Redis for distributed systems)
  3. Mock Data: Projects are hardcoded (replace with real database)

🎯 Future Enhancements

  • Add real database (PostgreSQL/MongoDB)
  • Implement Redis for distributed caching
  • Add authentication
  • Implement real-time updates
  • Add more Game Boy sound effects
  • Improve animations

📄 License

MIT

Built with ❤️ and Game Boy nostalgia

About

My Portfolio Website

gabeczh.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages