Project Overview
Custom Moto Website is a full-featured website for a custom motorcycle workshop, designed to showcase build projects and facilitate client inquiries. The platform features a PHP + SQLite backend with an admin panel — only the shop owner can log in and post new projects, manage content, and handle contact form submissions. Visitors simply browse the gallery, explore builds, and use the contact form to start their own custom motorcycle journey. This project is currently in development — the name, content, and images are placeholders / proof of concept. The design is the main deliverable: an industrial, dark-themed visual identity with custom canvas animations, a garage-door entrance sequence, particle effects, 3D tilt cards, and a gritty, workshop-inspired feel.
The Challenge
Build a visually striking website for a custom motorcycle workshop that conveys craftsmanship, edge, and premium quality — all while keeping the backend simple enough for a non-technical shop owner to manage. The main challenge was creating a unique, immersive visual identity from scratch: an industrial dark theme with orange/brass accents, a custom garage-door entrance animation, real-time canvas particle effects (sparks, tire smoke, cursor embers), noise texture overlay, 3D tilt cards, magnetic buttons, and smooth scroll-triggered reveals. Everything had to feel hand-crafted, matching the brand's philosophy.
Design & Development
- Fully custom dark industrial design with orange (#ff6b00) and brass accents
- Animated garage-door entrance sequence on the homepage
- Real-time canvas particle system: welding sparks, tire smoke, cursor fire embers
- PHP + SQLite backend with REST API for projects and contact
- Admin panel with session-based auth, CSRF protection, image upload
- 3D tilt cards, magnetic buttons, parallax layers, noise texture overlay
- Fully responsive with mobile navigation and smooth scroll animations
- Bulgarian language content with custom typography (Space Grotesk, JetBrains Mono, Playfair Display)
Work in Progress
This project is still in active development and there is still a lot of work to be done. The name, content, and everything you see are examples / proof of concept — the design is the main focus. This is something I was experimenting with, trying new visual techniques and pushing the boundaries of what a workshop website can feel like. All design ideas and their realization are entirely my own work.
Platform Architecture
Frontend
Vanilla HTML/CSS/JS with custom design system (CSS custom properties). Canvas-based particle engine for sparks, tire smoke, and cursor embers. 3D tilt via mouse tracking, magnetic button effect, scroll-triggered reveals via IntersectionObserver, and a CSS-only garage-door entrance animation.
Backend API
PHP REST API serving project data from a SQLite database. Endpoints for listing projects, fetching single project details (with full specs), and handling contact form submissions. JSON responses with proper error handling, CORS headers, and prepared SQL statements.
Admin Panel
Password-protected admin area with session-based authentication and CSRF tokens. Single admin account — the shop owner logs in to add/edit/delete motorcycle build projects, upload images, view contact submissions, and update site settings. Fully responsive admin dashboard.
Design Highlights
Visual Identity
- •Industrial dark theme with warm orange (#ff6b00) and brass (#c8a45c) accents
- •Custom cursor with flame glow effect
- •Noise texture overlay for gritty, workshop feel
- •Flame and pinstripe dividers between sections
- •Vintage-modern fusion: serif headings, mono labels, sans-serif body
Interactive Elements
- •Garage door opening animation on page load (CSS only)
- •Canvas particle system: welding sparks, tire smoke, cursor embers
- •3D tilt cards on hover with perspective transform
- •Magnetic button effect pulling toward cursor
- •Text reveal animation on scroll (word-by-word)
- •Click-to-spark burst on any click
Frontend Techniques
- •Custom design system via CSS custom properties (colors, radii, transitions, fonts)
- •Canvas 2D API for real-time particle simulation with gravity, friction, trails, and color gradients
- •IntersectionObserver for scroll-triggered animations and counter
- •CSS backdrop-filter blur for glassmorphism effects
- •CSS-only garage door with 7 panels, windows, hinges, lock, and handle
- •Radial gradient background layering for atmospheric lighting
Backend Techniques
- •PHP with SQLite via PDO (WAL mode, prepared statements, error handling)
- •Session-based admin authentication with CSRF token protection
- •RESTful JSON API for project CRUD and contact form
- •Automatic database migration on first run (table creation + column additions)
- •File upload handling for project images
- •Admin notification email for new contact inquiries