Theme Customization

Overview

The portfolio uses a cohesive visual theme built around red as the primary brand color with gradients, shadows, and carefully chosen backgrounds for different sections.

Color Scheme

The site’s color palette is designed for modern, professional look:

Primary Palette

Brand Red: Used for CTAs, accents, and interactive elements
Neutral Gray: Used for text, backgrounds, and borders
White: Clean backgrounds for content cards

Where Colors Are Used

Hero Section
Navigation
Sections

src/components/sections/Hero.astro

<section class="bg-gradient-to-r from-red-500 to-red-700">
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <h1 class="text-white">Hero Title</h1>
  <p class="text-red-100">Subtitle</p>
</section>

The hero uses a red gradient with a dark overlay for depth.

src/components/navigation/Header.astro

<!-- Transparent on scroll up -->
<nav class="text-white">
  <!-- Scrolled state -->
  <nav class="bg-white shadow-md">
    <a class="text-red-600">Logo</a>
    <a class="text-gray-600 hover:text-red-600">Link</a>
  </nav>
</nav>

Navigation transitions from transparent to white background on scroll.

src/pages/index.astro

<!-- Alternating section backgrounds -->
<Section background="bg-white">Projects</Section>
<Section background="bg-red-50">Experience</Section>
<Section background="bg-white">Achievements</Section>
<Section background="bg-gray-50">About</Section>

Sections alternate between white, red-50, and gray-50 for visual rhythm.

Gradients

Gradients are used strategically for visual interest and emphasis.

Primary Gradient (Red)

.bg-gradient-to-r from-red-500 to-red-700  /* Hero backgrounds */
.bg-gradient-to-r from-red-600 to-red-700  /* Buttons */

Text Gradients

<h2 class="bg-gradient-to-r from-gray-900 to-red-600 bg-clip-text text-transparent">
  Gradient Text
</h2>

This creates a smooth transition from dark gray to red in headings.

Customizing Gradients

<section class="bg-gradient-to-r from-blue-500 to-blue-700">
  <button class="bg-gradient-to-r from-blue-600 to-blue-700">
    Call to Action
  </button>
</section>

Background Colors

Section Backgrounds

The portfolio uses different backgrounds to create visual hierarchy:

src/components/ui/Section.astro

const background = "bg-white"; // Default

// Options:
// - bg-white: Clean white sections
// - bg-gray-50: Subtle gray
// - bg-red-50: Light red tint
// - bg-gradient-to-r from-red-500 to-red-700: Bold gradients

Base Layout Background

src/layouts/BaseLayout.astro

<body class="bg-gray-50 text-gray-800">

The body uses bg-gray-50 as the default canvas color.

Creating Custom Backgrounds

Add custom background utility

src/styles/global.css

@layer utilities {
  .bg-pattern {
    background-color: #f9fafb;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e5e7eb' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}

Use in components

<Section background="bg-pattern">
  <SectionHeader title="Projects" />
</Section>

Shadows

The theme uses elevation through shadows:

Shadow Scale

/* Cards */
shadow-lg        /* Default card shadow */
hover:shadow-xl  /* Hovered card shadow */

/* Navigation */
shadow-md        /* Header shadow when scrolled */

/* Buttons */
shadow-lg        /* Primary button shadow */
hover:shadow-xl  /* Button hover state */

Custom Shadow Example

src/components/ui/Card.astro

<div class="shadow-lg hover:shadow-xl transition-all duration-300">
  <!-- Card content -->
</div>

Shadows create depth and hierarchy. Use them sparingly for maximum impact.

Overlays

Overlays are used to improve text readability on backgrounds:

Dark Overlay on Hero

src/components/sections/Hero.astro

<section class="relative bg-gradient-to-r from-red-500 to-red-700">
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <div class="relative z-10">
    <!-- Content with improved contrast -->
  </div>
</section>

Customizing Overlays

<div class="absolute inset-0 bg-white opacity-20"></div>

Theme Variants

Here are complete theme examples you can implement:

Blue Professional Theme

Update color references

Replace red- with blue- throughout:

from-red-500 to-red-700 → from-blue-500 to-blue-700
text-red-600 → text-blue-600
hover:text-red-600 → hover:text-blue-600
bg-red-50 → bg-blue-50
bg-red-100 → bg-blue-100

Update components

src/components/ui/Button.astro

const variants = {
  primary: "bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800",
  // ...
};

Dark Theme

Update base layout

src/layouts/BaseLayout.astro

<body class="bg-gray-900 text-gray-100">
  <slot />
</body>

Update section backgrounds

<Section background="bg-gray-800">Content</Section>
<Section background="bg-gray-900">Content</Section>

Update card styles

src/components/ui/Card.astro

const variants = {
  default: "bg-gray-800 shadow-lg hover:shadow-xl",
  // ...
};

Update text colors

Replace:

text-gray-800 → text-gray-100
text-gray-600 → text-gray-300
bg-white → bg-gray-800

Minimal Monochrome Theme

<section class="bg-black">
  <h1 class="text-white">Minimal Hero</h1>
  <p class="text-gray-400">Understated subtitle</p>
</section>

Border Styles

The theme uses subtle borders for definition:

<!-- Card borders -->
<div class="border border-gray-200">

<!-- Footer dividers -->
<div class="border-t border-gray-100">

<!-- Outline buttons -->
<button class="border-2 border-red-600">

Customizing Borders

/* Border widths */
border      /* 1px */
border-2    /* 2px */
border-4    /* 4px */

/* Border colors */
border-gray-200   /* Light borders */
border-gray-300   /* Medium borders */
border-red-600    /* Accent borders */

Rounded Corners

The design uses generous rounded corners for a modern feel:

<!-- Buttons -->
<button class="rounded-full">Full rounded</button>

<!-- Cards -->
<div class="rounded-2xl">Large rounded corners</div>

<!-- Badges -->
<span class="rounded-full">Pill shape</span>

Keep rounded corners consistent across similar elements for visual harmony.

Spacing System

The theme uses Tailwind’s spacing scale:

<!-- Section padding -->
<section class="py-20">  <!-- 5rem vertical padding -->

<!-- Container padding -->
<div class="px-4">  <!-- 1rem horizontal padding -->

<!-- Element gaps -->
<div class="gap-8">  <!-- 2rem gap in grid/flex -->
<div class="space-y-6">  <!-- 1.5rem vertical spacing -->

Theme Consistency Checklist

When customizing the theme, ensure:

Primary color is used consistently across buttons, links, and accents
Section backgrounds alternate for visual rhythm
Hover states use the same color transitions
Shadows are consistent across similar elements
Text contrast meets accessibility standards (WCAG AA)
Gradients use adjacent color shades (e.g., 500-700)
Border colors complement the overall palette

Getting Started

Content Management

Customization

Components

Deployment

Reference

Overview

Color Scheme

Primary Palette

Where Colors Are Used

Gradients

Primary Gradient (Red)

Text Gradients

Customizing Gradients

Background Colors

Section Backgrounds

Base Layout Background

Creating Custom Backgrounds

Shadows

Shadow Scale

Custom Shadow Example

Overlays

Dark Overlay on Hero

Customizing Overlays

Theme Variants

Blue Professional Theme

Dark Theme

Minimal Monochrome Theme

Border Styles

Customizing Borders

Rounded Corners

Spacing System

Theme Consistency Checklist

Resources

Build docs developers (and LLMs) love

Getting Started

Content Management

Customization

Components

Deployment

Reference

​Overview

​Color Scheme

​Primary Palette

​Where Colors Are Used

​Gradients

​Primary Gradient (Red)

​Text Gradients

​Customizing Gradients

​Background Colors

​Section Backgrounds

​Base Layout Background

​Creating Custom Backgrounds

​Shadows

​Shadow Scale

​Custom Shadow Example

​Overlays

​Dark Overlay on Hero

​Customizing Overlays

​Theme Variants

​Blue Professional Theme

​Dark Theme

​Minimal Monochrome Theme

​Border Styles

​Customizing Borders

​Rounded Corners

​Spacing System

​Theme Consistency Checklist

​Resources

Build docs developers (and LLMs) love

Overview

Color Scheme

Primary Palette

Where Colors Are Used

Gradients

Primary Gradient (Red)

Text Gradients

Customizing Gradients

Background Colors

Section Backgrounds

Base Layout Background

Creating Custom Backgrounds

Shadows

Shadow Scale

Custom Shadow Example

Overlays

Dark Overlay on Hero

Customizing Overlays

Theme Variants

Blue Professional Theme

Dark Theme

Minimal Monochrome Theme

Border Styles

Customizing Borders

Rounded Corners

Spacing System

Theme Consistency Checklist

Resources