test1 / index.html
slogiker's picture
Add 3 files
5a979bc verified
Raw History Blame Contribute Delete
44.9 kB
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vibrant Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6366f1;
--secondary: #f43f5e;
--accent: #f59e0b;
--text: #1e293b;
--bg: #f8fafc;
--card-bg: #ffffff;
}
.dark {
--primary: #818cf8;
--secondary: #fb7185;
--accent: #fbbf24;
--text: #e2e8f0;
--bg: #0f172a;
--card-bg: #1e293b;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}
h1, h2, h3 {
font-family: 'Space Grotesk', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: gradient 8s ease infinite;
background-size: 400% 400%;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.project-slider {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.project-slide {
scroll-snap-align: start;
transition: transform 0.5s ease;
}
.project-slide:hover {
transform: scale(1.03);
}
.social-icon {
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-5px) scale(1.1);
}
.dark-mode-toggle {
transition: all 0.3s ease;
}
.dark-mode-toggle:hover {
transform: rotate(30deg);
}
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal-content {
background-color: var(--card-bg);
}
.section {
scroll-margin-top: 100px;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--primary), var(--secondary));
border-radius: 10px;
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-50 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold gradient-text">Portfolio</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#about" class="nav-link text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#projects" class="nav-link text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Projects</a>
<a href="#contact" class="nav-link text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Contact</a>
<button id="darkModeToggle" class="dark-mode-toggle ml-4 p-2 rounded-full focus:outline-none">
<i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
</button>
</div>
</div>
<div class="md:hidden flex items-center">
<button id="mobileMenuButton" class="p-2 rounded-md focus:outline-none">
<i class="fas fa-bars text-gray-700 dark:text-gray-300"></i>
</button>
<button id="darkModeToggleMobile" class="dark-mode-toggle ml-2 p-2 rounded-full focus:outline-none">
<i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-slate-800 pb-3 px-2">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">About</a>
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">Projects</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6">
<span class="gradient-text">Hello, I'm Alex</span>
</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 text-gray-600 dark:text-gray-300">
Creative Developer & Designer crafting digital experiences that matter.
</p>
<div class="flex justify-center space-x-4">
<a href="#projects" class="px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-full hover:opacity-90 transition-all transform hover:scale-105 shadow-lg">
View My Work
</a>
<a href="#contact" class="px-6 py-3 border-2 border-primary text-primary font-medium rounded-full hover:bg-primary hover:text-white transition-all transform hover:scale-105">
Contact Me
</a>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="section py-16 px-4 sm:px-6 lg:px-8 bg-white/50 dark:bg-slate-800/50">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
<span class="gradient-text">About Me</span>
</h2>
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="w-full md:w-1/3 flex justify-center">
<div class="relative">
<div class="w-64 h-64 rounded-full bg-gradient-to-r from-primary via-secondary to-accent p-1">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80"
alt="Profile"
class="w-full h-full rounded-full object-cover border-4 border-white dark:border-slate-800">
</div>
<div class="absolute -bottom-3 -right-3 bg-white dark:bg-slate-700 p-3 rounded-full shadow-lg">
<span class="text-2xl">👨‍💻</span>
</div>
</div>
</div>
<div class="w-full md:w-2/3">
<h3 class="text-2xl font-bold mb-4">Full Stack Developer with a Passion for Design</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">
I'm a creative developer with 5+ years of experience building web applications and digital experiences.
My journey started with a love for both design and technology, which led me to specialize in creating
interfaces that are not only functional but also visually stunning and intuitive.
</p>
<p class="text-gray-600 dark:text-gray-300 mb-6">
When I'm not coding, you can find me exploring new design trends, experimenting with 3D graphics,
or contributing to open-source projects. I believe in continuous learning and pushing the boundaries
of what's possible on the web.
</p>
<div class="flex flex-wrap gap-4">
<div class="px-4 py-2 bg-primary/10 text-primary rounded-full flex items-center">
<i class="fas fa-code mr-2"></i>
<span>JavaScript</span>
</div>
<div class="px-4 py-2 bg-secondary/10 text-secondary rounded-full flex items-center">
<i class="fas fa-paint-brush mr-2"></i>
<span>UI/UX Design</span>
</div>
<div class="px-4 py-2 bg-accent/10 text-accent rounded-full flex items-center">
<i class="fas fa-mobile-alt mr-2"></i>
<span>Responsive Design</span>
</div>
<div class="px-4 py-2 bg-purple-500/10 text-purple-500 rounded-full flex items-center">
<i class="fab fa-react mr-2"></i>
<span>React</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="section py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-slate-900/50">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
<span class="gradient-text">Featured Projects</span>
</h2>
<div class="relative">
<div class="project-slider flex overflow-x-auto pb-8 gap-6 snap-x snap-mandatory no-scrollbar">
<!-- Project 1 -->
<div class="project-slide flex-shrink-0 w-80 bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
<i class="fas fa-project-diagram text-white text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Project Management Tool</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A collaborative platform for teams to manage tasks and projects efficiently.</p>
<button onclick="openModal('modal1')" class="w-full py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">
About it
</button>
</div>
</div>
<!-- Project 2 -->
<div class="project-slide flex-shrink-0 w-80 bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
<i class="fas fa-chart-line text-white text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Data Visualization Dashboard</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Interactive charts and graphs to analyze complex datasets with ease.</p>
<button onclick="openModal('modal2')" class="w-full py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">
About it
</button>
</div>
</div>
<!-- Project 3 -->
<div class="project-slide flex-shrink-0 w-80 bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="h-48 bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center">
<i class="fas fa-shopping-cart text-white text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A full-featured online store with payment integration and inventory management.</p>
<button onclick="openModal('modal3')" class="w-full py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">
About it
</button>
</div>
</div>
<!-- Project 4 -->
<div class="project-slide flex-shrink-0 w-80 bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
<i class="fas fa-music text-white text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Music Streaming App</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">Discover and listen to your favorite songs with personalized recommendations.</p>
<button onclick="openModal('modal4')" class="w-full py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">
About it
</button>
</div>
</div>
<!-- Project 5 -->
<div class="project-slide flex-shrink-0 w-80 bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg">
<div class="h-48 bg-gradient-to-r from-red-400 to-orange-500 flex items-center justify-center">
<i class="fas fa-gamepad text-white text-6xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Interactive Game</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">A browser-based adventure game with rich graphics and engaging gameplay.</p>
<button onclick="openModal('modal5')" class="w-full py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">
About it
</button>
</div>
</div>
</div>
<button id="prevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-white dark:bg-slate-700 p-3 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-slate-600 transition-all">
<i class="fas fa-chevron-left text-gray-700 dark:text-gray-300"></i>
</button>
<button id="nextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-white dark:bg-slate-700 p-3 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-slate-600 transition-all">
<i class="fas fa-chevron-right text-gray-700 dark:text-gray-300"></i>
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section py-16 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">
<span class="gradient-text">Get In Touch</span>
</h2>
<div class="flex flex-col md:flex-row gap-12">
<div class="w-full md:w-1/2">
<h3 class="text-2xl font-bold mb-6">Let's work together!</h3>
<p class="text-gray-600 dark:text-gray-300 mb-8">
I'm always open to discussing new projects, creative ideas or opportunities to be part of your vision.
Feel free to reach out through any of the platforms below or send me a message directly.
</p>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
<i class="fas fa-envelope text-primary text-xl"></i>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Email</p>
<a href="mailto:hello@example.com" class="text-gray-700 dark:text-gray-200 hover:text-primary transition-colors">hello@example.com</a>
</div>
</div>
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center mr-4">
<i class="fas fa-map-marker-alt text-secondary text-xl"></i>
</div>
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm">Location</p>
<p class="text-gray-700 dark:text-gray-200">San Francisco, CA</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="text-lg font-semibold mb-4">Follow me</h4>
<div class="flex space-x-4">
<a href="#" class="social-icon w-12 h-12 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:bg-primary hover:text-white">
<i class="fab fa-github text-xl"></i>
</a>
<a href="#" class="social-icon w-12 h-12 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:bg-blue-600 hover:text-white">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="#" class="social-icon w-12 h-12 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:bg-pink-600 hover:text-white">
<i class="fab fa-dribbble text-xl"></i>
</a>
<a href="#" class="social-icon w-12 h-12 rounded-full bg-gray-100 dark:bg-slate-700 flex items-center justify-center text-gray-700 dark:text-gray-300 hover:bg-blue-400 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
</div>
</div>
</div>
<div class="w-full md:w-1/2">
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-800 transition-all">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-800 transition-all">
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
<input type="text" id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-800 transition-all">
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-slate-600 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white dark:bg-slate-800 transition-all"></textarea>
</div>
<button type="submit" class="w-full py-3 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg hover:opacity-90 transition-all transform hover:scale-[1.01] shadow-lg">
Send Message
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-slate-900">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<span class="text-xl font-bold gradient-text">Portfolio</span>
</div>
<div class="flex space-x-6">
<a href="#about" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">About</a>
<a href="#projects" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">Projects</a>
<a href="#contact" class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors">Contact</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-slate-700 text-center text-gray-500 dark:text-gray-400 text-sm">
<p>© 2023 My Portfolio. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Project Modals -->
<!-- Modal 1 -->
<div id="modal1" class="modal fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none">
<div class="modal-content max-w-2xl w-full rounded-xl overflow-hidden shadow-2xl transform transition-all">
<div class="bg-gradient-to-r from-blue-400 to-purple-500 p-6 text-white">
<div class="flex justify-between items-start">
<h3 class="text-2xl font-bold">Project Management Tool</h3>
<button onclick="closeModal('modal1')" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 p-6">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Technologies Used</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>React & TypeScript</li>
<li>Node.js with Express</li>
<li>MongoDB</li>
<li>Socket.io for real-time updates</li>
<li>TailwindCSS for styling</li>
</ul>
</div>
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Key Features</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Task management with drag-and-drop</li>
<li>Team collaboration tools</li>
<li>Time tracking and reporting</li>
<li>Customizable project workflows</li>
<li>Integration with popular tools</li>
</ul>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This project was developed to solve the pain points of remote team collaboration.
It provides a centralized platform where teams can organize tasks, track progress,
and communicate effectively, all while maintaining a simple and intuitive interface.
</p>
<div class="flex space-x-4">
<a href="#" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
<i class="fab fa-github mr-2"></i> View Code
</a>
<a href="#" class="px-4 py-2 border border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20 rounded-lg transition-all">
Live Demo
</a>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="modal2" class="modal fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none">
<div class="modal-content max-w-2xl w-full rounded-xl overflow-hidden shadow-2xl transform transition-all">
<div class="bg-gradient-to-r from-green-400 to-blue-500 p-6 text-white">
<div class="flex justify-between items-start">
<h3 class="text-2xl font-bold">Data Visualization Dashboard</h3>
<button onclick="closeModal('modal2')" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 p-6">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Technologies Used</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>D3.js for visualizations</li>
<li>React with TypeScript</li>
<li>Python for data processing</li>
<li>Firebase for real-time data</li>
<li>Chart.js for supplementary charts</li>
</ul>
</div>
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Key Features</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Interactive charts with tooltips</li>
<li>Customizable dashboards</li>
<li>Real-time data updates</li>
<li>Export to multiple formats</li>
<li>Responsive design</li>
</ul>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This dashboard was created to help businesses make sense of their complex data.
It transforms raw numbers into beautiful, interactive visualizations that tell a story
and help identify trends and patterns that might otherwise go unnoticed.
</p>
<div class="flex space-x-4">
<a href="#" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
<i class="fab fa-github mr-2"></i> View Code
</a>
<a href="#" class="px-4 py-2 border border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20 rounded-lg transition-all">
Live Demo
</a>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div id="modal3" class="modal fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none">
<div class="modal-content max-w-2xl w-full rounded-xl overflow-hidden shadow-2xl transform transition-all">
<div class="bg-gradient-to-r from-yellow-400 to-red-500 p-6 text-white">
<div class="flex justify-between items-start">
<h3 class="text-2xl font-bold">E-commerce Platform</h3>
<button onclick="closeModal('modal3')" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 p-6">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Technologies Used</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Next.js for SSR</li>
<li>Stripe for payments</li>
<li>MongoDB for database</li>
<li>Redux for state management</li>
<li>TailwindCSS for styling</li>
</ul>
</div>
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Key Features</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Product catalog with filters</li>
<li>Shopping cart functionality</li>
<li>Secure checkout process</li>
<li>User account management</li>
<li>Admin dashboard</li>
</ul>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This e-commerce platform was designed to provide a seamless shopping experience
from product discovery to checkout. It includes all the essential features of
a modern online store while maintaining excellent performance and security standards.
</p>
<div class="flex space-x-4">
<a href="#" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
<i class="fab fa-github mr-2"></i> View Code
</a>
<a href="#" class="px-4 py-2 border border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20 rounded-lg transition-all">
Live Demo
</a>
</div>
</div>
</div>
</div>
<!-- Modal 4 -->
<div id="modal4" class="modal fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none">
<div class="modal-content max-w-2xl w-full rounded-xl overflow-hidden shadow-2xl transform transition-all">
<div class="bg-gradient-to-r from-purple-400 to-pink-500 p-6 text-white">
<div class="flex justify-between items-start">
<h3 class="text-2xl font-bold">Music Streaming App</h3>
<button onclick="closeModal('modal4')" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 p-6">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Technologies Used</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>React Native for mobile</li>
<li>Node.js backend</li>
<li>MongoDB for database</li>
<li>Audio processing libraries</li>
<li>Spotify API integration</li>
</ul>
</div>
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Key Features</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Stream music in high quality</li>
<li>Create and share playlists</li>
<li>Discover new music</li>
<li>Offline listening</li>
<li>Cross-platform sync</li>
</ul>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This music streaming app was born from a passion for music and technology.
It provides users with access to millions of songs while offering personalized
recommendations based on listening habits. The app focuses on delivering
exceptional audio quality and a smooth user experience.
</p>
<div class="flex space-x-4">
<a href="#" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
<i class="fab fa-github mr-2"></i> View Code
</a>
<a href="#" class="px-4 py-2 border border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20 rounded-lg transition-all">
Live Demo
</a>
</div>
</div>
</div>
</div>
<!-- Modal 5 -->
<div id="modal5" class="modal fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 pointer-events-none">
<div class="modal-content max-w-2xl w-full rounded-xl overflow-hidden shadow-2xl transform transition-all">
<div class="bg-gradient-to-r from-red-400 to-orange-500 p-6 text-white">
<div class="flex justify-between items-start">
<h3 class="text-2xl font-bold">Interactive Game</h3>
<button onclick="closeModal('modal5')" class="text-white hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 p-6">
<div class="flex flex-col md:flex-row gap-6 mb-6">
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Technologies Used</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Phaser.js game engine</li>
<li>WebGL for graphics</li>
<li>Node.js for multiplayer</li>
<li>Socket.io for real-time</li>
<li>Custom physics engine</li>
</ul>
</div>
<div class="md:w-1/2">
<h4 class="font-semibold mb-2">Key Features</h4>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
<li>Rich 2D graphics</li>
<li>Multiplayer support</li>
<li>Progressive difficulty</li>
<li>Leaderboards</li>
<li>Customizable characters</li>
</ul>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This browser-based game combines classic platformer mechanics with modern web technologies.
It features engaging gameplay, beautiful pixel-art graphics, and the ability to play with
friends online. The game was designed to be accessible yet challenging, with mechanics that
are easy to learn but difficult to master.
</p>
<div class="flex space-x-4">
<a href="#" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all flex items-center">
<i class="fab fa-github mr-2"></i> View Code
</a>
<a href="#" class="px-4 py-2 border border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20 rounded-lg transition-all">
Live Demo
</a>
</div>
</div>
</div>
</div>
<script>
// Dark mode toggle
function toggleDarkMode() {
const html = document.documentElement;
html.classList.toggle('dark');
// Save preference to localStorage
const isDark = html.classList.contains('dark');
localStorage.setItem('darkMode', isDark);
// Update toggle icon
const icons = document.querySelectorAll('.fa-moon, .fa-sun');
icons.forEach(icon => {
if (isDark) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
}
// Check for saved dark mode preference
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
const icons = document.querySelectorAll('.fa-moon');
icons.forEach(icon => {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
});
}
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobileMenuButton');
const mobileMenu = document.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Project slider navigation
const slider = document.querySelector('.project-slider');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
nextBtn.addEventListener('click', () => {
slider.scrollBy({ left: 300, behavior: 'smooth' });
});
prevBtn.addEventListener('click', () => {
slider.scrollBy({ left: -300, behavior: 'smooth' });
});
// Modal functions
function openModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.remove('opacity-0', 'pointer-events-none');
document.body.style.overflow = 'hidden';
}
function closeModal(modalId) {
const modal = document.getElementById(modalId);
modal.classList.add('opacity-0', 'pointer-events-none');
document.body.style.overflow = 'auto';
}
// Close modal when clicking outside content
const modals = document.querySelectorAll('.modal');
modals.forEach(modal => {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
const modalId = modal.id;
closeModal(modalId);
}
});
});
// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Event listeners for dark mode toggles
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
document.getElementById('darkModeToggleMobile').addEventListener('click', toggleDarkMode);
// Form submission
const form = document.querySelector('form');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your message! I will get back to you soon.');
form.reset();
});
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=slogiker/test1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>