Skip to main content

​
Theme System Overview

The portfolio uses Tailwind CSS’s theme extension system to create a cohesive design with glassmorphism effects, custom animations, and carefully crafted color palettes.

​
Color Palette

​
Primary Colors

The portfolio uses an indigo/purple color scheme. These colors appear in gradients, shadows, and accents:
  • Indigo: rgb(99, 102, 241) - Primary accent color
  • Purple: rgb(139, 92, 246) - Secondary accent color
These colors are used throughout shadows, gradients, and the scrollbar. Search for these RGB values in your config files to update the entire theme.

​
Glassmorphism Layers

The theme includes multiple glass effect layers for different use cases: 
'glass-light': 'rgba(255, 255, 255, 0.35)',
'glass-card': 'rgba(255, 255, 255, 0.3)',
'glass-nav': 'rgba(255, 255, 255, 0.8)',
'glass-modal': 'rgba(255, 255, 255, 0.9)',

​
Typography

​
Font Configuration

The portfolio uses a two-tier font system:
1

Header Font

Custom font for h1 and h2 elements:
tailwind.config.js
fontFamily: {
  'header': ['HeaderFont', 'Inter', 'sans-serif'],
}
2

Body Font

Inter is used for all body text:
src/index.css
body {
  font-family: 'Inter', sans-serif;
}

​
Customizing Fonts

To use your own custom font:
1

Add Font File

Place your font file (.woff2 recommended) in /public/fonts/
2

Update @font-face

src/index.css
@font-face {
  font-family: 'YourFontName';
  src: url('/fonts/your-font-file.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
3

Update Tailwind Config

tailwind.config.js
fontFamily: {
  'header': ['YourFontName', 'Inter', 'sans-serif'],
}
Use font-display: swap to prevent invisible text while fonts load.

​
Shadow System

Custom shadows create depth and enhance the glassmorphism effect:
tailwind.config.js
boxShadow: {
  'glass': '0 8px 32px 0 rgba(99, 102, 241, 0.15)',
  'glass-sm': '0 4px 16px 0 rgba(99, 102, 241, 0.1)',
  'glass-lg': '0 12px 40px 0 rgba(99, 102, 241, 0.2)',
  'glass-inset': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.3)',
}

​
Shadow Usage Guide

ClassUse CaseExample
shadow-glass-smSmall cards, buttonsNavigation items
shadow-glassStandard cardsProject cards
shadow-glass-lgModals, important elementsContact modal
shadow-glass-insetInput fieldsForm inputs

​
Backdrop Blur

Custom blur values for enhanced glassmorphism:
tailwind.config.js
backdropBlur: {
  xs: '2px',
}
Combined with Tailwind’s default blur values:
  • backdrop-blur-xs - 2px (custom)
  • backdrop-blur-sm - 4px
  • backdrop-blur-md - 12px
  • backdrop-blur-lg - 16px
  • backdrop-blur-xl - 24px
  • backdrop-blur-2xl - 40px
Heavy backdrop blur can impact performance on lower-end devices. Use backdrop-blur-xl and backdrop-blur-2xl sparingly.

​
Border System

Glass-themed borders with varying opacity:
tailwind.config.js
borderColor: {
  'glass': 'rgba(255, 255, 255, 0.4)',
  'glass-light': 'rgba(255, 255, 255, 0.6)',
  'glass-dark': 'rgba(255, 255, 255, 0.2)',
}
Use these classes:
  • border-glass-light - High contrast borders
  • border-glass - Standard borders
  • border-glass-dark - Subtle borders

​
Global Styles

​
Smooth Scrolling

src/index.css
html {
  scroll-behavior: smooth;
}

​
Mobile Optimizations

Remove tap highlights and default browser styles:
src/index.css
* {
  -webkit-tap-highlight-color: transparent;
}

input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

​
Creating a Custom Theme

To create your own color theme:
1

Choose Your Colors

Select primary and secondary colors. Use a tool like Coolors or Adobe Color.
2

Update Glass Colors

Replace RGBA values in tailwind.config.js backgroundColor and borderColor sections.
3

Update Shadows

Change the RGB values in boxShadow to match your primary color:
'glass': '0 8px 32px 0 rgba(YOUR, RGB, VALUES, 0.15)',
4

Update Gradients

Modify hero section gradients in src/index.css:
.hero-section {
  background: radial-gradient(ellipse at center top, 
                rgba(YOUR, RGB, VALUES, 0.1) 0%, transparent 50%);
}
5

Update Scrollbar

Change scrollbar gradient colors in src/index.css.

​
Theme Consistency Tips

Maintain contrast ratios: Ensure text remains readable on glass backgrounds. Use tools like WebAIM Contrast Checker.
Test on different backgrounds: Glassmorphism effects look different depending on what’s behind them. Test your theme with various background images.
When changing theme colors, rebuild your project (npm run build) to ensure Tailwind purges old classes and generates new ones.

Build docs developers (and LLMs) love

Get started for freeTalk to us