Styling Guide

Overview

Dev Showcase uses a modular CSS architecture with separate files for different components and features. All CSS files are located in wwwroot/css/ and are organized for easy maintenance and customization.

CSS File Structure

The portfolio’s styles are split into specialized files:

wwwroot/css/
├── base.css              # Variables, resets, typography
├── layout.css            # Layout structure, grid, sections
├── responsive.css        # Media queries and breakpoints
├── sidebar.css           # Navigation sidebar styles
├── header-particles.css  # Animated header background
├── panels-glow.css       # Interactive glow panels
├── skills.css            # Skills section components
├── projects.css          # Project cards and layouts
├── carousel.css          # Image carousel component
├── charts.css            # Chart.js visualizations
├── tech-logos.css        # Technology logo grid
└── modal.css             # Modal dialogs

This modular approach makes it easy to find and edit specific components without affecting others.

Core Files

base.css

Contains global styles, CSS variables, and typography:

/* CSS Custom Properties */
:root {
    --color-bg-primary: #0a0a0a;
    --color-text-primary: #ffffff;
    --color-accent-red: #ff1744;
    --transition-speed: 0.3s;
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Base Typography */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

Key features:

CSS custom properties for theming
Typography hierarchy (h1-h6)
Global element resets
Button and link base styles
Filter button styles

layout.css

Defines the main layout structure:

/* Main Layout Container */
.app-container {
    display: flex;
    min-height: 100vh;
}

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 280px; /* Sidebar width */
}

.main-content {
    flex: 1;
    padding: 2rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

Section animations:

.content-section {
    display: none;
    animation: fadeIn 0.4s var(--transition-easing);
}

.content-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

responsive.css

Contains all responsive breakpoints: Breakpoint hierarchy:

1200px: Large tablets and small desktops
1024px: Tablets (sidebar becomes collapsible)
768px: Small tablets and large phones
640px: Medium phones
480px: Small phones

Example breakpoint:

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        width: 280px;
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .main-wrapper {
        margin-left: 0 !important;
    }
    
    .menu-toggle {
        display: flex;
    }
}

Component Styling

Fixed navigation sidebar with profile and social links:

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    background-color: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 2rem 0 1.5rem;
    overflow-y: auto;
    z-index: 100;
}

Profile image:

.profile-image-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-accent-red);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.25);
}

Navigation buttons:

.nav-button {
    padding: 0.8rem 0.75rem;
    color: var(--color-text-tertiary);
    border-left: 3px solid transparent;
    transition: all var(--transition-speed) var(--transition-easing);
}

.nav-button.active {
    background-color: rgba(255, 23, 68, 0.08);
    color: var(--color-text-primary);
    border-left-color: var(--color-accent-red);
}

Skills Section (skills.css)

Skill progress bars and technology grids: Progress bar structure:

.stat-bar-container {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, 
        var(--color-accent-red), 
        var(--color-accent-red-light)
    );
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(255, 23, 68, 0.4);
}

.stat-bar.animated {
    width: var(--target-width, 0%);
}

Technology logo grid:

.logos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.65rem;
}

.logo-item {
    padding: 0.35rem 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: all var(--transition-speed) var(--transition-easing);
}

.logo-item:hover {
    background: rgba(255, 23, 68, 0.08);
    border-color: rgba(255, 23, 68, 0.3);
    transform: translateY(-3px);
}

Glow Panels (panels-glow.css)

Interactive panels with animated glow borders:

.glow-panel {
    position: relative;
    background-color: var(--color-bg-tertiary);
    border-radius: 12px;
    padding: 2.5rem;
    min-height: 200px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed);
}

.glow-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(
        var(--angle, 0deg),
        transparent 40%,
        var(--color-accent-red) 50%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--transition-speed);
}

.glow-panel:hover::before {
    opacity: 1;
}

.glow-panel:hover {
    transform: translateY(-8px);
}

The glow effect uses CSS masks for clean border animation. This creates a smooth, professional hover effect.

Education Cards (layout.css)

Academic and professional development cards:

.academic-training-card,
.professional-development-card {
    background-color: var(--color-bg-tertiary);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border);
    transition: all var(--transition-speed) var(--transition-easing);
}

.academic-training-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

Responsive Breakpoints

Detailed breakpoint behavior:

Desktop (> 1200px)

Full sidebar visible (280px)
2-column project grid
6-column technology logo grid
Large chart sizes

Tablet (1024px - 1200px)

Collapsible sidebar
Hamburger menu appears
2-column panels remain
Adjusted grid layouts

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .main-wrapper {
        margin-left: 0 !important;
    }
    
    .menu-toggle {
        display: flex;
    }
}

Mobile (768px - 1024px)

Single-column layouts
Stacked filter buttons
3-column logo grid
Reduced padding

@media (max-width: 768px) {
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }
    
    .main-content {
        padding: 1.5rem;
    }
    
    .skill-filter,
    .project-filter,
    .education-filter {
        flex-direction: column;
    }
    
    .filter button {
        width: 100%;
        text-align: center;
    }
}

Small Mobile (< 480px)

Full-width sidebar when open
Single-column everything
2-column logo grid
Minimal padding
Reduced font sizes

@media (max-width: 480px) {
    .sidebar {
        width: 100%;
    }
    
    .header-content h1 {
        font-size: 1.5rem;
    }
    
    .main-content {
        padding: 1rem;
    }
    
    .logos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Custom Animations

The portfolio includes several custom animations:

Fade In

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Used for section transitions when navigating.

Progress Bar Animation

Progress bars animate from 0 to their target width:

.stat-bar {
    width: 0;
    transition: width 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-bar.animated {
    width: var(--target-width, 0%);
}

Hover Transforms

Subtle lift effect on interactive elements:

.card:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

Modifying Component Styles

Change Card Hover Effect

Make cards lift more on hover:

.academic-training-card:hover {
    transform: translateY(-5px); /* Increased from -2px */
    box-shadow: 0 10px 30px rgba(255, 23, 68, 0.2); /* Add shadow */
}

Customize Progress Bar Colors

Change progress bar gradient:

.stat-bar {
    background: linear-gradient(90deg, #00d4ff, #0066ff); /* Blue gradient */
}

Adjust Border Radius

Make cards more or less rounded:

.glow-panel,
.academic-training-card {
    border-radius: 20px; /* More rounded (default: 12px) */
}

Change Animation Duration

Speed up or slow down animations:

:root {
    --transition-speed: 0.2s; /* Faster (default: 0.3s) */
}

.stat-bar {
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Faster bars */
}

Best Practices

Use CSS variables: Leverage existing custom properties for consistency
Maintain specificity: Follow the existing selector patterns
Test responsiveness: Check changes at all breakpoints
Preserve accessibility: Maintain hover states and focus indicators
Keep animations subtle: Avoid jarring or overly long animations

Common Customizations

Change sidebar width

Update the width in multiple locations:

.sidebar {
    width: 320px; /* Increase from 280px */
}

.main-wrapper {
    margin-left: 320px; /* Match sidebar width */
}

Adjust content max-width

Change the maximum width of main content:

.main-content {
    max-width: 1600px; /* Increase from 1400px */
}

Modify grid columns

Change the number of columns in grids:

.logos-grid {
    grid-template-columns: repeat(8, 1fr); /* From 6 */
}

.interactive-panels-grid {
    grid-template-columns: repeat(3, 1fr); /* From 2 */
}

Disable smooth scroll

Turn off smooth scrolling behavior:

html {
    scroll-behavior: auto; /* Changed from smooth */
}

Performance Tips

Avoid adding too many box-shadows or backdrop-filters (they’re performance-intensive)
Use transform for animations instead of top/left/margin (better GPU acceleration)
Keep animation durations under 0.5s for smooth perceived performance
Test on mobile devices to ensure smooth scrolling and animations

Browser Compatibility

The portfolio uses modern CSS features:

CSS Custom Properties (variables)
CSS Grid and Flexbox
CSS Masks (for glow effects)
Smooth scrolling
Backdrop filters

Supported browsers:

Chrome 88+
Firefox 86+
Safari 14+
Edge 88+

Debugging Styles

Tips for troubleshooting CSS issues:

Use browser DevTools: Inspect elements to see applied styles
Check CSS variable values: Variables inherit from :root
Verify selector specificity: More specific selectors override general ones
Test with !important: Temporarily use to identify override issues
Clear cache: Hard refresh to see CSS changes

Getting Started

Core Concepts

Components

Customization

Deployment

Overview

CSS File Structure

Core Files

base.css

layout.css

responsive.css

Component Styling

Sidebar (sidebar.css)

Skills Section (skills.css)

Glow Panels (panels-glow.css)

Education Cards (layout.css)

Responsive Breakpoints

Desktop (> 1200px)

Tablet (1024px - 1200px)

Mobile (768px - 1024px)

Small Mobile (< 480px)

Custom Animations

Fade In

Progress Bar Animation

Hover Transforms

Modifying Component Styles

Change Card Hover Effect

Customize Progress Bar Colors

Adjust Border Radius

Change Animation Duration

Best Practices

Common Customizations

Performance Tips

Browser Compatibility

Debugging Styles

Next Steps

Theming

Content Customization

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Components

Customization

Deployment

​Overview

​CSS File Structure

​Core Files

​base.css

​layout.css

​responsive.css

​Component Styling

​Sidebar (sidebar.css)

​Skills Section (skills.css)

​Glow Panels (panels-glow.css)

​Education Cards (layout.css)

​Responsive Breakpoints

​Desktop (> 1200px)

​Tablet (1024px - 1200px)

​Mobile (768px - 1024px)

​Small Mobile (< 480px)

​Custom Animations

​Fade In

​Progress Bar Animation

​Hover Transforms

​Modifying Component Styles

​Change Card Hover Effect

​Customize Progress Bar Colors

​Adjust Border Radius

​Change Animation Duration

​Best Practices

​Common Customizations

​Performance Tips

​Browser Compatibility

​Debugging Styles

​Next Steps

Theming

Content Customization

Build docs developers (and LLMs) love

Overview

CSS File Structure

Core Files

base.css

layout.css

responsive.css

Component Styling

Sidebar (sidebar.css)

Skills Section (skills.css)

Glow Panels (panels-glow.css)

Education Cards (layout.css)

Responsive Breakpoints

Desktop (> 1200px)

Tablet (1024px - 1200px)

Mobile (768px - 1024px)

Small Mobile (< 480px)

Custom Animations

Fade In

Progress Bar Animation

Hover Transforms

Modifying Component Styles

Change Card Hover Effect

Customize Progress Bar Colors

Adjust Border Radius

Change Animation Duration

Best Practices

Common Customizations

Performance Tips

Browser Compatibility

Debugging Styles

Next Steps