KAIT Portfolio Site Development built w/ Grok

KAIT 👩🏼‍💻

Completed work

AI Developer

AI Engineer

Web Developer

CSS

CSS

HTML5

HTML5

JavaScript

JavaScript

Design

KAIT

KAIT

TOOLS

ARTWORK

OVERVIEW OF "THE PINK CLOUD"

SYMBOLISM

CODE

HTML

CSS

JS

TOOLS

Grok Imagine & Grok Code
Frameworks: HTML, CSS, JS

ARTWORK

OVERVIEW OF "THE PINK CLOUD"

The Pink Cloud (c. 1896) is an oil-on-canvas landscape by French Neo-Impressionist Henri-Edmond Cross (1856–1910). Painted in Saint-Clair on the French Riviera, it captures a radiant pink cloud at sunset over the Mediterranean, using Divisionist (Pointillist) dots of pure color to create a luminous, serene scene. Held at the Cleveland Museum of Art, it measures 54 x 62 cm.
The Pink Cloud
The Pink Cloud

SYMBOLISM

The pink cloud symbolizes fleeting beauty and transcendence, reflecting Symbolist ideals of nature as a spiritual mirror. Its glowing palette evokes harmony and utopian hope, tied to Cross’s anarchist beliefs in art as social renewal.
Animated Version

CODE

*Entire codebase is not present and there are personal edits I've made. Reach out if you'd like the full file or any help.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KAIT</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>">
    <meta name="description" content="KAIT - Creative Professional Portfolio">
    <meta name="robots" content="index, follow">
    <meta name="theme-color" content="#ff69b4">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <video class="background-video" autoplay muted loop playsinline>
        <source src="../background/PinkCloud.mp4" type="video/mp4">
        <p>Your browser does not support the video tag.</p>
    </video>

    <!-- Hamburger Menu Button -->
    <button class="hamburger-menu" aria-label="Menu" aria-expanded="false">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
    </button>

    <!-- Main content (always visible) -->
    <div class="container">
        <main class="main-content">
            <h1>KAIT</h1>
            <p class="hero-description">A conscious creator specializing in designs with resonance.</p>
            <a href="https://contra.com/workbykait" class="portfolio-btn" target="_blank" rel="noopener noreferrer">work with me</a>
        </main>

        <nav class="nav-bar">
            <a href="https://x.com/workbykait" class="nav-link" aria-label="X (Twitter)" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-x-twitter"></i>
            </a>
            <a href="#" class="nav-link hidden" aria-label="TikTok" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-tiktok"></i>
            </a>
            <a href="#" class="nav-link hidden" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="nav-link hidden" aria-label="Pinterest" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-pinterest"></i>
            </a>
        </nav>
    </div>

    <!-- Menu Overlay (slides from left on click) -->
    <div class="menu-overlay">
        <div class="menu-content">
            <!-- Skills Section -->
            <section class="skills-section">
                <h2 class="section-title">Skills</h2>

                <div class="skill-item">
                    <div class="skill-name">Web Design</div>
                    <div class="skill-dots">
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot"></span>
                    </div>
                </div>

                <div class="skill-item">
                    <div class="skill-name">Marketing</div>
                    <div class="skill-dots">
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot"></span>
                    </div>
                </div>

                <div class="skill-item">
                    <div class="skill-name">Development</div>
                    <div class="skill-dots">
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot filled"></span>
                        <span class="skill-dot"></span>
                        <span class="skill-dot"></span>
                    </div>
                </div>

                <div class="tools-section">
                    <h3 class="tools-title">Toolbox</h3>
                    <div class="tools-list">
                        <span class="tool-tag">Shopify</span>
                        <span class="tool-tag">Framer</span>
                        <span class="tool-tag">Adobe</span>
                    </div>
                </div>
            </section>

            <!-- Work List -->
            <div class="work-section">
                <h2 class="work-title">My Work</h2>
                <nav class="menu-nav">
                <a href="https://contra.com/p/oWMLMWXm-grand-coastal-hotel-or-social-media-content-designs-w-canva?referralExperimentNid=DEFAULT_REFERRAL_PROGRAM&referrerUsername=workbykait"
                   class="menu-link" target="_blank" rel="noopener noreferrer">
                    <div class="project-preview">
                        <img src="../work-covers/GCH_Cover.png" alt="Grand Coastal Hotel Project" class="menu-image" loading="lazy">
                        <div class="project-info">
                            <h4>Grand Coastal Hotel</h4>
                            <p>Social Media Content Design</p>
                        </div>
                    </div>
                </a>

                <a href="https://contra.com/p/qMoeMsUo-lunar-hair-salon-created-w-framer-and-integrated-w-fresha?referralExperimentNid=DEFAULT_REFERRAL_PROGRAM&referrerUsername=workbykait"
                   class="menu-link" target="_blank" rel="noopener noreferrer">
                    <div class="project-preview">
                        <img src="../work-covers/LH_Cover.png" alt="Lunar Hair Salon Project" class="menu-image" loading="lazy">
                        <div class="project-info">
                            <h4>Lunar Hair Salon</h4>
                            <p>Website Design with Framer & Fresha</p>
                        </div>
                    </div>
                </a>

                <a href="https://contra.com/p/skPs6PFl-lux-gym-created-w-framer-and-integrated-w-gym-insight?referralExperimentNid=DEFAULT_REFERRAL_PROGRAM&referrerUsername=workbykait"
                   class="menu-link" target="_blank" rel="noopener noreferrer">
                    <div class="project-preview">
                        <img src="../work-covers/LG_Cover.png" alt="Lux Gym Project" class="menu-image" loading="lazy">
                        <div class="project-info">
                            <h4>Lux Gym</h4>
                            <p>Website Design with Framer & Gym Insight</p>
                        </div>
                    </div>
                </a>
                </nav>
            </div>
        </div>
    </div>

    <!-- Background overlay -->
    <div class="background-overlay"></div>

    <script src="script.js" defer></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&family=Matemasie&display=swap');

:root {
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
    --glow-color: rgba(255, 255, 255, 0.202);
    --transition: all 0.3s ease;
    --border-radius: 8px;
    --font-family: 'Inter', sans-serif;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html::before {
    content: '';
    position: fixed;
    top: -8px;
    left: -8px;
    width: calc(100vw + 16px);
    height: calc(100vh + 16px);
    border: 25px solid white;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8), 0 0 100px rgb(0, 0, 0);
    pointer-events: none;
    z-index: 4;
}

body {
    margin: 0;
    overflow: hidden;
}

.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: -1;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Main content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100px;
}

h1 {
    font-family: 'Matemasie', cursive;
    font-size: 8em;
    color: white;
    margin: 0 0 var(--spacing-lg) 0;
    font-weight: 400;
    animation: fadeInUp 1s ease-in-out;
    max-width: 90%;
    text-align: center;
    letter-spacing: 0.05em;
}

.hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2em;
    font-weight: 400;
    margin: 0 0 var(--spacing-xl) 0;
    max-width: 600px;
    text-align: center;
    animation: fadeInUp 1s ease-in-out 0.1s both;
}

.portfolio-btn {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    background: var(--glass-bg);
    color: white;
    font-size: 1em;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow), inset 0 0 20px rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    animation: fadeInUp 1s ease-in-out 0.3s both;
    outline: none;
    min-width: 140px;
    text-align: center;
}

.portfolio-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.portfolio-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--glow-color), 0 0 60px rgba(0, 255, 255, 0.294);
}

/* Navigation */
.nav-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    padding: 40px;
    justify-content: center;
    align-items: center;
}

.nav-link {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    padding: 10px 12px;
    border-radius: var(--border-radius);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 0 20px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    transition: var(--transition);
    animation: fadeInUp 1s ease-in-out 0.6s both;
    position: relative;
    outline: none;
}

.nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.25), 0 0 60px rgba(0, 255, 255, 0.3);
}

/* Hamburger Menu */
.hamburger-menu {
    position: fixed;
    top: 40px;
    left: 50px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    background: var(--glass-bg);
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: var(--glass-shadow), inset 0 0 20px rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    z-index: 10;
    outline: none;
}

.hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.3), 0 0 60px rgba(0, 255, 255, 0.2);
}

.hamburger-menu:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background-color: white;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
}

/* Menu Overlay - Slides in from left like a drawer */
.menu-overlay {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    z-index: 3;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-overlay.open {
    left: 0;
}

/* Menu Content */
.menu-content {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-lg) var(--spacing-xxl) calc(var(--spacing-lg) + 30px);
    width: 100%;
    max-width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    -webkit-mask: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 10%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0) 100%);
    mask: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,1) 10%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0) 100%);
}

.menu-content::-webkit-scrollbar {
    width: 6px;
}

.menu-content::-webkit-scrollbar-track {
    background: transparent;
}

.menu-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.menu-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Work Section */
.work-section {
    margin: 0;
}

/* Skills Section */
.skills-section {
    margin-bottom: var(--spacing-xxl);
    padding-top: calc(var(--spacing-xxl) + var(--spacing-lg));
}

.section-title {
    margin: 0 0 var(--spacing-lg) 0;
    color: white;
    font-size: 1.3em;
    font-weight: 600;
    text-align: left;
    padding-left: var(--spacing-md);
}

.skill-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-lg);
}

.skill-name {
    color: white;
    font-size: 1em;
    font-weight: 500;
    flex: 1;
}
...

JS

// KAIT Website JavaScript - Enhanced with accordion functionality
console.log('KAIT website loaded successfully');

// Initialize all functionality when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Slow down background video playback for better performance
    const video = document.querySelector('.background-video');
    if (video) {
        video.playbackRate = 0.2;
        video.addEventListener('error', function() {
            console.log('Video failed to load, continuing without video');
        });
        console.log('Video playback rate set to 0.3x');
    }

    // Hamburger menu functionality with touch support
    const hamburgerMenu = document.querySelector('.hamburger-menu');
    const menuOverlay = document.querySelector('.menu-overlay');

    if (hamburgerMenu && menuOverlay) {
        // Touch event handling for better mobile responsiveness
        const isTouchDevice = 'ontouchstart' in document.documentElement;

        hamburgerMenu.setAttribute('aria-expanded', 'false');

        const handleMenuToggle = function() {
            const isExpanded = hamburgerMenu.getAttribute('aria-expanded') === 'true';

            if (isExpanded) {
                menuOverlay.classList.remove('open');
                hamburgerMenu.setAttribute('aria-expanded', 'false');
                console.log('Menu closed');
            } else {
                menuOverlay.classList.add('open');
                hamburgerMenu.setAttribute('aria-expanded', 'true');
                console.log('Menu opened');
            }
        };

        if (isTouchDevice) {
            // Touch devices use touchstart for better responsiveness
            hamburgerMenu.addEventListener('touchstart', function(e) {
                e.preventDefault();
                handleMenuToggle();
            }, { passive: false });
        } else {
            // Desktop devices use click
            hamburgerMenu.addEventListener('click', handleMenuToggle);
        }

        // Close menu when clicking on the overlay itself (not on content)
        menuOverlay.addEventListener('click', function(e) {
            if (e.target === menuOverlay) {
                menuOverlay.classList.remove('open');
                hamburgerMenu.setAttribute('aria-expanded', 'false');
                console.log('Menu closed via overlay click');
            }
        });
    }

    // No accordion functionality needed - work is displayed regularly

    // Passive event listeners for better scroll performance on touch devices
    document.addEventListener('touchstart', function() {}, { passive: true });
    document.addEventListener('touchmove', function() {}, { passive: true });
});
Like this project
Completed work

Posted May 2, 2025

Built a custom portfolio site using frameworks: HTML, CSS, and JS. There's animated picture as the background and links connecting to Contra. Grok it.

Likes

2

Views

22

Tags

AI Developer

AI Engineer

Web Developer

CSS

CSS

HTML5

HTML5

JavaScript

JavaScript

Design

KAIT 👩🏼‍💻

AI, Games, Web and Interactive Design

Shopify Site Development for Inner Glö Apparel
Shopify Site Development for Inner Glö Apparel
STAY MINDFUL - Dashboard created w/ Grok & Lovable.dev
STAY MINDFUL - Dashboard created w/ Grok & Lovable.dev
Social Media Content, Ads, and Emails using Canva
Social Media Content, Ads, and Emails using Canva
Grand Coastal Hotel | Social Media Content Designs w/ Canva
Grand Coastal Hotel | Social Media Content Designs w/ Canva

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc