generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
24 KiB
251 lines
24 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>À propos - Jules Merienne</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="navigation.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white">
|
|
<nav id="navbar"></nav>
|
|
|
|
<main>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-12 text-center">
|
|
À propos de moi
|
|
</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
|
<div class="animate-on-scroll" data-animation="fade-up">
|
|
<h2 class="text-2xl font-bold mb-6">Qui suis-je ?</h2>
|
|
<p class="mb-6">Je m'appelle Jules Merienne, étudiant en première année de BUT informatique à Clermont-Ferrand. Passionné par le développement web et le design, je combine créativité et rigueur technique dans mes projets.</p>
|
|
</div>
|
|
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
|
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
|
<svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
|
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
|
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
|
<svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="animate-on-scroll" data-animation="fade-up">
|
|
<h2 class="text-2xl font-bold mb-6">Mon parcours</h2>
|
|
<p class="mb-6">Depuis 2020, j'ai commencé mon apprentissage en autodidacte via Udemy et OpenClassrooms. Après une initiation au Python, je me suis spécialisé dans le développement web et l'UI/UX design, une passion qui m'anime depuis 2022.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-32">
|
|
<div class="animate-on-scroll" data-animation="fade-up">
|
|
<h2 class="text-2xl font-bold mb-6">Ma vision</h2>
|
|
<p class="mb-6">Je m'efforce de créer des applications optimisées pour l'expérience utilisateur, en explorant constamment de nouvelles technologies et approches. Mon objectif est de devenir ingénieur en informatique après mon BUT.</p>
|
|
</div>
|
|
<div class="relative animate-on-scroll" data-animation="fade-up" data-delay="100">
|
|
<div class="w-80 h-80 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full mx-auto flex items-center justify-center">
|
|
<svg class="w-32 h-32 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-32">
|
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-12">
|
|
Mon Parcours
|
|
</h2>
|
|
|
|
<div class="relative max-w-4xl mx-auto">
|
|
<div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-purple-500 transform -translate-x-1/2"></div>
|
|
|
|
<div class="space-y-12">
|
|
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="200">
|
|
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h3 class="text-xl font-semibold text-gray-900">Freelance Designer & Développeur</h3>
|
|
<span class="text-purple-600 font-medium">2024 - Présent</span>
|
|
</div>
|
|
<p class="text-purple-600 mb-3 font-medium">Travail Indépendant</p>
|
|
<p class="text-gray-600">
|
|
Création de solutions numériques complètes pour des clients variés.
|
|
Design UX/UI, développement web et mobile, conseil en stratégie digitale.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">React</span>
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Next.js</span>
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">AdonisJS</span>
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Node.js</span>
|
|
<span class="px-3 py-1 bg-pink-100 text-pink-800 text-sm rounded-full">Figma</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="400">
|
|
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h3 class="text-xl font-semibold text-gray-900">BUT Informatique</h3>
|
|
<span class="text-blue-600 font-medium">2024 - Présent</span>
|
|
</div>
|
|
<p class="text-blue-600 mb-3 font-medium">Université Clermont Auvergne</p>
|
|
<p class="text-gray-600">
|
|
Formation complète en développement logiciel, bases de données, réseaux et gestion de projet.
|
|
Projets pratiques en équipe et stage en entreprise.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm rounded-full">Linux</span>
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">C#</span>
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">SQL</span>
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Gestion de projet</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative flex items-center animate-on-scroll" data-animation="slide-right" data-delay="600">
|
|
<div class="w-full ml-8 bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
|
<h3 class="text-xl font-semibold text-gray-900">Baccalauréat Général</h3>
|
|
<span class="text-green-600 font-medium">2021 - 2024</span>
|
|
</div>
|
|
<p class="text-green-600 mb-3 font-medium">Lycée Théodore de Banville</p>
|
|
<p class="text-gray-600 mb-3">
|
|
Spécialités Mathématiques et Numérique et Sciences Informatiques (NSI).
|
|
<span class="font-semibold text-gray-800">Mention Bien</span> - Première approche de la programmation et de l'algorithmique.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mt-4">
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 text-sm rounded-full">Python</span>
|
|
<span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm rounded-full">Algorithmique</span>
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">Mathématiques</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-40">
|
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-20 animate-on-scroll" data-animation="fade-up">
|
|
Stack Technique
|
|
</h2>
|
|
|
|
<div class="mb-32 max-w-6xl mx-auto">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-16 text-center animate-on-scroll" data-animation="fade-up" data-delay="100">Développement Web</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8 stagger-container">
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.948.645-.16 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.645.16-1.315.283-2.015.386.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.405-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">React</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-black hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-black to-gray-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-gray-800 transition-colors">Next.js</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<span class="text-white font-bold text-xl">TS</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">TypeScript</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-green-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-green-600 to-green-700 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-green-600 transition-colors">AdonisJS</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-cyan-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<span class="text-white font-bold text-lg">TW</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-cyan-600 transition-colors">Tailwind</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-purple-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1 animate-on-scroll" data-animation="fade-up">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<span class="text-white font-bold text-lg">FM</span>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">Figma</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-32 max-w-6xl mx-auto">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-16 text-center">Langages de Programmation</h3>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8">
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-yellow-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M0,0 C0,0 5.166,1.222 12,1.222 C18.834,1.222 24,0 24,0 L24,24 L0,24 L0,0 Z M12,4.5 C8.418,4.5 5.5,7.418 5.5,11 C5.5,14.582 8.418,17.5 12,17.5 C15.582,17.5 18.5,14.582 18.5,11 C18.5,7.418 15.582,4.5 12,4.5 Z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-yellow-600 transition-colors">Python</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">C</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">C++</span>
|
|
</div>
|
|
|
|
<div class="group flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-200 hover:border-purple-300 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
|
|
<div class="w-16 h-16 bg-gradient-to-r from-purple-600 to-purple-800 rounded-xl mb-4 flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
|
|
<svg class="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="font-semibold text-gray-900 group-hover:text-purple-600 transition-colors">C#</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initNavigation();
|
|
});
|
|
</script>
|
|
<script src="animations.js"></script>
|
|
</body>
|
|
</html> |