KAIT Portfolio Site Development built w/ Grok
KAIT 👩🏼💻
KAIT
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
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
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
18
Linkedin 2.0 Built w/ Lovable - No Code Development
Generative Art | AI image generation using Grok
Lunar Hair Salon created w/ Framer and Integrated w/ Fresha
Grand Coastal Hotel | Social Media Content Designs w/ Canva
