Skip to content

README.md

Latest commit

 

History

History
231 lines (180 loc) · 7.13 KB

README.md

File metadata and controls

231 lines (180 loc) · 7.13 KB

✨ SpaceCat's Glitterbox

A modern portfolio website showcasing interactive games, tech demos, and creative coding projects. Built with Astro for fast, static site generation.

🎮 Live Demos

  • 🌲 Forest Game - Interactive forest exploration game with procedurally generated environments
  • 🚀 Space Game - Space shooter adventure with physics and audio
  • 🎉 Best Friend Party - Interactive party game with cat characters
  • 🧟 Vampire Survivors Clone - Action survival game with canvas rendering
  • 🌿 Survival Game - 3D survival experience built with Three.js
  • 📱 Wellness Tracker - Progressive Web App for daily wellness and journaling

🏗️ Tech Stack

  • Framework: Astro - Static site generator
  • Styling: CSS with modern glassmorphism effects
  • Game Technologies:
    • Vite for build tooling
    • Matter.js for physics (Space Shooter)
    • Tone.js for audio (Space Shooter)
    • Three.js for 3D graphics (Survival)
    • Canvas API for 2D rendering (Vampire)
  • PWA Features: Service workers, local storage, offline support
  • Deployment: Ready for deployment to spacecat.org

🚀 Getting Started

Prerequisites

  • Node.js (version 16 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
git clone <repository-url>
cd glitterbox
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and visit http://localhost:4321

📁 Project Structure

glitterbox/
├── apps/
│   └── wellness-tracker/     # PWA wellness tracking app
├── games/
│   ├── best-friend-party/    # Cat party game (Vite + vanilla JS)
│   ├── chill-forest/         # Forest exploration game (Vite + vanilla JS)
│   ├── space-shooter/        # Space game (Vite + Matter.js + Tone.js)
│   └── survival/             # 3D survival game (Vite + Three.js)
├── public/
│   ├── best-friend-party/    # Built game assets
│   ├── forest/               # Forest game assets
│   ├── space/                # Space game assets
│   ├── survival/             # Survival game assets
│   ├── vampire/              # Vampire game assets
│   ├── wellness/             # Wellness app assets
│   └── favicon.png           # SpaceCat brand favicon
├── src/
│   ├── assets/
│   │   ├── spacecat_logo_glitterbox_style_transparent.png
│   │   └── glitterbox_combined_transparent.png
│   ├── components/
│   │   └── Welcome.astro     # Main landing page
│   ├── layouts/
│   │   └── Layout.astro      # Base layout template
│   └── pages/
│       ├── index.astro       # Home page
│       ├── about.astro       # About page
│       ├── forest.astro      # Forest game page
│       ├── space.astro       # Space game page
│       ├── best-friend-party.astro  # Party game page
│       ├── survival.astro    # Survival game page
│       ├── vampire.astro     # Vampire game page
│       └── wellness.astro    # Wellness app page
└── package.json

🎮 Game Details

🌲 Chill Forest

  • Type: Procedural forest exploration
  • Tech: Vanilla JavaScript, Vite
  • Features: Dynamic environment generation, interactive elements

🚀 Space Shooter

  • Type: Physics-based space combat
  • Tech: Matter.js physics, Tone.js audio, Vite
  • Features: Realistic physics, sound effects, responsive controls

🎉 Best Friend Party

  • Type: Interactive party game
  • Tech: Vanilla JavaScript, Vite
  • Features: Cat characters, party mechanics

🧟 Vampire Survivors Clone

  • Type: Action survival
  • Tech: Canvas API, vanilla JavaScript
  • Features: Real-time combat, enemy spawning

🌿 Survival Game

  • Type: 3D survival experience
  • Tech: Three.js, Vite
  • Features: 3D graphics, immersive environment

📱 App Details

Wellness Tracker

  • Type: Progressive Web App
  • Tech: Vanilla JavaScript, PWA features
  • Features:
    • Daily goal tracking
    • Food logging
    • Personal notes/journaling
    • Local storage
    • Offline support
    • Service worker registration

🎨 Design Features

  • Dark Tech Theme: Deep blue/purple gradients with animated overlays
  • Glassmorphism UI: Modern backdrop blur effects and transparency
  • Responsive Design: Optimized for desktop and mobile
  • Brand Integration: SpaceCat branding with Glitterbox product focus
  • Smooth Animations: Hover effects and transitions throughout

🎮 Adding New Games

To add a new game to the portfolio:

  1. Create game directory:

    mkdir public/your-game-name

  2. Add game files to public/your-game-name/

  3. Create Astro page at src/pages/your-game-name.astro:

    ---
import Layout from '../layouts/Layout.astro';
---

<Layout>
  <div id="game-container">
    <iframe 
      src="/your-game-name/index.html" 
      width="100%" 
      height="100%" 
      frameborder="0"
      style="border: none;"
    ></iframe>
  </div>
</Layout>

  4. Update asset paths in your game's HTML to include the subdirectory (e.g., /your-game-name/assets/)

  5. Add link to the main page in src/components/Welcome.astro

🚀 Deployment

Build for Production

npm run build

Deploy to spacecat.org

The site is configured for deployment to spacecat.org. Build files will be generated in the ./dist/ directory.

🎯 Available Scripts

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check

Individual Game Development

Each game can be developed independently:

cd games/your-game-name
npm install
npm run dev

🌟 Features

  • Fast Loading: Static site generation for optimal performance
  • SEO Optimized: Built-in meta tags and structured data
  • Accessible: Semantic HTML and ARIA labels
  • Modern CSS: CSS Grid, Flexbox, and custom properties
  • Game Integration: Seamless iframe embedding for interactive content
  • PWA Support: Progressive Web App capabilities for mobile
  • Cross-Platform: Works on desktop, mobile, and tablets

🛠️ Development Tools

  • Vite: Fast build tool for modern web development
  • Astro: Static site generator with component support
  • Modern JavaScript: ES6+ features and modules
  • CSS Grid/Flexbox: Modern layout systems
  • Responsive Design: Mobile-first approach

📝 License

This project is part of the SpaceCat portfolio. All rights reserved.

Built with ❤️ by SpaceCat