This project is a modern, responsive landing page for "Yavin Office," a conceptual company specializing in office space design. It was built as a personal practice project to reinforce and expand my front-end development skills.
- Responsive Design: Adapts seamlessly to various screen sizes and devices.
- Dynamic Background: Utilizes Granim.js for an engaging and animated background in the hero section.
- Interactive Statistics: Includes a section with animated counters for key metrics (e.g., Happy Customers, Five Star Reviews) that animate on scroll.
- Service Showcase: Clearly outlines the range of services offered by "Yavin Office," from planning to execution.
- Modern UI/UX Elements: Incorporates a "Glassmorphism Effect," smooth scroll animations (AOS), and various card designs for an aesthetically pleasing user experience.
- Sticky Navigation: A user-friendly navigation bar that stays fixed at the top, improving accessibility.
- HTML5: For the basic structure of the web page.
- CSS3:
- Custom CSS: For unique styling, animations, and the Glassmorphism effect.
- Bootstrap 5.3.3: For responsive layout and pre-built components.
- AOS (Animate On Scroll): To trigger animations when elements enter the viewport.
- Animate.css: A library of ready-to-use CSS animations.
- Hover.css: A collection of CSS3 powered hover effects.
- JavaScript:
- Granim.js: For creating interactive and customizable gradient animations.
- Custom JavaScript: For functionality like the animated statistics.
- Bootstrap Bundle JS: For Bootstrap's JavaScript-powered components.
- Google Fonts: (Montserrat, Nunito, Parisienne) for typography.
- Font Awesome & Bootstrap Icons: For scalable vector icons.
This project served as an excellent opportunity to:
- Strengthen my understanding of responsive web design principles.
- Gain hands-on experience with modern CSS effects like Glassmorphism.
- Implement interactive JavaScript libraries (Granim.js, AOS) and custom scripting for dynamic content.
- Practice building a complete, visually appealing front-end application from scratch.
https://project-yavin-office.netlify.app/
This project is open-source and available under the MIT License.