Style Guide

Website Style Components

This page demonstrates all the custom style elements used throughout the website and shows how to implement them.

Hero Profile Section

The main hero section uses a two-column flex layout with a circular profile image and content area.

Implementation:

<div class="hero-profile-section">
<div class="profile-container">
<div class="profile-image-col">

![Your Name](resources/yourimage.jpg){.profile-image}

</div>
<div class="profile-content-col">

# [Your Name]{.gradient-text}

**Your Title**  
*Your Subtitle*

Your description text here...

</div>
</div>
</div>

Example:

Demo Profile

Style Guide Example
Demonstrating Profile Layout

This shows how the hero profile section displays with the circular image and gradient text effect.

Gradient Text Effect

The animated gradient text effect cycles through multiple colors with smooth transitions.

Implementation:

# [Your Gradient Text]{.gradient-text}

Examples:

Main Heading with Gradient

Regular Heading (No Gradient)

Color Scheme:

#4C7C71 (Teal)
#2B3949 (Dark Blue)
#3F5877 (Medium Blue)
#e76f52 (Orange)

Section Container Layout

Two-column sections with a fixed-width header column and flexible content column.

Implementation:

<div class="section-container">
<div class="section-header-col">

## Section Title

</div>
<div class="section-content-col">

Your content here...

</div>
</div>

Example:

Highlights

Bold Achievement - Description of the achievement
Another Achievement - More details about accomplishments
Third Achievement - Additional information

Experience

Job Title (2020-2025)
Company Name
Description of role and responsibilities.

Previous Role (2018-2020)
Previous Company
Description of previous experience.

Custom List Styling

Lists use custom arrow bullet points instead of standard bullets.

Implementation:

<div class="section-content-col">

- List item one
- List item two  
- List item three

</div>

Example:

This list uses custom arrow bullets
Each item has the orange arrow style
The styling is applied automatically within section-content-col

Typography Hierarchy

The website uses Open Sans font family with specific sizing and colors.

Implementation:

H1: 3rem, gradient text available with .gradient-text
H2: 1.75rem, color #2B3949
Body: Standard sizing with Open Sans

Examples:

H1 Heading (3rem)

H2 Heading (1.75rem)

H3 Heading (Default)

Regular paragraph text maintains good readability with the Open Sans font family.

Bold text and italic text maintain proper contrast and readability.

Bootstrap Carousel

Custom styled carousel with black arrow navigation.

Implementation:

::::::: {#carouselId .carousel .slide .my-4 data-bs-ride="carousel" style="max-width: 600px; margin: 0 auto;"}
::: carousel-indicators
<button type="button" data-bs-target="#carouselId" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselId" data-bs-slide-to="1" aria-label="Slide 2">
</button>
:::

::::: carousel-inner
::: {.carousel-item .active}
<img src="image1.jpg" alt="Description" class="d-block w-100" style="height: 400px; object-fit: contain;"/>
:::
::: carousel-item
<img src="image2.jpg" alt="Description" class="d-block w-100" style="height: 400px; object-fit: contain;"/>
:::
:::::

<button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev">
[Previous]{.visually-hidden}
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next">
[Next]{.visually-hidden}
</button>
:::::::

Features:

Clean white background
Black arrow navigation (always visible)
Responsive image sizing (object-fit: contain)
Centered layout with max-width constraint

Mobile Responsive Design

All layouts automatically adapt for mobile devices:

Breakpoint: 768px

Hero section: Stacks vertically, centers image
Section containers: Switch to single column
Profile image: Reduces to 200px on mobile
Typography: Maintains readability

Implementation:

The responsive design is handled automatically by the CSS. No additional markup needed.

Color Palette

Primary Colors:

Dark Blue: #2B3949 (Main text, headings)
Medium Blue: #3F5877 (Accents)
Teal: #4C7C71 (Gradient)
Orange: #e76f52 (Highlights, arrows)

Usage:

Headers: Dark blue (#2B3949)
Gradient text: Animated through all colors
Arrows/bullets: Orange (#e76f52)
Borders: Dark blue (#2B3949)

CSS Classes Reference

Layout Classes:

.hero-profile-section - Main hero container
.profile-container - Flex container for hero content
.profile-image-col - Fixed-width image column
.profile-content-col - Flexible content column
.section-container - Two-column section layout
.section-header-col - Fixed-width header column
.section-content-col - Flexible content column

Styling Classes:

.gradient-text - Animated gradient text effect
.profile-image - Circular profile image styling

Component Classes:

.carousel - Bootstrap carousel with custom arrows
Standard Bootstrap classes work with custom styling