|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Modern Portfolio | Professional Designer</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> |
|
|
|
@keyframes fadeIn { |
|
from { opacity: 0; transform: translateY(20px); } |
|
to { opacity: 1; transform: translateY(0); } |
|
} |
|
|
|
@keyframes float { |
|
0% { transform: translateY(0px); } |
|
50% { transform: translateY(-15px); } |
|
100% { transform: translateY(0px); } |
|
} |
|
|
|
@keyframes gradientBG { |
|
0% { background-position: 0% 50%; } |
|
50% { background-position: 100% 50%; } |
|
100% { background-position: 0% 50%; } |
|
} |
|
|
|
.animate-fade-in { |
|
animation: fadeIn 1s ease-out forwards; |
|
} |
|
|
|
.animate-float { |
|
animation: float 4s ease-in-out infinite; |
|
} |
|
|
|
.gradient-bg { |
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); |
|
background-size: 400% 400%; |
|
animation: gradientBG 15s ease infinite; |
|
} |
|
|
|
.card-hover { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.card-hover:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
} |
|
|
|
.nav-link::after { |
|
content: ''; |
|
position: absolute; |
|
width: 0; |
|
height: 2px; |
|
bottom: -2px; |
|
left: 0; |
|
background-color: white; |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.skill-bar { |
|
height: 8px; |
|
border-radius: 4px; |
|
background: rgba(255, 255, 255, 0.2); |
|
overflow: hidden; |
|
} |
|
|
|
.skill-progress { |
|
height: 100%; |
|
border-radius: 4px; |
|
background: white; |
|
transform-origin: left; |
|
transform: scaleX(0); |
|
transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1); |
|
} |
|
|
|
.animate-progress { |
|
transform: scaleX(1); |
|
} |
|
|
|
.timeline-item::before { |
|
content: ''; |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
background: white; |
|
left: -10px; |
|
top: 0; |
|
} |
|
|
|
.timeline::before { |
|
content: ''; |
|
position: absolute; |
|
width: 2px; |
|
height: 100%; |
|
background: rgba(255, 255, 255, 0.2); |
|
left: 0; |
|
top: 0; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-900 text-white font-sans"> |
|
|
|
<nav class="fixed w-full z-50 bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-sm"> |
|
<div class="container mx-auto px-6 py-4"> |
|
<div class="flex justify-between items-center"> |
|
<a href="#" class="text-2xl font-bold text-white animate-fade-in" style="animation-delay: 0.2s;"> |
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-blue-500">PORTFOLIO</span> |
|
</a> |
|
|
|
<div class="hidden md:flex space-x-8 animate-fade-in" style="animation-delay: 0.4s;"> |
|
<a href="#home" class="nav-link">Home</a> |
|
<a href="#about" class="nav-link">About</a> |
|
<a href="#skills" class="nav-link">Skills</a> |
|
<a href="#work" class="nav-link">Work</a> |
|
<a href="#contact" class="nav-link">Contact</a> |
|
</div> |
|
|
|
<button class="md:hidden focus:outline-none animate-fade-in" style="animation-delay: 0.4s;" id="menu-toggle"> |
|
<i class="fas fa-bars text-2xl"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden pt-4" id="mobile-menu"> |
|
<div class="flex flex-col space-y-4"> |
|
<a href="#home" class="nav-link">Home</a> |
|
<a href="#about" class="nav-link">About</a> |
|
<a href="#skills" class="nav-link">Skills</a> |
|
<a href="#work" class="nav-link">Work</a> |
|
<a href="#contact" class="nav-link">Contact</a> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section id="home" class="gradient-bg min-h-screen flex items-center justify-center relative overflow-hidden"> |
|
<div class="absolute inset-0 bg-black opacity-30"></div> |
|
|
|
<div class="container mx-auto px-6 z-10"> |
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
<div class="md:w-1/2 animate-fade-in" style="animation-delay: 0.6s;"> |
|
<h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-500">Alex</span></h1> |
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6">Creative <span class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">Designer</span> & Developer</h2> |
|
<p class="text-lg mb-8 text-gray-200 max-w-lg">I craft beautiful digital experiences that blend creativity with technology to deliver impactful solutions.</p> |
|
<div class="flex space-x-4"> |
|
<a href="#work" class="px-6 py-3 bg-white text-gray-900 font-semibold rounded-full hover:bg-gray-200 transition duration-300 transform hover:scale-105">View Work</a> |
|
<a href="#contact" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-full hover:bg-white hover:text-gray-900 transition duration-300 transform hover:scale-105">Contact Me</a> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-1/2 mt-12 md:mt-0 flex justify-center animate-fade-in animate-float" style="animation-delay: 0.8s;"> |
|
<div class="relative"> |
|
<div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-2xl"> |
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="absolute -bottom-5 -right-5 bg-gray-900 p-4 rounded-full shadow-xl"> |
|
<div class="w-16 h-16 rounded-full bg-gradient-to-r from-pink-500 to-blue-500 flex items-center justify-center"> |
|
<i class="fas fa-code text-2xl text-white"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
|
<a href="#about" class="text-white text-2xl"> |
|
<i class="fas fa-chevron-down"></i> |
|
</a> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="about" class="py-20 bg-gray-800"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16 animate-fade-in"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">About <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">Me</span></h2> |
|
<div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-pink-600 mx-auto"></div> |
|
</div> |
|
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
<div class="md:w-1/3 mb-10 md:mb-0 flex justify-center animate-fade-in" style="animation-delay: 0.2s;"> |
|
<div class="relative"> |
|
<div class="w-64 h-64 rounded-lg overflow-hidden shadow-2xl transform rotate-3"> |
|
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="About" class="w-full h-full object-cover"> |
|
</div> |
|
<div class="absolute -bottom-5 -right-5 bg-gray-900 p-4 rounded-lg shadow-xl transform -rotate-6"> |
|
<div class="w-16 h-16 rounded-lg bg-gradient-to-r from-yellow-400 to-red-500 flex items-center justify-center"> |
|
<i class="fas fa-award text-2xl text-white"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="md:w-2/3 md:pl-12 animate-fade-in" style="animation-delay: 0.4s;"> |
|
<h3 class="text-2xl font-semibold mb-6">Who am I?</h3> |
|
<p class="text-gray-300 mb-6 leading-relaxed"> |
|
I'm a passionate designer and developer with over 8 years of experience creating digital products that people love. My journey began with a degree in Graphic Design, but my curiosity led me to explore the world of web development, where I found my true calling in blending aesthetics with functionality. |
|
</p> |
|
<p class="text-gray-300 mb-8 leading-relaxed"> |
|
I believe in design that solves problems, not just looks pretty. My approach combines user-centered design principles with cutting-edge technology to create experiences that are both beautiful and intuitive. When I'm not designing or coding, you can find me hiking, reading sci-fi novels, or experimenting with new cooking recipes. |
|
</p> |
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
<div class="text-2xl text-pink-500 mb-2"> |
|
<i class="fas fa-project-diagram"></i> |
|
</div> |
|
<h4 class="font-semibold">150+</h4> |
|
<p class="text-sm text-gray-400">Projects Completed</p> |
|
</div> |
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
<div class="text-2xl text-blue-500 mb-2"> |
|
<i class="fas fa-users"></i> |
|
</div> |
|
<h4 class="font-semibold">80+</h4> |
|
<p class="text-sm text-gray-400">Happy Clients</p> |
|
</div> |
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
<div class="text-2xl text-yellow-500 mb-2"> |
|
<i class="fas fa-trophy"></i> |
|
</div> |
|
<h4 class="font-semibold">12</h4> |
|
<p class="text-sm text-gray-400">Awards Won</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="skills" class="py-20 bg-gray-900"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16 animate-fade-in"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">My <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-600">Skills</span></h2> |
|
<div class="w-20 h-1 bg-gradient-to-r from-blue-400 to-green-600 mx-auto"></div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
<div class="animate-fade-in" style="animation-delay: 0.2s;"> |
|
<h3 class="text-2xl font-semibold mb-6">Technical Skills</h3> |
|
|
|
<div class="space-y-6"> |
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>UI/UX Design</span> |
|
<span>95%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-pink-500 to-purple-600" data-width="95%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Web Development</span> |
|
<span>90%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-blue-500 to-green-500" data-width="90%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Mobile App Design</span> |
|
<span>85%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-yellow-500 to-red-500" data-width="85%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Branding</span> |
|
<span>80%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-purple-500 to-pink-500" data-width="80%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="animate-fade-in" style="animation-delay: 0.4s;"> |
|
<h3 class="text-2xl font-semibold mb-6">Professional Skills</h3> |
|
|
|
<div class="space-y-6"> |
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Communication</span> |
|
<span>95%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-green-500 to-blue-500" data-width="95%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Team Work</span> |
|
<span>90%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-orange-500 to-yellow-500" data-width="90%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Project Management</span> |
|
<span>85%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-red-500 to-pink-500" data-width="85%"></div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="flex justify-between mb-2"> |
|
<span>Creativity</span> |
|
<span>98%</span> |
|
</div> |
|
<div class="skill-bar"> |
|
<div class="skill-progress bg-gradient-to-r from-indigo-500 to-purple-500" data-width="98%"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-16 animate-fade-in" style="animation-delay: 0.6s;"> |
|
<h3 class="text-2xl font-semibold mb-8 text-center">Tools & Technologies</h3> |
|
|
|
<div class="flex flex-wrap justify-center gap-6"> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-figma text-4xl text-purple-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-adobe text-4xl text-red-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-html5 text-4xl text-orange-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-css3-alt text-4xl text-blue-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-js text-4xl text-yellow-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-react text-4xl text-blue-400"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-node-js text-4xl text-green-500"></i> |
|
</div> |
|
<div class="w-20 h-20 bg-gray-800 rounded-lg flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
<i class="fab fa-git-alt text-4xl text-orange-600"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gray-800"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16 animate-fade-in"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Experience & <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-red-600">Education</span></h2> |
|
<div class="w-20 h-1 bg-gradient-to-r from-yellow-400 to-red-600 mx-auto"></div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
<div class="animate-fade-in" style="animation-delay: 0.2s;"> |
|
<h3 class="text-2xl font-semibold mb-8 flex items-center"> |
|
<i class="fas fa-briefcase mr-3 text-yellow-500"></i> Experience |
|
</h3> |
|
|
|
<div class="relative pl-8 timeline"> |
|
<div class="mb-8 relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">Senior UI/UX Designer</h4> |
|
<span class="text-sm bg-yellow-500 text-gray-900 px-2 py-1 rounded">2020 - Present</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">TechVision Inc.</h5> |
|
<p class="text-gray-300">Leading design team to create innovative digital products for Fortune 500 clients. Responsible for design strategy and user research.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-8 relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">UI Designer</h4> |
|
<span class="text-sm bg-yellow-500 text-gray-900 px-2 py-1 rounded">2017 - 2020</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">Digital Creations</h5> |
|
<p class="text-gray-300">Designed web and mobile interfaces for various clients. Collaborated with developers to implement designs.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">Junior Designer</h4> |
|
<span class="text-sm bg-yellow-500 text-gray-900 px-2 py-1 rounded">2015 - 2017</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">Creative Studio</h5> |
|
<p class="text-gray-300">Started my career assisting senior designers with various projects. Learned fundamentals of design and user experience.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="animate-fade-in" style="animation-delay: 0.4s;"> |
|
<h3 class="text-2xl font-semibold mb-8 flex items-center"> |
|
<i class="fas fa-graduation-cap mr-3 text-red-500"></i> Education |
|
</h3> |
|
|
|
<div class="relative pl-8 timeline"> |
|
<div class="mb-8 relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">Master in Interaction Design</h4> |
|
<span class="text-sm bg-red-500 text-gray-900 px-2 py-1 rounded">2018 - 2020</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">Stanford University</h5> |
|
<p class="text-gray-300">Specialized in human-computer interaction and advanced UX methodologies. Thesis on emotional design in mobile applications.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="mb-8 relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">Bachelor of Fine Arts</h4> |
|
<span class="text-sm bg-red-500 text-gray-900 px-2 py-1 rounded">2011 - 2015</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">School of Visual Arts</h5> |
|
<p class="text-gray-300">Major in Graphic Design with minor in Digital Media. Graduated with honors.</p> |
|
</div> |
|
</div> |
|
|
|
<div class="relative timeline-item"> |
|
<div class="bg-gray-700 p-6 rounded-lg shadow-lg"> |
|
<div class="flex justify-between items-center mb-2"> |
|
<h4 class="font-semibold text-lg">Web Development Bootcamp</h4> |
|
<span class="text-sm bg-red-500 text-gray-900 px-2 py-1 rounded">2016</span> |
|
</div> |
|
<h5 class="text-blue-400 mb-3">General Assembly</h5> |
|
<p class="text-gray-300">Intensive 12-week program covering full-stack web development. Learned HTML, CSS, JavaScript, and React.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section id="work" class="py-20 bg-gray-900"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16 animate-fade-in"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">My <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-600">Work</span></h2> |
|
<div class="w-20 h-1 bg-gradient-to-r from-purple-400 to-blue-600 mx-auto"></div> |
|
<p class="text-gray-400 mt-6 max-w-2xl mx-auto">Here are some of my recent projects. Each one was carefully crafted to solve specific problems and deliver exceptional user experiences.</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover animate-fade-in" style="animation-delay: 0.2s;"> |
|
<div class="relative overflow-hidden h-64"> |
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 1" class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
<div class="absolute bottom-0 left-0 p-6"> |
|
<h3 class="text-xl font-bold text-white">E-commerce Platform</h3> |
|
<p class="text-gray-300">UI/UX Design, Frontend</p> |
|
</div> |
|
</div> |
|
<div class="p-6"> |
|
<p class="text-gray-300 mb-4">A modern e-commerce platform with intuitive navigation and seamless checkout experience.</p> |
|
<div class="flex flex-wrap gap-2"> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">React</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">Figma</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">Node.js</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover animate-fade-in" style="animation-delay: 0.4s;"> |
|
<div class="relative overflow-hidden h-64"> |
|
<img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Project 2" class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
<div class="absolute bottom-0 left-0 p-6"> |
|
<h3 class="text-xl font-bold text-white">Health & Fitness App</h3> |
|
<p class="text-gray-300">Mobile Design, UX Research</p> |
|
</div> |
|
</div> |
|
<div class="p-6"> |
|
<p class="text-gray-300 mb-4">A personalized fitness app that tracks workouts, nutrition, and health metrics with beautiful data visualization.</p> |
|
<div class="flex flex-wrap gap-2"> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">Figma</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">Swift</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">Firebase</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover animate-fade-in" style="animation-delay: 0.6s;"> |
|
<div class="relative overflow-hidden h-64"> |
|
<img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Project 3" class="w-full h-full object-cover transition duration-500 hover:scale-110"> |
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-80"></div> |
|
<div class="absolute bottom-0 left-0 p-6"> |
|
<h3 class="text-xl font-bold text-white">Corporate Website</h3> |
|
<p class="text-gray-300">Web Design, Development</p> |
|
</div> |
|
</div> |
|
<div class="p-6"> |
|
<p class="text-gray-300 mb-4">A responsive corporate website with interactive elements and smooth animations to enhance user engagement.</p> |
|
<div class="flex flex-wrap gap-2"> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">HTML/CSS</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">JavaScript</span> |
|
<span class="px-3 py-1 bg-gray-700 text-sm rounded-full">GSAP</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="text-center mt-12 animate-fade-in" style="animation-delay: 0.8s;"> |
|
<a href="#" class="inline-block px-8 py-3 bg-gradient-to-r from-purple-500 to-blue-600 text-white font-semibold rounded-full hover:shadow-xl transition duration-300 transform hover:scale-105"> |
|
View All Projects |
|
</a> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gray-800"> |
|
<div class="container mx-auto px-6"> |
|
<div class="text-center mb-16 animate-fade-in"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Client <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-orange-500">Testimonials</span></h2> |
|
<div class="w-20 h-1 bg-gradient-to-r from-pink-500 to-orange-500 mx-auto"></div> |
|
<p class="text-gray-400 mt-6 max-w-2xl mx-auto">Here's what some of my clients and colleagues have to say about working with me.</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-gray-700 p-8 rounded-xl shadow-lg card-hover animate-fade-in" style="animation-delay: 0.2s;"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Client" class="w-full h-full object-cover"> |
|
</div> |
|
<div> |
|
<h4 class="font-semibold">Sarah Johnson</h4> |
|
<p class="text-gray-400 text-sm">CEO, TechSolutions</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 italic mb-6">"Alex transformed our outdated website into a modern, user-friendly platform that increased our conversion rate by 40%. His attention to detail and creative solutions were exactly what we needed."</p> |
|
<div class="flex text-yellow-400"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 p-8 rounded-xl shadow-lg card-hover animate-fade-in" style="animation-delay: 0.4s;"> |
|
<div class="flex items-center mb-6"> |
|
<div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
|
< |
|
</html> |
