This is a responsive learning journal and blog website, built to showcase my progress as a web development student.
Live Demo: mylearningjournal.netlify.app
- Responsive Layout: The site adapts gracefully to different screen sizes, from mobile phones to desktops.
- Theme Toggle: A toggle button allows users to switch between a dark and a light theme.
- Dynamic Navigation: Clicking different links (Home, About Me) and the main hero section reveals and hides content without reloading the page.
- "View More" Functionality: A button dynamically shows and hides additional blog posts with a smooth sliding animation.
The HTML file provides a clear, semantic structure for the entire website. The main content is organized into logical sections:
<header>: Contains the site logo and the main navigation links. It includes separate elements for desktop and mobile navigation to handle responsiveness.<main>: Houses all the primary content sections of the page, including the hero section, full blog post view, about me page, and the blog post grid.<footer>: Displays the site's title and copyright information, which is dynamically generated by JavaScript.- Hidden Sections: Pages like the full blog post (
.full-blog-post) and about me (.about-section) are initially hidden with the.hiddenCSS class and are shown/hidden by JavaScript based on user actions.
The styling is designed with a mobile-first approach in mind. A dark theme is the default, and a lighter theme is provided for user customization.
- Global Styles: Universal styles for fonts, colors, and box-sizing are set for consistency.
- Theme Toggling: The
body.light-themeselector is the core of the light theme functionality. JavaScript adds this class to the<body>element, and the CSS then overrides the default dark theme colors. - Mobile and Desktop Navigation: Different styling rules are applied to the navigation based on screen size, with the mobile menu initially hidden and the desktop menu appearing on larger screens via media queries.
- Responsive Design: A
@media (min-width: 768px)query refactors the layout for larger screens, using CSS Grid to organize the content into distinct areas (header,hero,blog-posts,footer). - Animations: The code includes keyframes (
@keyframes slideDown,@keyframes fadeIn) to create smooth transitions when elements appear or disappear.
The JavaScript code handles all the interactive elements of the site, making it feel like a single-page application.
- Theme Toggle: Event listeners on the theme toggle buttons manage the
light-themeclass on the<body>element and store the user's preference inlocalStorage. - Mobile Menu: The mobile navigation button uses an event listener to toggle the
activeclass on the mobile menu, sliding it into and out of view. - Page Navigation: Clicks on the main navigation links and the hero section trigger functions that add and remove the
.hiddenclass on the different content sections, allowing for seamless transitions between the main, full post, and about pages. - "View More" Button: This button's click handler toggles a
postsVisibleboolean. When clicked, it iterates through the additional.extra-postelements, adding a sliding animation before removing the.hiddenclass to reveal them. A second click reverses this process, hiding the posts again.