This project is a responsive and interactive landing page built around a curated summer book list featuring recommendations from friends. It serves as both a visually appealing showcase and a user-friendly browsing experience. The page presents book titles, descriptions, and personal endorsements in a structured layout, enhanced by subtle interactions and aesthetic details. It was built using HTML, CSS, and JavaScript, incorporating both design precision and dynamic functionality.
The goal of this project was to apply and reinforce advanced HTML, CSS, and JavaScript techniques to create a visually engaging and interactive landing page. I aimed to go beyond static design by integrating dynamic behaviors, such as light/dark mode, while continuing to practice mobile-first responsiveness. This project also gave me the opportunity to explore custom font pairings and refine my front-end development workflow with a focus on both interactivity and design cohesion.
For the visual direction, I chose a clean yet expressive design that adapts fluidly to screen size and user preferences. The page utilizes a light/dark theme switch, which allows users to toggle between modes seamlessly. This feature, powered by JavaScript, alters classes on the root element to change the overall color scheme dynamically. Typography played a major role in establishing the tone of the page. I combined Old Standard TT for a classic, literary feel in headings, Urbanist for sleek, modern body text, and GlossyDisplay (a non-Google font) to add a unique, stylized flair to key elements like section headers or featured quotes. CSS Grid was used to structure the book list, giving it a magazine-like, editorial layout. Subtle transformations and transitions helped bring the interface to life while maintaining a smooth and consistent user experience.
Completed as part of a web development course focused on advanced front-end techniques, this landing page was designed to demonstrate the integration of engaging HTML, CSS, and JavaScript features. I implemented a light/dark mode toggle activated by clicking an icon, which dynamically altered the page’s theme through JavaScript and HTML class manipulation. The project also reflects a strong foundation in responsive design principles, ensuring optimal usability across devices. CSS Grid and CSS Transform were key layout and animation tools used to deliver a polished and modern presentation.
