.png){kind=link}
A modern, responsive landing page project focused on delivering a seamless user experience through Vanilla JavaScript and advanced CSS3. This project serves as a showcase for building scalable UI components, theme management systems, and smooth scroll interactions.
- State Management (Dark Mode): Implemented a robust theme-switching logic that manipulates the DOM tree in real-time. By toggling classes on the
<body>element, the site's entire color palette shifts dynamically while maintaining high accessibility standards. - Scroll-Driven Interactions: Engineered an "observer-style" sticky header using
window.onscroll. The navigation bar detects scroll depth to trigger visual transitions, improving user orientation and site aesthetics. - Advanced Flexbox Architecture: Utilized CSS Flexbox for complex two-column layouts and responsive "pill" navigation systems, ensuring the design remains stable across all viewport sizes.
- Performance-First JavaScript: Focused on lightweight, vanilla JS to handle user events (clicks and scrolls) without the overhead of heavy external libraries.
- Dynamic Navigation: A fixed header with transition effects and a custom-built "Log In" / "Get Started" action block.
- Component-Based UI: Segmented the HTML into clear sections (
header,article,features,footer) for better maintainability. - Asset Optimization: Custom CSS filters applied to SVG/PNG assets to ensure branding consistency across different themes.
- Typography & Spacing: Precise control over line-heights and font hierarchies using the 'Poppins' typeface to ensure a professional finish.
- HTML5: Semantic tags for modern SEO and clean structure.
- CSS3: Custom properties, transitions, and layout engines.
- JavaScript: Event listeners, class manipulation, and scroll logic.
- Local View: Open
landingpage.htmlin your browser. - VS Code: Use the Live Server extension for real-time development.
- GitHub Pages: This project is ready for one-click deployment via GitHub Pages.
- Box-Sizing Conflicts: Resolved padding-related width issues in fixed headers by implementing
border-boxcalculations. - CSS Specificity: Managed complex theme overrides to ensure dark-mode styles properly cascade over base light-mode elements.