# PaperPixel — Scrapbook & Retro Pixel HTML5 Portfolio Template

**PaperPixel** is a creative personal portfolio template combining hand-crafted scrapbook layouts (polaroid photos, lined papers, sticky notes, and tape clips) with retro 8-bit game mechanics (sound blips, game cabinets, badges).

## Features

- **Skeuomorphic Layouts:** Taped photos, paperclip memo cards, and stitched timeline details.
- **Dual Themes:** Clean, warm cream light mode and soft carbon chalkboard dark mode.
- **8-Bit Audio Synthesis:** Soft, low-volume click sounds synthesized directly in the browser via Web Audio API (no external MP3/WAV files required).
- **Draggable Stickers:** Interactive sticker elements that can be dragged on mouse or touch screens.
- **Responsive & Lightweight:** Clean semantic HTML structures and minimal vanilla JS.
- **10 Pages Included:** Index, About, Portfolio, Services, Pricing, Blog, Blog Single, Contact, FAQ, and 404.

## Quick Start

1. Extract the zip file contents.
2. Open the main folder in your text editor (e.g. Visual Studio Code).
3. Right-click `index.html` and select **Open with Live Server** (or simply double-click the file to open it directly in your web browser).
4. Edit the HTML files directly to add your personal text, links, and portfolio images.

## Customization

You can change colors by editing the CSS custom properties in `assets/css/style.css` (for light mode) and `assets/css/dark-mode.css` (for dark mode).

```css
:root {
  --color-bg-base:       #f4f0e6;   /* Main page background */
  --color-accent-blue:    #5887ff;   /* Accent color */
}
```

## Documentation

Full detailed documentation can be found in `documentation/index.html`. Open it in any browser to read complete instructions.

## License & Credits

- Google Fonts: Space Grotesk, Press Start 2P.
- Design inspirations: Japanese Carrd landing grids, bakery branding mockups, and student binder layouts.