Theming & Styling

The Astro Portfolio uses Tailwind CSS v4 for styling, with custom CSS variables and theme configurations for easy customization.

Color System

The portfolio uses a combination of Tailwind utility classes and CSS custom properties for theming.

Background Gradients

The main background uses a sophisticated gradient system with blur effects:

<!-- src/layouts/Layout.astro -->
<div
  class="absolute inset-0 z-[-2] min-h-screen w-full 
  bg-gradient-to-br from-indigo-100 via-slate-100 to-blue-50
  dark:from-indigo-900 dark:via-slate-900 dark:to-blue-900

  before:content-[''] before:absolute before:inset-0 
  before:bg-[radial-gradient(circle_at_top_left,rgba(99,102,241,0.25),transparent_50%),radial-gradient(circle_at_bottom_right,rgba(147,197,253,0.25),transparent_50%)]
  dark:before:bg-[radial-gradient(circle_at_top_left,rgba(59,130,246,0.25),transparent_50%),radial-gradient(circle_at_bottom_right,rgba(139,92,246,0.2),transparent_50%)]
  
  before:blur-3xl"
></div>

Customization Options:

Change gradient direction:
- bg-gradient-to-br → bg-gradient-to-tr (top-right)
- bg-gradient-to-bl → bg-gradient-to-tl (top-left)

Modify gradient colors:

<!-- Light mode: Purple to Pink -->
from-purple-100 via-pink-100 to-rose-50

<!-- Dark mode: Deep purple to deep pink -->
dark:from-purple-900 dark:via-pink-900 dark:to-rose-900

Adjust radial gradients:
- Change position: circle_at_top_left → circle_at_center
- Modify colors: rgba(99,102,241,0.25) (adjust RGB and opacity)
- Adjust spread: transparent_50% → transparent_70%

Accent Colors

The portfolio uses yellow/gold as the primary accent color:

/* src/styles/global.css */
:root {
  --accent: #d1d5dc;
  --accent-dark: #2366d1;
  --black: #333;
  --gray: #666;
  --gray-light: #f5f5f5;
  --gray-dark: #444;
}

Yellow Accent Usage:

Job positions: text-yellow-400
Bullet points: text-yellow-400
Strong text in bio: [&>p>strong]:text-yellow-500 dark:[&>p>strong]:text-yellow-100
Modal headings: text-[#fdc700]

To Change Accent Color:

To Blue:

<!-- Replace yellow-400 with blue-400 -->
text-blue-400
dark:text-blue-300

To Green:
```
text-green-500
dark:text-green-400
```

Custom Color:

<!-- Use hex color directly -->
text-[#ff6b6b]
dark:text-[#ffa8a8]

Tool Badge Colors

Tool badges are colored by category:

// src/components/Projects.astro
function getToolClass(toolType) {
  switch(toolType) {
    case 'frontend':
      return 'bg-blue-600 text-white';
    case 'backend':
      return 'bg-green-600 text-white';
    case 'database':
      return 'bg-yellow-600 text-black';
    case 'framework':
      return 'bg-purple-600 text-white';
    default:
      return 'bg-gray-600 text-white';
  }
}

Customizing Badge Colors:

function getToolClass(toolType) {
  switch(toolType) {
    case 'frontend':
      return 'bg-cyan-500 text-white';      // Cyan for frontend
    case 'backend':
      return 'bg-emerald-600 text-white';   // Emerald for backend
    case 'database':
      return 'bg-amber-500 text-black';     // Amber for databases
    case 'framework':
      return 'bg-violet-600 text-white';    // Violet for frameworks
    default:
      return 'bg-slate-600 text-white';     // Slate default
  }
}

Typography

The portfolio uses the Onest Variable font:

// src/layouts/Layout.astro
import "@fontsource-variable/onest"

/* Applied globally */
html {
  font-family: "Onest Variable", sans-serif;
  scroll-behavior: smooth;
}

Changing the Font

Install a new font:
```
npm install @fontsource-variable/inter
```
Import in Layout:
```
import "@fontsource-variable/inter"
```

Update CSS:

html {
  font-family: "Inter Variable", sans-serif;
}

Typography Scale

Headings use various sizes:

<!-- Main heading -->
<h1 class="text-4xl font-bold sm:text-5xl">

<!-- Section heading -->
<h2 class="text-2xl font-bold">

<!-- Project title -->
<h3 class="text-2xl font-bold">

Adjusting Typography:

<!-- Larger headings -->
<h1 class="text-5xl font-bold sm:text-6xl lg:text-7xl">

<!-- Different font weight -->
<h2 class="text-2xl font-semibold"> <!-- 600 instead of 700 -->

Dark Mode

Dark mode is handled with Tailwind’s dark: prefix and works automatically based on system preferences.

Key Dark Mode Styles

<!-- Text colors -->
class="text-gray-700 dark:text-gray-300"
class="text-gray-800 dark:text-white"
class="text-gray-600 dark:text-gray-400"

<!-- Background colors -->
class="bg-white dark:bg-gray-800"
class="bg-gray-50 dark:bg-gray-700"

<!-- Border colors -->
class="border-gray-200 dark:border-gray-700"

Customizing Dark Mode

Change dark background:

<!-- From gray to slate -->
dark:bg-slate-800
dark:bg-slate-900

Adjust text contrast:

<!-- Higher contrast -->
dark:text-gray-100  <!-- instead of gray-300 -->

<!-- Lower contrast -->
dark:text-gray-400  <!-- instead of gray-300 -->

Dark mode gradient:

<!-- Edit in Layout.astro -->
dark:from-slate-950 dark:via-gray-900 dark:to-black

Component Styling

Profile Image

<!-- src/components/AboutMe.astro -->
<img 
  src={aboutMe.profile_image} 
  alt="Profile photo" 
  class="w-64 h-full p-1 rotate-3 aspect-square rounded-2xl 
         bg-black/20 dark:bg-yellow-500/5 
         ring-1 ring-black/70 dark:ring-white/20" 
/>

Customization:

<!-- No rotation -->
class="rotate-0"

<!-- Different ring color -->
ring-blue-500 dark:ring-blue-400

<!-- Rounder corners -->
rounded-3xl

<!-- Different background -->
bg-gradient-to-br from-blue-500/10 to-purple-500/10

Project Cards

<!-- src/components/Projects.astro -->
<div class="relative flex flex-col items-center overflow-clip rounded-xl 
            shadow-xl transition duration-500 ease-in-out transform 
            md:group-hover:-translate-y-1 md:group-hover:shadow-2xl 
            lg:border lg:border-gray-800 lg:hover:border-gray-700 
            lg:hover:bg-gray-800/50">

Customization:

<!-- More hover lift -->
md:group-hover:-translate-y-2

<!-- Different border color -->
lg:border-blue-700 lg:hover:border-blue-500

<!-- Colored hover background -->
lg:hover:bg-blue-900/20

<!-- Faster transition -->
transition duration-300

The header has a scroll-based blur animation:

/* src/layouts/Layout.astro */
#header-nav {
  animation: blur linear both 0.5s;
  animation-timeline: scroll();
  animation-range: 0 500px;
}

@keyframes blur {
  from {
    background-color: transparent;
    backdrop-filter: blur(0px);
  }
  to {
    backdrop-filter: blur(20px);
    background-color: rgba(229, 229, 229, 0.8);
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
}

Customization:

/* Trigger earlier -->
animation-range: 0 300px;

/* More blur -->
backdrop-filter: blur(30px);

/* Different background -->
background-color: rgba(255, 255, 255, 0.9);

/* Colored tint -->
background-color: rgba(59, 130, 246, 0.1); /* Blue tint */

Animations

Pulse Animation

Used for the tool indicator:

/* src/components/Tools.astro */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.7);
}

.-top-5 {
  top: calc(var(--spacing) * 1.2);
}

<!-- Pulse indicator -->
<span class="absolute -top-5 -right-0 w-2 h-2 
             bg-[#fdc700] rounded-full shadow animate-pulse"></span>

Customization:

<!-- Larger pulse -->
w-3 h-3

<!-- Different color -->
bg-blue-500

<!-- Faster pulse -->
animate-[pulse_1s_ease-in-out_infinite]

<!-- Slower pulse -->
animate-[pulse_3s_ease-in-out_infinite]

Hover Effects

<!-- Scale on hover -->
class="transition hover:scale-110"

<!-- Image scale -->
class="md:scale-110 md:group-hover:scale-105"

Custom Hover Effects:

<!-- Rotate on hover -->
class="transition-transform hover:rotate-3"

<!-- Glow effect -->
class="transition hover:shadow-lg hover:shadow-blue-500/50"

<!-- Slide up -->
class="transition-transform hover:-translate-y-1"

Tailwind Configuration

The project uses Tailwind CSS v4 via Vite plugin:

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()]
  }
});

Extending Tailwind

Since Tailwind v4 uses CSS-based configuration, extend via CSS variables:

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-display: "Onest Variable", sans-serif;
  --radius-card: 1rem;
}

Using custom theme values:

<div class="bg-primary text-white rounded-[--radius-card]">
  Custom themed card
</div>

Responsive Design

The portfolio uses Tailwind’s responsive prefixes:

<!-- Mobile first -->
<div class="flex-col md:flex-row">
  <!-- Stack on mobile, row on tablet+ -->
</div>

<h1 class="text-4xl sm:text-5xl lg:text-6xl">
  <!-- Scales up on larger screens -->
</h1>

Breakpoints:

sm: - 640px
md: - 768px
lg: - 1024px
xl: - 1280px
2xl: - 1536px

Custom Scrollbar

/* src/components/Tools.astro */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) rgba(243, 244, 246, 0.1);
}

.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 8px;
}

Customization:

/* Colored scrollbar -->
scrollbar-color: rgba(59, 130, 246, 0.5) transparent;

/* Thicker scrollbar -->
.custom-scrollbar::-webkit-scrollbar {
  height: 10px;
}

/* Rounded more -->
border-radius: 12px;

Best Practices

Consistent Spacing: Use Tailwind’s spacing scale (p-4, mt-8, gap-6)
Color Harmony: Stick to 2-3 main colors plus neutrals
Dark Mode: Always test both light and dark modes
Accessibility: Maintain sufficient color contrast (WCAG AA minimum)
Performance: Use Tailwind’s JIT mode (enabled by default in v4)
Mobile First: Design for mobile, enhance for desktop

Next Steps

Learn about Managing Content via Supabase
Deploy your customized portfolio with Vercel
Explore Components for detailed component customization

Getting Started

Components

Configuration

Deployment

Customization

Color System

Background Gradients

Accent Colors

Tool Badge Colors

Typography

Changing the Font

Typography Scale

Dark Mode

Key Dark Mode Styles

Customizing Dark Mode

Component Styling

Profile Image

Project Cards

Navigation Blur Effect

Animations

Pulse Animation

Hover Effects

Tailwind Configuration

Extending Tailwind

Responsive Design

Custom Scrollbar

Best Practices

Next Steps

Build docs developers (and LLMs) love

Getting Started

Components

Configuration

Deployment

Customization

Documentation Index

​Color System

​Background Gradients

​Accent Colors

​Tool Badge Colors

​Typography

​Changing the Font

​Typography Scale

​Dark Mode

​Key Dark Mode Styles

​Customizing Dark Mode

​Component Styling

​Profile Image

​Project Cards

​Navigation Blur Effect

​Animations

​Pulse Animation

​Hover Effects

​Tailwind Configuration

​Extending Tailwind

​Responsive Design

​Custom Scrollbar

​Best Practices

​Next Steps

Build docs developers (and LLMs) love

Color System

Background Gradients

Accent Colors

Tool Badge Colors

Typography

Changing the Font

Typography Scale

Dark Mode

Key Dark Mode Styles

Customizing Dark Mode

Component Styling

Profile Image

Project Cards

Navigation Blur Effect

Animations

Pulse Animation

Hover Effects

Tailwind Configuration

Extending Tailwind

Responsive Design

Custom Scrollbar

Best Practices

Next Steps