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

Build docs developers (and LLMs) love

Get started for freeTalk to us