A high-fidelity landing page implementation featuring complex background asset management and a fully responsive layout. This project showcases Art Direction via CSS, BEM-structured SCSS, and a refined mobile-first approach to UI development.
Art Directed Backgrounds: Engineered a responsive background system that swaps assets based on the viewport to maintain design integrity across mobile and desktop. BEM Methodology: Implemented a strict Block-Element-Modifier naming convention within SCSS to ensure encapsulated and maintainable styles. Modern Layout Orchestration: Leverages a hybrid of CSS Grid for page-level structure and Flexbox for fine-tuned component alignment. Type-Safe Development: (If applicable) Integrated TypeScript for consistent event handling and interactive element logic. Accessibility (A11y): Optimised for screen readers using semantic HTML5 and accessible social media triggers with proper aria-labels.
The interface is built on a robust foundation designed to handle extreme viewport variances:
Mobile-First Foundation: Styles are authored from the smallest screens upward, reducing CSS bloat and improving performance on mobile devices.
Flexible Grid System: The hero section uses CSS Grid to manage the transition from a single-column stack on mobile to a sophisticated two-column layout on desktop.
Dynamic Scaling: Utilises relative units (rem, em, vh/vw) to ensure typography and spacing scale fluidly.
- Modular Design Tokens: Used CSS Custom Properties for the primary violet and pink brand colors, making the theme easily adjustable.
- Pseudo-Element Effects: Leveraged CSS pseudo-elements for decorative background patterns, keeping the HTML lean and semantic.
- Interactive States: Refined hover and focus states for buttons and social icons using high-contrast color shifts and smooth transitions.
- Vendor Prefixing: Automated via SCSS to ensure consistent rendering across legacy and modern browsers.
- SVG Management: Integrated branding and social icons as optimised SVGs for infinite scalability and minimal payload.
- Live Site: https://huddle-intro.seanbuckle.com
- Source Code: https://github.com/seanbuckle/huddle-intro
To run this project locally:
- Clone the repository:
git clone https://github.com/seanbuckle/huddle-intro.git
- Navigate to the directory:
cd huddle-intro - Open the project: Simply open
index.htmlin your preferred browser.
Sean Buckle
This project is licensed under the MIT License - see the LICENSE file for details.
Note: This project was built as a solution to a Frontend Mentor challenge.