|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Aleksandar Panov | Front-End 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'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
animation: gradient 8s ease infinite; |
|
|
background-size: 200% 200%; |
|
|
} |
|
|
|
|
|
@keyframes gradient { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1.5s ease-in-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.skill-bar { |
|
|
animation: fillBar 1.5s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes fillBar { |
|
|
from { width: 0; } |
|
|
to { width: var(--target-width); } |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.section { |
|
|
opacity: 0; |
|
|
transition: opacity 0.8s ease, transform 0.8s ease; |
|
|
} |
|
|
|
|
|
.section.visible { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.bg-particle { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
|
|
<div id="particles"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md 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">Aleksandar Panov</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#about" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">About</a> |
|
|
<a href="#skills" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Skills</a> |
|
|
<a href="#projects" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Projects</a> |
|
|
<a href="#contact" class="nav-link text-gray-700 hover:text-indigo-600 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="menu-toggle" class="text-gray-700 hover:text-indigo-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Home</a> |
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">About</a> |
|
|
<a href="#skills" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Skills</a> |
|
|
<a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Projects</a> |
|
|
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600 hover:bg-gray-50">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-16"> |
|
|
<div class="max-w-7xl 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 fade-in" style="animation-delay: 0.2s;"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4"> |
|
|
Hi, I'm <span class="gradient-text">Aleksandar Panov</span> |
|
|
</h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-600"> |
|
|
Front-End <span class="gradient-text">Developer</span> |
|
|
</h2> |
|
|
<p class="text-lg text-gray-600 mb-8 max-w-lg"> |
|
|
I craft beautiful, responsive, and user-friendly web experiences with modern technologies. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#contact" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"> |
|
|
Contact Me |
|
|
</a> |
|
|
<a href="#projects" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1"> |
|
|
View Work |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center fade-in" style="animation-delay: 0.4s;"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80"> |
|
|
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 opacity-20 blur-xl"></div> |
|
|
<div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white shadow-xl floating"> |
|
|
<div class="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center"> |
|
|
<div class="text-9xl text-blue-500"> |
|
|
<i class="fas fa-user-circle"></i> |
|
|
</div> |
|
|
</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-gray-400 hover:text-indigo-600"> |
|
|
<i class="fas fa-chevron-down text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white section"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">About <span class="gradient-text">Me</span></h2> |
|
|
<div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-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"> |
|
|
<div class="relative w-64 h-64"> |
|
|
<div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 opacity-20 blur-xl"></div> |
|
|
<div class="relative w-full h-full rounded-full overflow-hidden border-4 border-white shadow-xl"> |
|
|
<div class="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center"> |
|
|
<div class="text-9xl text-blue-500"> |
|
|
<i class="fas fa-user-circle"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 md:pl-16"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Who am I?</h3> |
|
|
<p class="text-gray-600 mb-6 leading-relaxed"> |
|
|
I'm Aleksandar Panov, a passionate front-end developer with a keen eye for design and user experience. |
|
|
I specialize in creating modern, responsive websites and web applications that not only look great |
|
|
but also provide seamless user interactions. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6 leading-relaxed"> |
|
|
With a strong foundation in HTML, CSS, and JavaScript, I love bringing ideas to life in the browser. |
|
|
I'm constantly learning and adapting to new technologies to stay at the forefront of web development. |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4 mt-8"> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4 text-blue-500"> |
|
|
<i class="fas fa-user-tie text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Name</h4> |
|
|
<p class="text-gray-600">Aleksandar Panov</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4 text-purple-500"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Email</h4> |
|
|
<p class="text-gray-600">hello@aleksandarpanov.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4 text-indigo-500"> |
|
|
<i class="fas fa-map-marker-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Location</h4> |
|
|
<p class="text-gray-600">Based Worldwide</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4 text-pink-500"> |
|
|
<i class="fas fa-code text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-800">Speciality</h4> |
|
|
<p class="text-gray-600">Front-End Development</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 bg-gray-50 section"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">My <span class="gradient-text">Skills</span></h2> |
|
|
<div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Coding Skills</h3> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">HTML/CSS</span> |
|
|
<span class="text-gray-500">95%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-blue-500 to-blue-600" style="--target-width: 95%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">JavaScript</span> |
|
|
<span class="text-gray-500">90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-600" style="--target-width: 90%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">React</span> |
|
|
<span class="text-gray-500">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-indigo-500 to-indigo-600" style="--target-width: 85%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">Vue.js</span> |
|
|
<span class="text-gray-500">80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-green-500 to-green-600" style="--target-width: 80%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Design & Tools</h3> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">UI/UX Design</span> |
|
|
<span class="text-gray-500">85%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-pink-500 to-pink-600" style="--target-width: 85%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">Tailwind CSS</span> |
|
|
<span class="text-gray-500">90%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-blue-400 to-blue-500" style="--target-width: 90%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">Git</span> |
|
|
<span class="text-gray-500">80%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-red-500 to-red-600" style="--target-width: 80%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium text-gray-700">Figma</span> |
|
|
<span class="text-gray-500">75%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="skill-bar h-2.5 rounded-full bg-gradient-to-r from-purple-400 to-purple-500" style="--target-width: 75%;"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-16"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-8 text-center">Technologies I Work With</h3> |
|
|
<div class="flex flex-wrap justify-center gap-8"> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-html5 text-4xl text-orange-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">HTML5</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-css3-alt text-4xl text-blue-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">CSS3</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-js text-4xl text-yellow-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">JavaScript</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-react text-4xl text-blue-400 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">React</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-vuejs text-4xl text-green-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">Vue.js</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-sass text-4xl text-pink-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">Sass</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-git-alt text-4xl text-red-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">Git</span> |
|
|
</div> |
|
|
<div class="flex flex-col items-center p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 w-24"> |
|
|
<i class="fab fa-figma text-4xl text-purple-500 mb-2"></i> |
|
|
<span class="text-sm text-gray-600">Figma</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-white section"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">My <span class="gradient-text">Projects</span></h2> |
|
|
<div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-100 to-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-laptop-code text-6xl text-blue-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Modern Dashboard UI</h3> |
|
|
<p class="text-gray-600 mb-4">A responsive admin dashboard built with React and Tailwind CSS, featuring interactive charts and data visualization.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">React</span> |
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Tailwind</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Chart.js</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-external-link-alt"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-100 to-pink-100 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-cart text-6xl text-purple-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">E-commerce Platform</h3> |
|
|
<p class="text-gray-600 mb-4">A full-featured online store with product catalog, cart functionality, and checkout process built with Vue.js.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Vue.js</span> |
|
|
<span class="px-3 py-1 bg-red-100 text-red-800 text-xs font-medium rounded-full">Firebase</span> |
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded-full">Vuex</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-external-link-alt"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl overflow-hidden shadow-md card-hover"> |
|
|
<div class="h-48 bg-gradient-to-r from-indigo-100 to-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-6xl text-indigo-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-2">Weather App</h3> |
|
|
<p class="text-gray-600 mb-4">A weather application that displays current and forecasted weather data based on user location or search.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">JavaScript</span> |
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">API</span> |
|
|
<span class="px-3 py-1 bg-pink-100 text-pink-800 text-xs font-medium rounded-full">CSS3</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700"> |
|
|
<i class="fas fa-external-link-alt"></i> Live Demo |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-github"></i> Code |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
View All Projects |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-gray-50 section"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Get In <span class="gradient-text">Touch</span></h2> |
|
|
<div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto"></div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Contact Information</h3> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
Feel free to reach out to me for any questions or opportunities. I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions. |
|
|
</p> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-lg p-3"> |
|
|
<i class="fas fa-envelope text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Email</h4> |
|
|
<p class="text-gray-600">hello@aleksandarpanov.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-purple-100 rounded-lg p-3"> |
|
|
<i class="fas fa-phone-alt text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Phone</h4> |
|
|
<p class="text-gray-600">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3"> |
|
|
<i class="fas fa-map-marker-alt text-indigo-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Location</h4> |
|
|
<p class="text-gray-600">Based Worldwide</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-10"> |
|
|
<h4 class="text-lg font-medium text-gray-900 mb-4">Follow Me</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-colors"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white hover:bg-blue-700 transition-colors"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-white hover:bg-gray-900 transition-colors"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center text-white hover:bg-pink-600 transition-colors"> |
|
|
<i class="fab fa-dribbble"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Your Name</label> |
|
|
<input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Message</label> |
|
|
<textarea id="message" name="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl 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"> |
|
|
<span class="text-xl font-bold gradient-text">Aleksandar Panov</span> |
|
|
<p class="mt-2 text-gray-400">Front-End Developer</p> |
|
|
</div> |
|
|
<div class="flex flex-col items-center md:items-end"> |
|
|
<div class="flex space-x-6 mb-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
|
<i class="fab fa-dribbble"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
© 2023 Aleksandar Panov. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
document.getElementById('mobile-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('mobile-menu').classList.add('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sections = document.querySelectorAll('.section'); |
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver((entries, observer) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('visible'); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
sections.forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
|
|
|
|
|
|
function createParticles() { |
|
|
const particlesContainer = document.getElementById('particles'); |
|
|
const particleCount = 30; |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.classList.add('bg-particle'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 10 + 5; |
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
const delay = Math.random() * 5; |
|
|
const duration = Math.random() * 10 + 10; |
|
|
const opacity = Math.random() * 0.2 + 0.1; |
|
|
const color = `rgba(${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${Math.floor(Math.random() * 100 + 155)}, ${opacity})`; |
|
|
|
|
|
|
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
particle.style.left = `${posX}%`; |
|
|
particle.style.top = `${posY}%`; |
|
|
particle.style.backgroundColor = color; |
|
|
particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`; |
|
|
|
|
|
particlesContainer.appendChild(particle); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', createParticles); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const skillBars = document.querySelectorAll('.skill-bar'); |
|
|
|
|
|
skillBars.forEach(bar => { |
|
|
const targetWidth = bar.style.getPropertyValue('--target-width'); |
|
|
bar.style.width = '0'; |
|
|
|
|
|
setTimeout(() => { |
|
|
bar.style.width = targetWidth; |
|
|
}, 500); |
|
|
}); |
|
|
}); |
|
|
</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=codepanov/panov" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
