A complex, grid-based control panel that serves as a central hub for project management. This project is a deep dive into Advanced CSS Grid.
- Dynamic Grid Architecture: Utilizes a multi-layered grid system (
1fr 3.5fr 1fr) to manage a sidebar, a sticky-style header, and a main content area simultaneously. - Component Nesting: Features deeply nested grids within the "Projects" and "Check out" sections to maintain perfect alignment of icons and text.
- Interactive UI Elements: Includes hover effects with transformations and box-shadows on project cards and sidebar navigation for a tactile, responsive feel.
- Portfolio Integration: The dashboard functions as a hub, pulling in and linking to my previous works like the Digital Clock, Calculator, and Etch-a-Sketch.
- CSS Grid Mastery: Extensive use of
grid-template-columns,grid-template-rows, andgrid-areato create a professional "Holy Grail" dashboard layout. - SVG Integration: Handled custom iconography for the sidebar and project actions to ensure crisp visuals across all screen resolutions.
- Advanced Positioning: Managed complex layering and alignment using
justify-self,align-items, andgapwithin nested grid tracks. - Fractional Unit Scaling: Leveraged
frunits to ensure the main content area maintains visual priority over the navigation bars.
Built as part of The Odin Project Intermediate HTML and CSS. Soft shadows and subtle borders