webHax
A dynamic, responsive event website built from scratch to promote a fictional technology conference.
The Problem
The goal of this project was to design and develop a comprehensive web presence for a fictional tech event called "webHax". The challenge was to create a modern, high-tech visual identity from scratch and translate it into a fully responsive, functional website using pure HTML, SCSS, and JavaScript without relying on heavy frameworks.
The Solution
I developed a complete design system starting with a style guide, moving into high-fidelity Figma mockups for mobile and desktop, and finally executing the front-end code. The final site features smooth CSS animations, a custom mobile navigation menu, and a dark, cyber-inspired aesthetic.
Final Deliverables
- Brand Style Guide
- Figma Wireframes & Mockups
- Fully Responsive Website
- Modular SCSS Architecture
Style Guide & Art Direction
Design Decision: I established a cyber/hacker aesthetic using a dark mode palette with vibrant neon green accents. This ensures high contrast and immediately communicates the "tech event" vibe to the user.
Responsive Development (SCSS)
Process: I utilized SCSS to create a modular, maintainable stylesheet architecture. Variables were heavily used for colors and typography to ensure consistency, while mixins handled media queries for a mobile-first approach.
Interactivity (JavaScript)
Process: Vanilla JavaScript was used to handle DOM manipulation, specifically focusing on the mobile navigation toggle state and scroll-based header animations, keeping the bundle size extremely lightweight.
The Challenge
Challenge: Keeping the CSS organized as the site grew in complexity, especially when dealing with complex grid layouts for the event schedule.
Solution: I refactored the vanilla CSS into SCSS, breaking it down into logical partials (_variables, _typography, _layout) which drastically improved readability and maintenance.
The Results
Impact: The project successfully demonstrated end-to-end web production capabilities, from initial brand conception to deployed code.
- Created a reusable design system
- Achieved a 100/100 Lighthouse performance score
- Delivered a pixel-perfect HTML/CSS integration of the Figma designs
Technologies Used
Gallery
