Skip to main content

​
Overview

Dev Showcase uses CSS custom properties (variables) to make theming simple and maintainable. All theme variables are defined in wwwroot/css/base.css and can be easily customized to match your personal brand.

​
Color Scheme

The portfolio uses a dark theme with customizable accent colors. All colors are defined as CSS custom properties in the :root selector.

​
Primary Colors

:root {
    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #1a1a1a;
}
  • Primary Background (--color-bg-primary): Main page background
  • Secondary Background (--color-bg-secondary): Sidebar and card backgrounds
  • Tertiary Background (--color-bg-tertiary): Panel and button backgrounds

​
Text Colors

:root {
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);
}
  • Primary Text: Headings and important content
  • Secondary Text: Body text and descriptions
  • Tertiary Text: Subtle labels and metadata

​
Accent Colors

The red accent color is used throughout the UI for highlights, active states, and call-to-action elements: 
:root {
    --color-accent-red: #ff1744;
    --color-accent-red-light: #ff4569;
    --color-accent-btn-hover: rgba(255, 255, 255, 0.08);
}
Where accent colors are used:
  • Active navigation items
  • Hover effects on links and buttons
  • Progress bars and charts
  • Border highlights on cards
  • Download CV button
  • Social media icon hovers

​
Border Colors

:root {
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-hover: #404040;
}

​
Changing Theme Colors

To customize your theme colors, edit the values in wwwroot/css/base.css:

​
Example: Blue Accent Theme

:root {
    --color-accent-red: #0066ff;
    --color-accent-red-light: #3385ff;
}

​
Example: Light Background Theme

:root {
    --color-bg-primary: #f5f5f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #e8e8e8;
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.7);
    --color-text-tertiary: rgba(0, 0, 0, 0.45);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-hover: #cccccc;
}
After changing colors, refresh your browser to see the changes. Some browsers may require a hard refresh (Ctrl+Shift+R or Cmd+Shift+R).

​
Typography Settings

Typography is configured in wwwroot/css/base.css:

​
Font Family

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}
To use a custom font, update the font-family property: 
body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
If using a web font from Google Fonts or similar, remember to add the font link to your HTML head section.

​
Heading Sizes

Heading sizes are defined with a consistent hierarchy: 
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
Location references:
  • H1: Used in header section (header-content h1)
  • H2: Section titles (Skills, Projects, Education)
  • H3: Subsection titles and card headers
  • H4: Education cards and project details
  • H5: Skill categories

​
Font Weights

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
Adjust heading weight for bolder or lighter headings: 
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bolder */
}

​
Transition Settings

Smooth animations are controlled by transition variables: 
:root {
    --transition-speed: 0.3s;
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
  • Speed: Duration of hover effects and animations (default: 0.3s)
  • Easing: Animation timing function for smooth transitions

​
Adjust Animation Speed

For faster animations: 
:root {
    --transition-speed: 0.2s;
}
For slower, more elegant animations: 
:root {
    --transition-speed: 0.5s;
}

​
Component-Specific Theming

The sidebar uses theme colors from wwwroot/css/sidebar.css: 
.sidebar {
    background-color: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
}
Active navigation items: 
.nav-button.active {
    background-color: rgba(255, 23, 68, 0.08);
    border-left-color: var(--color-accent-red);
}

​
Glow Panel Effects

Interactive panels with animated glow borders (defined in wwwroot/css/panels-glow.css): 
.glow-panel::before {
    background: linear-gradient(
        var(--angle, 0deg),
        transparent 40%,
        var(--color-accent-red) 50%,
        transparent 60%
    );
}
The glow effect uses the accent color variable, so changing --color-accent-red will automatically update the glow color.

​
Button Styling

Buttons throughout the site use consistent theming: 
.filter button.active {
    background-color: var(--color-accent-red);
    color: #ffffff;
}
CV download button: 
.cv-download-btn {
    background-color: var(--color-accent-red);
    color: #ffffff;
}

.cv-download-btn:hover {
    box-shadow: 0 6px 16px rgba(255, 23, 68, 0.35);
}

​
Best Practices

  • Test contrast: Ensure text remains readable with your color choices
  • Maintain consistency: Use the same accent color throughout
  • Check hover states: Test all interactive elements after color changes
  • Preview on multiple devices: Colors may appear different on various screens
Avoid making text colors too close to background colors, as this will reduce readability. Maintain a contrast ratio of at least 4.5:1 for normal text.

​
Next Steps

Content Customization

Learn how to update text, projects, and personal information

Styling Guide

Deep dive into CSS architecture and component styling