Skip to content

README.md

Latest commit

 

History

History
237 lines (180 loc) · 6.24 KB

README.md

File metadata and controls

237 lines (180 loc) · 6.24 KB

8-Bit Game Developer Portfolio

An interactive retro-themed portfolio website showcasing game development projects with an authentic 8-bit aesthetic. Built with Next.js 15 and featuring pixel-perfect animations, chiptune sound effects, and responsive design.

✨ Features

  • 🎮 Retro 8-bit aesthetic with pixelated fonts, borders, and animations
  • 🚀 Landing page with animated avatar and typewriter effect
  • 📂 Projects showcase with interactive game project cards
  • 📊 Character stats screen styled about section
  • ⚡ Skills progression bars like classic RPG games
  • 📡 Retro contact form styled as game dialog box
  • 🎵 Chiptune audio controls with sound effects on interactions
  • 📱 Fully responsive design maintaining 8-bit aesthetic
  • ⌨️ Keyboard navigation (WASD/Arrow keys)
  • 🔍 SEO optimized for game developer job searches

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Clone the repository

    git clone <your-repo-url>
cd game-portfolio2

  2. Install dependencies

    npm install

  3. Start development server

    npm run dev

  4. Open in browser

    http://localhost:3000

🛠️ Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

📝 Customization

Personal Information

Update the following files with your information:

  1. app/layout.js - Update metadata, titles, and descriptions
  2. components/sections/HeroSection.js - Change name, title, and avatar
  3. components/sections/ProjectsSection.js - Add your actual projects
  4. components/sections/AboutSection.js - Update bio and achievements
  5. components/sections/SkillsSection.js - Modify skills and levels
  6. components/sections/ContactSection.js - Update contact information
  7. public/resume.pdf - Replace with your actual resume

Color Scheme

Modify the CSS variables in app/globals.css:

:root {
  --background: #0f0f23;    /* Background color */
  --foreground: #00ff00;    /* Primary text color */
  --accent: #ff0080;        /* Accent color */
  --secondary: #00ffff;     /* Secondary color */
  --warning: #ffff00;       /* Warning/highlight color */
  /* ... more variables */
}

Project Data

Update the projects array in components/sections/ProjectsSection.js:

const projects = [
  {
    id: 1,
    title: "Your Game Title",
    description: "Game description...",
    tech: ["Unity", "C#", "Your Tech Stack"],
    image: "🎮", // Emoji or replace with actual images
    playLink: "https://your-game-link.com",
    codeLink: "https://github.com/your-repo",
    status: "Released", // Released, In Development, Beta, Prototype
    players: "Single Player"
  },
  // ... more projects
];

🚀 Deployment

Vercel (Recommended)

  1. Push to GitHub

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

  2. Deploy to Vercel

    • Go to vercel.com
    • Import your GitHub repository
    • Deploy automatically

Netlify

  1. Build the project

    npm run build

  2. Deploy to Netlify

    • Drag and drop the out folder to netlify.com
    • Or connect your GitHub repository

Traditional Hosting

  1. Build for static export (add to next.config.mjs):

    /** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true }
};

export default nextConfig;

  2. Build and export

    npm run build

  3. Upload the out folder to your web host

🎨 Assets

Required Assets (Replace placeholders)

  • public/favicon.ico - Your favicon
  • public/icon.svg - SVG icon for modern browsers
  • public/apple-touch-icon.png - Apple touch icon
  • public/og-image.png - Open Graph image (1200x630px)
  • public/resume.pdf - Your actual resume

Font Requirements

The portfolio uses:

  • Press Start 2P - For retro 8-bit text (loaded from Google Fonts)
  • Geist Sans/Mono - For fallback modern text

🔧 Technical Details

Built With

  • Next.js 15 - React framework with App Router
  • React 19 - User interface library
  • Tailwind CSS v4 - Utility-first CSS framework
  • Web Audio API - For chiptune sound effects
  • CSS Animations - Smooth transitions and pixel-perfect effects

Browser Compatibility

  • Modern browsers (Chrome, Firefox, Safari, Edge)
  • Mobile browsers (iOS Safari, Chrome Mobile)
  • Progressive enhancement for older browsers

Performance

  • Static site generation for fast loading
  • Optimized assets and images
  • Minimal JavaScript bundle
  • Efficient CSS with Tailwind

📱 Responsive Design

The portfolio is fully responsive with breakpoints:

  • Mobile: < 768px (simplified navigation, stacked layout)
  • Tablet: 768px - 1024px (adapted grid layout)
  • Desktop: > 1024px (full experience with all features)

⌨️ Keyboard Controls

  • W/↑ or S/↓ - Navigate between sections
  • Space/Enter - Interact with current section
  • Esc - Close modals/overlays

🎵 Audio Features

  • Chiptune music toggle - Background music control
  • Sound effects - Button interactions and navigation
  • Volume control - Adjustable audio levels
  • Web Audio API - Generated retro sound effects

🔍 SEO Optimization

  • Semantic HTML structure
  • Meta tags for social sharing
  • Open Graph and Twitter Card support
  • Structured data for search engines
  • Fast loading and performance optimization

📄 License

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

🤝 Contributing

Feel free to fork this project and customize it for your own portfolio. If you make improvements that could benefit others, pull requests are welcome!

📧 Support

If you have questions or need help customizing the portfolio:

  • Create an issue in the GitHub repository
  • Check the documentation in the code comments
  • Review the customization examples above

Happy coding and good luck with your game development career! 🎮✨