Style Guide

This style guide showcases the visual elements and components used throughout my portfolio website. It demonstrates typography, colors, buttons, and other UI elements that make up my digital presence.

Color Palette

These colors form the foundation of the visual identity across my portfolio.

#0f0f0f - Background

#ffffff - Text

#3498db - Accent

#2c2c2c - Secondary

#1a1a1a to #000000 - Gradient

Typography

Typography plays a crucial role in establishing the personality and readability of the portfolio.

Heading Font: Avenir / Nunito

Heading 1 (4rem)

Heading 2 (2.5rem)

Heading 3 (1.75rem)

Body Font: Avenir / Nunito / Inter

Body text (1rem) - The quick brown fox jumps over the lazy dog.

Small text (0.875rem) - The quick brown fox jumps over the lazy dog.

Bold text - The quick brown fox jumps over the lazy dog.

Italic text - The quick brown fox jumps over the lazy dog.

Buttons & UI Elements

Consistent button styles help users navigate and interact with the portfolio.

Form Elements

Name

Message

Skills Visualization

HTML

CSS

JavaScript

React

Code Display

Code snippets are displayed with appropriate styling for readability.

// Variables
:root {
    --background-color: #0f0f0f;
    --text-color: #ffffff;
    --accent-color: #3498db;
    --secondary-color: #2c2c2c;
}

// Modern Button Style
.button {
    background: var(--accent-color);
    color: var(--text-color);
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

Logo

The logo is a minimalist representation of my personal brand.

MS.

Imagery

Images across the portfolio follow these guidelines:

Dark, modern aesthetic
High contrast visuals
Clean, minimalist approach
Technology-focused imagery

Tone of Voice

The communication style across the portfolio is:

Professional and confident
Clear and concise
Technical but accessible
Modern and forward-thinking

Spacing

Consistent spacing helps create rhythm and hierarchy in the layout.

Small (0.5rem)

Medium (1rem)

Large (2rem)

Extra Large (4rem)