Homepage
This project is part of a retro-inspired personal website built with Next.js and React. This site organizes content into a three-column layout: a left sidebar, a central column for the main content of the website, and a right sidebar. Each column consisting of content that shows off my personality and creativity with some fun interactive iframes/widgets for visitors. The design features reusable components making the site easy to maintain and expand upon.
Homepage
This is the main page of my website. I wanted this page to feel like a reminder of the old personal websites from the early 2000's. It features a small introduction, fun facts about me, and some fun interactive iframes. The blue sidebars stay on the sides of the screen, while the main panel in the middle changes depending on the page you're on. To keep the information in the sidebars consistent across all pages, I made each section into a component. If I want to change or add anything, I just change it in the component file.
Navigation Menu
This component builds a small, accessible navigation menu with collapsible dropdowns. It uses a single openDropdown state to track which submenu (if any) is open; clicking the toggleable menu item toggles the submenu. This approach keeps the UI logic simple while making it easy to add or remove menu groups.
Status Bar
This component displays short status items. It uses default props so the component renders content even if none is provided. Building this into a component allows me to reuse it across my site, and it makes it easier to test or update the content.
Updates Box
This component demonstates a pattern for rendering lists from an array. It maps over the updates array to produce a list of paragraphs and includes a fallback message if the array is empty.