FLOAM WORLD
AI Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Projects - Flow</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #000;
color: white;
overflow-x: hidden;
min-height: 100vh;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(20px);
padding: 15px 25px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.logo::after {
content: 'AI';
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
.search-bar {
flex: 1;
max-width: 400px;
margin: 0 40px;
position: relative;
}
.search-input {
width: 100%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
padding: 12px 20px;
color: white;
font-size: 14px;
outline: none;
transition: all 0.3s ease;
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.search-input:focus {
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
}
.nav-tabs {
display: flex;
gap: 30px;
margin-top: 80px;
padding: 0 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-tab {
padding: 15px 0;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.nav-tab.active {
color: white;
border-bottom-color: #4ecdc4;
}
.container {
padding: 40px 25px;
max-width: 1600px;
margin: 0 auto;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
.project-card {
position: relative;
aspect-ratio: 1;
background: #111;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.project-card:hover {
transform: scale(1.02);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
.project-gif {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease;
}
.project-card:hover .project-gif {
opacity: 1;
}
.project-card:hover .project-image {
opacity: 0;
}
.project-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
padding: 30px 20px 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.project-card:hover .project-overlay {
transform: translateY(0);
}
.project-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.2;
}
.project-description {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
margin-bottom: 12px;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.project-tag {
background: rgba(255, 255, 255, 0.1);
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
.loading-placeholder {
background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: #111;
border-radius: 20px;
padding: 40px;
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.nav-tabs {
padding: 0 15px;
gap: 20px;
}
.container {
padding: 20px 15px;
}
.projects-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
.search-bar {
margin: 0 20px;
}
}
/* Custom styles for different project types */
.project-card[data-type="generative-art"] {
border-color: rgba(255, 107, 107, 0.3);
}
.project-card[data-type="machine-learning"] {
border-color: rgba(78, 205, 196, 0.3);
}
.project-card[data-type="computer-vision"] {
border-color: rgba(69, 183, 209, 0.3);
}
.project-card[data-type="nlp"] {
border-color: rgba(255, 195, 18, 0.3);
}
.project-card[data-type="neural-networks"] {
border-color: rgba(155, 89, 182, 0.3);
}
</style>
</head>
<body>
<div class="header">
<div class="logo">FLOAM WORLD</div>
<div class="search-bar">
<input type="text" class="search-input" placeholder="Search AI projects..." id="searchInput">
</div>
<div style="opacity: 0.6; font-size: 14px;">AI Portfolio</div>
</div>
<div class="nav-tabs">
<a href="#" class="nav-tab active">ALL PROJECTS</a>
<a href="#" class="nav-tab">RECENT WORK</a>
</div>
<div class="container">
<div class="projects-grid" id="projectsGrid">
<!-- Projects will be dynamically generated -->
</div>
</div>
<div class="modal" id="projectModal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal()">×</button>
<div id="modalContent">
<!-- Modal content will be dynamically inserted -->
</div>
</div>
</div>
<script>
// Sample AI project data - replace with your actual projects
const aiProjects = [
{
id: 1,
title: "Neural Style Transfer",
description: "Real-time artistic style transfer using deep neural networks",
type: "neural-networks",
tags: ["PyTorch", "Computer Vision", "Art"],
staticImage: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=400&h=400&fit=crop",
details: "This project implements neural style transfer to combine the content of one image with the artistic style of another. Built with PyTorch and optimized for real-time processing."
},
{
id: 2,
title: "Generative Landscapes",
description: "AI-generated landscapes using GANs and procedural techniques",
type: "generative-art",
tags: ["GAN", "Generative Art", "Landscapes"],
staticImage: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=400&h=400&fit=crop",
details: "Exploring the intersection of artificial intelligence and natural beauty through generative adversarial networks that create stunning landscape imagery."
},
{
id: 3,
title: "Emotion Recognition",
description: "Real-time facial emotion detection and analysis system",
type: "computer-vision",
tags: ["OpenCV", "Deep Learning", "Emotions"],
staticImage: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=400&fit=crop",
details: "Advanced computer vision system that can detect and classify human emotions in real-time using state-of-the-art deep learning models."
},
{
id: 4,
title: "Text-to-Art Generator",
description: "Transform written descriptions into unique visual artwork",
type: "nlp",
tags: ["NLP", "DALL-E", "Text-to-Image"],
staticImage: "https://images.unsplash.com/photo-1547036967-23d11aacaee0?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=400&h=400&fit=crop",
details: "Natural language processing meets computer vision in this innovative tool that converts textual descriptions into compelling visual artwork."
},
{
id: 5,
title: "Music Composition AI",
description: "AI system that composes original music in various genres",
type: "machine-learning",
tags: ["Music", "RNN", "Audio Processing"],
staticImage: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1571327073757-71d13c24de30?w=400&h=400&fit=crop",
details: "Revolutionary AI composer that uses recurrent neural networks to create original music compositions across multiple genres and styles."
},
{
id: 6,
title: "Interactive Painting Bot",
description: "Robotic system that creates paintings based on viewer interaction",
type: "computer-vision",
tags: ["Robotics", "Interactive Art", "Vision"],
staticImage: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=400&fit=crop",
details: "Combining robotics with AI vision to create an interactive painting system that responds to human presence and gestures."
},
{
id: 7,
title: "Dream Visualizer",
description: "Transform sleep patterns into abstract visual representations",
type: "generative-art",
tags: ["Data Viz", "Sleep", "Generative"],
staticImage: "https://images.unsplash.com/photo-1520637836862-4d197d17c63a?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1617957283993-b9d2e2a7bf68?w=400&h=400&fit=crop",
details: "Innovative visualization system that converts sleep and dream data into beautiful, abstract visual representations using machine learning."
},
{
id: 8,
title: "Voice Cloning Studio",
description: "Advanced voice synthesis and cloning technology",
type: "nlp",
tags: ["Voice Synthesis", "Audio ML", "TTS"],
staticImage: "https://images.unsplash.com/photo-1590602847861-f357a9332bbc?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?w=400&h=400&fit=crop",
details: "State-of-the-art voice cloning technology that can replicate and synthesize human speech with remarkable accuracy and naturalness."
},
{
id: 9,
title: "Predictive Urban Planning",
description: "AI-powered city development and traffic flow optimization",
type: "machine-learning",
tags: ["Urban Planning", "Prediction", "Big Data"],
staticImage: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=400&h=400&fit=crop",
gifImage: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=400&h=400&fit=crop",
details: "Machine learning system that analyzes urban data to predict optimal city planning decisions and traffic flow improvements."
}
];
function renderProjects(projects = aiProjects) {
const grid = document.getElementById('projectsGrid');
grid.innerHTML = '';
projects.forEach(project => {
const projectCard = document.createElement('div');
projectCard.className = 'project-card';
projectCard.setAttribute('data-type', project.type);
projectCard.onclick = () => openModal(project);
projectCard.innerHTML = `
<img src="${project.staticImage}" alt="${project.title}" class="project-image loading-placeholder">
<img src="${project.gifImage}" alt="${project.title}" class="project-gif loading-placeholder">
<div class="project-overlay">
<div class="project-title">${project.title}</div>
<div class="project-description">${project.description}</div>
<div class="project-tags">
${project.tags.map(tag => `<span class="project-tag">${tag}</span>`).join('')}
</div>
</div>
`;
grid.appendChild(projectCard);
});
}
function openModal(project) {
const modal = document.getElementById('projectModal');
const modalContent = document.getElementById('modalContent');
modalContent.innerHTML = `
<h2 style="font-size: 2em; margin-bottom: 20px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">${project.title}</h2>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
<div>
<img src="${project.gifImage}" alt="${project.title}" style="width: 100%; border-radius: 12px;">
</div>
<div>
<h3 style="margin-bottom: 15px; color: #4ecdc4;">Project Details</h3>
<p style="line-height: 1.6; margin-bottom: 20px; color: rgba(255,255,255,0.8);">${project.details}</p>
<h4 style="margin-bottom: 10px;">Technologies Used:</h4>
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
${project.tags.map(tag => `<span class="project-tag" style="background: rgba(78, 205, 196, 0.2);">${tag}</span>`).join('')}
</div>
</div>
</div>
<div style="text-align: center;">
<button style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border: none; padding: 12px 30px; border-radius: 25px; color: white; font-weight: 600; cursor: pointer; margin-right: 15px;">View Live Demo</button>
<button style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); padding: 12px 30px; border-radius: 25px; color: white; font-weight: 600; cursor: pointer;">View Source Code</button>
</div>
`;
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal() {
const modal = document.getElementById('projectModal');
modal.classList.remove('active');
document.body.style.overflow = 'auto';
}
// Search functionality
document.getElementById('searchInput').addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredProjects = aiProjects.filter(project =>
project.title.toLowerCase().includes(searchTerm) ||
project.description.toLowerCase().includes(searchTerm) ||
project.tags.some(tag => tag.toLowerCase().includes(searchTerm))
);
renderProjects(filteredProjects);
});
// Tab functionality
document.querySelectorAll('.nav-tab').forEach(tab => {
tab.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// You can add filtering logic here based on tab selection
if (tab.textContent === 'RECENT WORK') {
const recentProjects = aiProjects.slice(0, 4);
renderProjects(recentProjects);
} else {
renderProjects(aiProjects);
}
});
});
// Keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
// Initialize with data from Squarespace
async function initializeProjects() {
aiProjects = await fetchSquarespaceProjects();
renderProjects();
}
// Initialize
initializeProjects();
// Simulate loading effect removal
setTimeout(() => {
document.querySelectorAll('.loading-placeholder').forEach(el => {
el.classList.remove('loading-placeholder');
});
}, 1000);
</script>
</body>
</html>