OptiPix 🔮📸

OptiPix is an image compression tool built in 2026 with a mobile‑first structure, vanilla JavaScript, and a lightweight Netlify serverless function. Inspired by the precision of camera optics, the project blends a bold "dopamine optics" visual identity with real, functional image compression — turning oversized PNGs and JPGs into lighter files without a visible loss in quality.

---

🌐 Project Overview

This site demonstrates how a simple utility tool can be elevated into a polished, branded product:

• Semantic HTML5 for clarity, accessibility, and maintainability
• Mobile‑first, responsive CSS with custom properties, a bento‑grid layout, and light skeuomorphic depth
• JavaScript (ES6 modules) for drag‑and‑drop handling, file validation, and dynamic result rendering
• Netlify serverless function using sharp for real server‑side image compression
• Original branding — a violet‑to‑orange gradient identity, custom type pairing, and an optics‑inspired concept throughout

---

📂 File Structure

optipix/
│
├── dist/
│   ├── index.html          # Main entry point
│   ├── css/
│   │   └── styles.css      # Global styles, variables, layout
│   ├── js/
│   │   ├── Counter.js      # Simple incrementing ID counter
│   │   └── script.js       # App logic and DOM handling
│   └── favicon/            # Favicon and PWA assets
│
├── serverless/
│   └── compress_files.mjs  # Netlify function — image compression via sharp
│
├── netlify.toml            # Build + functions configuration
├── package.json
└── package-lock.json

---

✨ Highlights

• Drag‑and‑drop and browse, both fully supported
  A native file picker button backs up drag‑and‑drop, since drag‑and‑drop alone isn't a realistic interaction on mobile.

• Real server‑side compression
  A Netlify serverless function decodes each upload, compresses it with sharp, and returns the result — all without leaving the browser tab.

• Bento‑grid layout
  An asymmetric "how it works" section highlights the drop step as a featured cell, following current bento‑grid layout conventions.

• Light skeuomorphism
  Soft, layered shadows and inset highlights give cards a gentle sense of depth instead of flat borders.

• Accessible feedback
  A native <dialog> modal replaces jarring alert() popups for file‑size and file‑count errors, with built‑in focus handling.

---

🚀 Getting Started

This project has a serverless backend, so it needs to run through Netlify's local dev server rather than opening index.html directly.

1. Clone the repository:

   git clone https://github.com/jjmginon/optipix.git

2. Navigate into the project folder:

   cd optipix

3. Install dependencies:

   npm install

4. Run the local dev server (serves the site and the serverless function together):

   netlify dev

5. Open the local URL it prints (typically http://localhost:8888) in your browser.

---

🛠️ Technologies

• HTML5 — semantic structure and accessibility
• CSS3 — custom properties, mobile‑first media queries, bento grid, gradient text
• JavaScript (ES6 modules) — drag‑and‑drop, file handling, DOM manipulation
• Netlify Functions — serverless backend, modern Web API request/response handler
• sharp — native, prebuilt‑binary image compression
• Font Awesome — iconography
• Google Fonts — Bricolage Grotesque, Plus Jakarta Sans, IBM Plex Mono

---

📖 Context

OptiPix was built as a front‑end project extended with a lightweight serverless function — pairing a from‑scratch visual identity with real, working image compression logic. The project demonstrates how thoughtful design direction, mobile‑first responsive layout, and a focused serverless integration can come together in a small, polished tool.

---

👨‍💻 Author

JJ Ginon
Front‑end Web Developer | Accessibility‑first, performance‑optimized, modern web projects