|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Portfolio | Creative Developer</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"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #3b82f6; |
|
|
--primary-dark: #2563eb; |
|
|
--secondary: #10b981; |
|
|
--dark: #1e293b; |
|
|
--light: #f8fafc; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
transition: background-color 0.3s, color 0.3s; |
|
|
} |
|
|
|
|
|
.dark { |
|
|
background-color: #0f172a; |
|
|
color: #f8fafc; |
|
|
} |
|
|
|
|
|
.light { |
|
|
background-color: #f8fafc; |
|
|
color: #1e293b; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: var(--primary); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.skill-pill { |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
|
|
|
.skill-pill:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.wave { |
|
|
animation-name: wave-animation; |
|
|
animation-duration: 2.5s; |
|
|
animation-iteration-count: infinite; |
|
|
transform-origin: 70% 70%; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
@keyframes wave-animation { |
|
|
0% { transform: rotate(0deg); } |
|
|
10% { transform: rotate(14deg); } |
|
|
20% { transform: rotate(-8deg); } |
|
|
30% { transform: rotate(14deg); } |
|
|
40% { transform: rotate(-4deg); } |
|
|
50% { transform: rotate(10deg); } |
|
|
60% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(0deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="light"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md shadow-sm"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<a href="#home" class="text-xl font-bold text-blue-500 dark:text-blue-400">Portfolio</a> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a> |
|
|
<a href="#about" class="nav-link text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">About</a> |
|
|
<a href="#projects" class="nav-link text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Projects</a> |
|
|
<a href="#skills" class="nav-link text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Skills</a> |
|
|
<a href="#contact" class="nav-link text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a> |
|
|
<button id="theme-toggle" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"> |
|
|
<i class="fas fa-moon text-slate-700 dark:text-yellow-300"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="p-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-slate-900 shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">About</a> |
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Projects</a> |
|
|
<a href="#skills" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Skills</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a> |
|
|
<div class="px-3 py-2"> |
|
|
<button id="theme-toggle-mobile" class="flex items-center text-slate-700 dark:text-slate-300 hover:text-blue-500 dark:hover:text-blue-400"> |
|
|
<i class="fas fa-moon mr-2 text-slate-700 dark:text-yellow-300"></i> |
|
|
Toggle Theme |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center pt-16"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-slate-800 dark:text-white"> |
|
|
Hi, I'm <span class="text-blue-500">Tesneem</span> <span class="wave">👋</span> |
|
|
</h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6 text-slate-600 dark:text-slate-300"> |
|
|
Aspiring Data Scientist and Mobile Engineer |
|
|
</h2> |
|
|
<p class="text-lg mb-8 text-slate-600 dark:text-slate-400 max-w-lg"> |
|
|
I build exceptional digital experiences that are fast, accessible, and visually appealing. Let's create something amazing together! |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#projects" class="px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors shadow-lg hover:shadow-blue-500/30"> |
|
|
View My Work |
|
|
</a> |
|
|
<a href="#contact" class="px-6 py-3 border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-slate-800 rounded-lg font-medium transition-colors"> |
|
|
Contact Me |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96"> |
|
|
<div class="absolute inset-0 bg-blue-500 rounded-full opacity-20 blur-xl animate-pulse"></div> |
|
|
<div class="relative w-full h-full flex items-center justify-center"> |
|
|
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" |
|
|
alt="Profile" |
|
|
class="w-full h-full object-cover rounded-full border-4 border-blue-500 shadow-xl floating"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-slate-50 dark:bg-slate-800"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4"> |
|
|
About <span class="text-blue-500">Me</span> |
|
|
</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto"> |
|
|
Get to know more about who I am and what I do |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row items-center gap-12"> |
|
|
<div class="md:w-1/3 flex justify-center"> |
|
|
<div class="relative w-64 h-64"> |
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-blue-500 to-emerald-500 rounded-2xl opacity-75 blur-xl"></div> |
|
|
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" |
|
|
alt="About Me" |
|
|
class="relative w-full h-full object-cover rounded-xl shadow-lg"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-2/3"> |
|
|
<h3 class="text-2xl font-semibold text-slate-800 dark:text-white mb-4"> |
|
|
Who am I? |
|
|
</h3> |
|
|
<p class="text-slate-600 dark:text-slate-400 mb-6"> |
|
|
I'm a passionate frontend developer with 5+ years of experience creating modern web applications. I specialize in React, Vue.js, and responsive design principles. My goal is to build products that provide meaningful, enjoyable experiences for users. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-graduation-cap text-blue-500"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-slate-800 dark:text-white">Education</h4> |
|
|
</div> |
|
|
<p class="text-slate-600 dark:text-slate-400"> |
|
|
B.A. in Computer Science<br> |
|
|
Hunter College, 2025 |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-briefcase text-emerald-500"></i> |
|
|
</div> |
|
|
<h4 class="font-semibold text-slate-800 dark:text-white">Experience</h4> |
|
|
</div> |
|
|
<p class="text-slate-600 dark:text-slate-400"> |
|
|
Senior Frontend Developer<br> |
|
|
TechCorp Inc., 2020-Present |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<a href="#" class="inline-flex items-center text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium"> |
|
|
Download Resume |
|
|
<i class="fas fa-download ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4"> |
|
|
My <span class="text-blue-500">Projects</span> |
|
|
</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto"> |
|
|
Here are some of my recent works that I'm proud of |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Project 1" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-semibold text-slate-800 dark:text-white">E-commerce Platform</h3> |
|
|
<span class="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-full">React</span> |
|
|
</div> |
|
|
<p class="text-slate-600 dark:text-slate-400 mb-4"> |
|
|
A full-featured e-commerce platform with product listings, cart functionality, and secure checkout. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm flex items-center"> |
|
|
View Project |
|
|
<i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fas fa-external-link-alt"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" |
|
|
alt="Project 2" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-semibold text-slate-800 dark:text-white">Task Management App</h3> |
|
|
<span class="text-xs px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-600 dark:text-emerald-300 rounded-full">Vue.js</span> |
|
|
</div> |
|
|
<p class="text-slate-600 dark:text-slate-400 mb-4"> |
|
|
A productivity application for managing tasks with drag-and-drop functionality and team collaboration. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm flex items-center"> |
|
|
View Project |
|
|
<i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fas fa-external-link-alt"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white dark:bg-slate-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> |
|
|
<div class="h-48 overflow-hidden"> |
|
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80" |
|
|
alt="Project 3" |
|
|
class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
<h3 class="text-xl font-semibold text-slate-800 dark:text-white">Weather Dashboard</h3> |
|
|
<span class="text-xs px-2 py-1 bg-amber-100 dark:bg-amber-900 text-amber-600 dark:text-amber-300 rounded-full">JavaScript</span> |
|
|
</div> |
|
|
<p class="text-slate-600 dark:text-slate-400 mb-4"> |
|
|
Real-time weather information with 5-day forecasts, location search, and interactive maps. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400 font-medium text-sm flex items-center"> |
|
|
View Project |
|
|
<i class="fas fa-arrow-right ml-1"></i> |
|
|
</a> |
|
|
<div class="flex space-x-2"> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-blue-500"> |
|
|
<i class="fas fa-external-link-alt"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-slate-800 rounded-lg font-medium transition-colors"> |
|
|
View All Projects |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 bg-slate-50 dark:bg-slate-800"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4"> |
|
|
My <span class="text-blue-500">Skills</span> |
|
|
</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto"> |
|
|
The tools and technologies I use to bring ideas to life |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12"> |
|
|
<div class="skill-pill bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-react text-blue-500 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800 dark:text-white mb-2">React</h3> |
|
|
<div class="w-full bg-slate-200 dark:bg-slate-600 rounded-full h-2"> |
|
|
<div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-pill bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-vuejs text-emerald-500 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800 dark:text-white mb-2">Vue.js</h3> |
|
|
<div class="w-full bg-slate-200 dark:bg-slate-600 rounded-full h-2"> |
|
|
<div class="bg-emerald-500 h-2 rounded-full" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-pill bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-amber-100 dark:bg-amber-900 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-js-square text-amber-500 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800 dark:text-white mb-2">JavaScript</h3> |
|
|
<div class="w-full bg-slate-200 dark:bg-slate-600 rounded-full h-2"> |
|
|
<div class="bg-amber-500 h-2 rounded-full" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="skill-pill bg-white dark:bg-slate-700 p-6 rounded-xl shadow-sm flex flex-col items-center"> |
|
|
<div class="w-16 h-16 bg-pink-100 dark:bg-pink-900 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fab fa-css3-alt text-pink-500 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="font-semibold text-slate-800 dark:text-white mb-2">CSS/Tailwind</h3> |
|
|
<div class="w-full bg-slate-200 dark:bg-slate-600 rounded-full h-2"> |
|
|
<div class="bg-pink-500 h-2 rounded-full" style="width: 92%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-3"> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fab fa-html5 text-orange-500 mr-2"></i> HTML5 |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fab fa-sass text-pink-500 mr-2"></i> SASS |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fab fa-node-js text-green-500 mr-2"></i> Node.js |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fas fa-database text-blue-500 mr-2"></i> MongoDB |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fab fa-git-alt text-orange-600 mr-2"></i> Git |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fab fa-figma text-purple-500 mr-2"></i> Figma |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fas fa-fire text-orange-500 mr-2"></i> Firebase |
|
|
</span> |
|
|
<span class="skill-pill px-4 py-2 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-300 rounded-full text-sm font-medium shadow-sm"> |
|
|
<i class="fas fa-mobile-alt text-blue-400 mr-2"></i> Responsive Design |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-4"> |
|
|
Get In <span class="text-blue-500">Touch</span> |
|
|
</h2> |
|
|
<div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div> |
|
|
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-2xl mx-auto"> |
|
|
Have a project in mind or want to collaborate? Feel free to reach out! |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-12"> |
|
|
<div class="md:w-1/2"> |
|
|
<form id="contact-form" class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Name</label> |
|
|
<input type="text" id="name" name="name" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:text-white transition-colors"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Email</label> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:text-white transition-colors"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Subject</label> |
|
|
<input type="text" id="subject" name="subject" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:text-white transition-colors"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Message</label> |
|
|
<textarea id="message" name="message" rows="5" required |
|
|
class="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-slate-700 dark:text-white transition-colors"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors shadow-lg hover:shadow-blue-500/30"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-lg h-full"> |
|
|
<h3 class="text-xl font-semibold text-slate-800 dark:text-white mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-envelope text-blue-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-slate-700 dark:text-slate-300">Email</h4> |
|
|
<a href="mailto:hello@example.com" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">hello@example.com</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-phone-alt text-emerald-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-slate-700 dark:text-slate-300">Phone</h4> |
|
|
<a href="tel:+1234567890" class="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">+1 (234) 567-890</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-amber-500"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-slate-700 dark:text-slate-300">Location</h4> |
|
|
<p class="text-slate-600 dark:text-slate-400">San Francisco, CA</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h4 class="font-medium text-slate-700 dark:text-slate-300 mb-4">Connect with me</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-blue-900 dark:hover:text-blue-400 transition-colors"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-blue-900 dark:hover:text-blue-400 transition-colors"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-blue-900 dark:hover:text-blue-400 transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-400 hover:bg-blue-100 hover:text-blue-500 dark:hover:bg-blue-900 dark:hover:text-blue-400 transition-colors"> |
|
|
<i class="fab fa-dribbble"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-slate-800 text-white py-12"> |
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<a href="#home" class="text-2xl font-bold text-white">Portfolio</a> |
|
|
<p class="text-slate-400 mt-2">© 2023 All rights reserved.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center md:items-end"> |
|
|
<div class="flex space-x-6 mb-4"> |
|
|
<a href="#home" class="text-slate-400 hover:text-white transition-colors">Home</a> |
|
|
<a href="#about" class="text-slate-400 hover:text-white transition-colors">About</a> |
|
|
<a href="#projects" class="text-slate-400 hover:text-white transition-colors">Projects</a> |
|
|
<a href="#contact" class="text-slate-400 hover:text-white transition-colors">Contact</a> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-slate-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-slate-400 hover:text-white transition-colors"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center transition-opacity opacity-0 invisible"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle'); |
|
|
const themeToggleMobile = document.getElementById('theme-toggle-mobile'); |
|
|
const html = document.documentElement; |
|
|
|
|
|
|
|
|
const savedTheme = localStorage.getItem('theme') || |
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); |
|
|
|
|
|
|
|
|
html.classList.add(savedTheme); |
|
|
|
|
|
|
|
|
updateThemeIcon(); |
|
|
|
|
|
function toggleTheme() { |
|
|
if (html.classList.contains('dark')) { |
|
|
html.classList.remove('dark'); |
|
|
html.classList.add('light'); |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} else { |
|
|
html.classList.remove('light'); |
|
|
html.classList.add('dark'); |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} |
|
|
updateThemeIcon(); |
|
|
} |
|
|
|
|
|
function updateThemeIcon() { |
|
|
const isDark = html.classList.contains('dark'); |
|
|
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'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
themeToggle.addEventListener('click', toggleTheme); |
|
|
themeToggleMobile.addEventListener('click', toggleTheme); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#mobile-menu a').forEach(link => { |
|
|
link.addEventListener('click', () => { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const backToTopButton = document.getElementById('back-to-top'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contact-form'); |
|
|
|
|
|
contactForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
const subject = document.getElementById('subject').value; |
|
|
const message = document.getElementById('message').value; |
|
|
|
|
|
|
|
|
|
|
|
console.log({ name, email, subject, message }); |
|
|
|
|
|
alert('Thank you for your message! I will get back to you soon.'); |
|
|
contactForm.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.project-card, .skill-pill'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const screenPosition = window.innerHeight / 1.2; |
|
|
|
|
|
if (elementPosition < screenPosition) { |
|
|
element.style.opacity = '1'; |
|
|
element.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.project-card, .skill-pill').forEach(element => { |
|
|
element.style.opacity = '0'; |
|
|
element.style.transform = 'translateY(20px)'; |
|
|
element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
|
|
}); |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
window.addEventListener('load', animateOnScroll); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
