How I Actually Built This Portfolio

Intro

This site didn’t fall from the sky. I built it. From scratch. With too much coffee and not enough sleep.

The goal wasn’t perfection (gross) — it was me. A mix of code, art, and just enough chaos to keep it interesting. If it feels warm, earthy, and a little stubborn, that’s intentional.

Colors: The Mood Board That Stuck

I didn’t chase trends — I picked colors that felt right. Browns, corals, creams… like a fancy café menu but for CSS variables. Light mode? Cozy. Dark mode? Still cozy, just moodier.

I basically curated a palette that makes sense whether you’re scrolling at 10 AM or 2 AM.

Primary Color Palette

Here's the actual color palette I implemented in my CSS:

Earthy Artistic Palette

For a more sophisticated and artistic feel, I created a secondary palette with nature-inspired names:

Dark Mode Palette

The dark mode implementation uses carefully selected colors that maintain the warm, earthy feel while providing excellent contrast and readability:

Layout & Inspiration

Instagram gave me the idea: clean, card-based, image-friendly. But unlike Instagram, you actually leave my site with knowledge, not a dopamine hangover.

The rules I followed:

• Hierarchy: Headlines pop, text breathes.
• Cards everywhere: Projects, blogs, gallery — neat little boxes.
• Animations: Subtle, not “Las Vegas billboard.”
• Responsive: It works on your grandma’s phone.

Tech Stack

Kept it modern but lightweight:

• HTML + CSS (with variables galore)
• Vanilla JS (no frameworks because I like pain)
• Bootstrap 5 (for the grid, not the bloat)
• AOS (scroll magic without writing 500 lines of keyframes)

CSS lives in tidy little modules: base, typography, layout, components… so I don’t lose my mind later.

CSS Architecture

I organized the CSS using a modular approach with separate files for different concerns:

css/
├── main.css              # Main entry point with imports
├── modules/
│   ├── base.css          # CSS variables and global styles
│   ├── typography.css    # Font definitions and text styles
│   ├── layout.css        # Grid and layout utilities
│   ├── components.css    # Reusable component styles
│   ├── sections.css      # Page section styles
│   ├── blog.css          # Blog-specific styles
│   ├── dark-theme.css    # Dark mode overrides
│   ├── animations.css    # Keyframes and transitions
│   └── responsive.css    # Media queries and mobile styles

CSS Variables Implementation

The color system is implemented using CSS custom properties, making theme switching seamless:

:root {
    /* Base Colors */
    --saddle: #7A5B4C;
    --star-dust: #C0C0C0;
    --coral-tree: #E79B8C;
    --woodsmoke: #1A1A1A;
    
    /* Earthy Artistic Palette */
    --milk-chocolate: #7C4A2D;
    --metallic-bronze: #C49B6A;
    --laurel-green: #B0C4AC;
    --cookies-cream: #EDE1D2;
    --coconut: #F6F0E9;
    --palm-oil: #4D200E;
    
    /* Semantic Usage */
    --primary-bg: var(--cookies-cream);
    --secondary-bg: var(--coconut);
    --header-color: var(--milk-chocolate);
    --text-color: var(--deepwood-shade);
    --accent-color: var(--coral-tree);
}

Dark Mode Implementation

The dark mode uses a data attribute approach for clean theme switching:

[data-theme="dark"] {
    --primary-bg: #1A1A1A;
    --secondary-bg: #232323;
    --card-bg: rgba(255, 255, 255, 0.03);
    --header-color: #F8F8F8;
    --text-color: rgba(255, 255, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.1);
}

Features I Actually Cared About

• Dark mode toggle that remembers your vibe
• Scroll-triggered animations (because stillness is boring)
• Projects + art in one home, but they don’t fight
• Accessible navigation (keyboard warriors, you’re welcome)
• Gallery with lightbox, because clicking images should feel good

Performance Optimizations

To ensure fast loading and smooth user experience, I implemented several optimizations:

• CSS Organization: Modular CSS with selective imports to reduce bundle size
• Image Optimization: Proper sizing and lazy loading for gallery images
• Font Loading: Google Fonts with display=swap for better performance
• Minimal Dependencies: Only essential external libraries (Bootstrap, AOS, Font Awesome)
• Efficient Animations: CSS transforms and opacity for smooth 60fps animations

The “Oh No” Moments

Biggest challenge? Making my art and projects coexist without looking like step-siblings. Solved it by:

• Same color palette everywhere
• One unified nav bar
• Consistent card system

Accessibility Considerations

Accessibility was a priority throughout the development process:

• Semantic HTML: Proper heading hierarchy and landmark elements
• ARIA Labels: Descriptive labels for interactive elements
• Color Contrast: WCAG AA compliant color combinations
• Keyboard Navigation: Full keyboard accessibility for all interactive elements
• Screen Reader Support: Proper alt text and descriptive content

What’s Next

• Adding filters for projects (because not everything belongs in one bucket)
• Expanding the blog (a.k.a. more yapping)
• Gallery upgrades (collections, deeper views)
• Maybe PWA stuff if I feel like playing with offline mode

Wrap-Up

This portfolio is basically a sandbox where my code and art hang out. It’s systematic but not sterile, creative but not chaotic. Every decision — from the coral accent to the scroll animations — was just me saying: yeah, that feels right.

If you walk away thinking, “This feels like the person who made it” … mission accomplished.