Initial commit: Atomaste website
This commit is contained in:
560
Website Template/Full Stack Developer Portfolio Template.html
Normal file
560
Website Template/Full Stack Developer Portfolio Template.html
Normal file
@@ -0,0 +1,560 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" class="scroll-smooth">
|
||||
<head><meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ATOMASTE | Solutions d'ingénierie Mécanique - FEA & Simulation</title>
|
||||
<meta name="description" content="Atomaste - Ingénierie mécanique sur mesure : simulation FEA, optimisation structurelle, conception CAO et fabrication additive en Abitibi-Témiscamingue.">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></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:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #0a0a0a;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
/* Ambient Glows - Cyan theme matching logo */
|
||||
.ambient-glow {
|
||||
position: fixed;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(0, 200, 220, 0.04) 0%, rgba(0,0,0,0) 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.glow-top { top: -20%; left: -10%; }
|
||||
.glow-bottom { bottom: -20%; right: -10%; }
|
||||
.glow-center { top: 40%; left: 30%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 150, 180, 0.05) 0%, rgba(0,0,0,0) 70%); }
|
||||
/* Utility for hiding scrollbar but allowing scroll */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* Image Mask for Hero */
|
||||
.hero-mask {
|
||||
-webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
||||
mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
||||
}
|
||||
/* Text Gradient - Cyan theme */
|
||||
.text-gradient-cyan {
|
||||
background: linear-gradient(135deg, #ffffff 30%, #00d4e6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(20, 20, 20, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.hover-trigger .hover-target {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hover-trigger:hover .hover-target {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
/* Mesh animation for hero */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { box-shadow: 0 0 20px rgba(0, 200, 220, 0.3); }
|
||||
50% { box-shadow: 0 0 40px rgba(0, 200, 220, 0.5); }
|
||||
}
|
||||
.mesh-glow {
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
}
|
||||
</style></head>
|
||||
<body class="text-gray-400 antialiased selection:bg-cyan-500/20 selection:text-cyan-200 relative overflow-x-hidden">
|
||||
|
||||
<!-- Ambient Background Effects -->
|
||||
<div class="ambient-glow glow-top"></div>
|
||||
<div class="ambient-glow glow-bottom"></div>
|
||||
<div class="ambient-glow glow-center"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 w-full z-50 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="Media/logo_atomaste.png" alt="Atomaste Logo" class="h-10">
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
||||
<a href="#about" class="hover:text-white transition-colors">À propos</a>
|
||||
<a href="#services" class="hover:text-white transition-colors">Services</a>
|
||||
<a href="#expertise" class="hover:text-white transition-colors">Expertise</a>
|
||||
<a href="#projects" class="hover:text-white transition-colors">Projets</a>
|
||||
</div>
|
||||
<a href="#contact" class="group flex items-center gap-2 text-xs font-semibold tracking-wide uppercase text-white border border-cyan-500/30 px-5 py-2.5 rounded-full hover:bg-cyan-500 hover:text-black transition-all duration-300">
|
||||
Contactez-moi
|
||||
<i data-lucide="arrow-right" class="w-3 h-3 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-24">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-[90vh] flex flex-col justify-center px-6 max-w-7xl mx-auto relative pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-0 items-center">
|
||||
<!-- Left: Typography -->
|
||||
<div class="lg:col-span-7 flex flex-col gap-8 z-20">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
<span class="font-mono text-xs text-cyan-400 tracking-widest uppercase">Disponible pour projets</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-semibold text-white tracking-tighter leading-[0.95] uppercase">
|
||||
Simuler <br>
|
||||
<span class="text-gray-600">pour mieux</span> <br>
|
||||
<span class="text-gradient-cyan">Concevoir</span>
|
||||
</h1>
|
||||
|
||||
<p class="max-w-md text-lg text-gray-400 leading-relaxed font-light border-l-2 border-cyan-500/50 pl-6 mt-4">
|
||||
Ingénierie mécanique sur mesure en Abitibi-Témiscamingue. Simulation FEA, optimisation structurelle et conception innovante avec précision.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-6 mt-8">
|
||||
<a href="#services" class="bg-cyan-500 text-black px-8 py-4 rounded-sm font-semibold tracking-tight hover:bg-cyan-400 transition-all transform hover:-translate-y-1 flex items-center gap-2 group">
|
||||
DÉCOUVRIR MES SERVICES
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
<a href="#projects" class="text-white px-6 py-4 rounded-sm border border-white/10 hover:border-cyan-500/50 transition-all flex items-center gap-2 text-sm tracking-wide">
|
||||
<i data-lucide="box" class="w-4 h-4"></i>
|
||||
VOIR PROJETS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Visual & Stats -->
|
||||
<div class="lg:col-span-5 relative h-[500px] lg:h-[700px] flex items-center justify-center lg:justify-end">
|
||||
<!-- Circular Image Mask with FEA visualization -->
|
||||
<div class="absolute inset-0 flex items-center justify-center lg:justify-end">
|
||||
<div class="w-[300px] h-[300px] md:w-[450px] md:h-[450px] rounded-full overflow-hidden border border-cyan-500/20 relative group mesh-glow">
|
||||
<img src="https://images.unsplash.com/photo-1581092921461-eab62e97a780?w=800" alt="FEA Simulation Mesh" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-110 group-hover:scale-100">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-cyan-900/20 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Stats -->
|
||||
<div class="absolute top-10 right-0 lg:right-10 glass-card p-6 rounded-lg" style="animation: float 6s ease-in-out infinite;">
|
||||
<div class="text-3xl font-semibold text-white tracking-tighter">FEA</div>
|
||||
<div class="text-xs text-cyan-400 uppercase tracking-widest mt-1">Simulation</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-20 left-0 lg:left-10 glass-card p-6 rounded-lg" style="animation: float 8s ease-in-out infinite 1s;">
|
||||
<div class="text-3xl font-semibold text-white tracking-tighter">CAO</div>
|
||||
<div class="text-xs text-cyan-400 uppercase tracking-widest mt-1">Conception</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-1/2 -right-4 lg:-right-10 glass-card p-4 rounded-lg flex items-center gap-3">
|
||||
<div class="bg-cyan-500/20 p-2 rounded-full">
|
||||
<i data-lucide="cpu" class="w-4 h-4 text-cyan-400"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-white">Optimisation</div>
|
||||
<div class="text-[10px] text-gray-500 font-mono">Structurelle</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="relative">
|
||||
<div class="aspect-square w-full max-w-md mx-auto rounded-2xl overflow-hidden relative">
|
||||
<img src="Media/logo_atomaste.png" alt="Atomaste" class="w-full h-full object-contain p-8 bg-[#0d1117]">
|
||||
<div class="absolute inset-0 border border-cyan-500/10 rounded-2xl"></div>
|
||||
</div>
|
||||
<!-- Decorative Elements -->
|
||||
<div class="absolute -z-10 top-10 -left-10 w-full h-full border border-dashed border-cyan-500/10 rounded-2xl hidden md:block"></div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">À Propos</h2>
|
||||
<h3 class="text-3xl md:text-4xl font-semibold text-white tracking-tight mb-8">
|
||||
Solutions d'ingénierie mécanique répondant à vos besoins spécifiques.
|
||||
</h3>
|
||||
<div class="space-y-6 text-gray-400 font-light leading-relaxed">
|
||||
<p>
|
||||
Atomaste offre des services d'ingénierie mécanique sur mesure en Abitibi-Témiscamingue.
|
||||
Spécialisé en simulation par éléments finis (FEA) et optimisation structurelle, je transforme
|
||||
vos concepts en solutions techniques validées.
|
||||
</p>
|
||||
<p>
|
||||
Mon approche combine rigueur analytique et innovation pour livrer des résultats précis
|
||||
et fiables. De l'analyse de contraintes à la conception CAO, chaque projet bénéficie
|
||||
d'une expertise technique approfondie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 mt-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="activity" class="text-cyan-400 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Simulation FEA</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="target" class="text-cyan-400 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Optimisation</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="pen-tool" class="text-cyan-400 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Conception CAO</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="check-circle" class="text-cyan-400 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Précision</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - PRIMARY SERVICES -->
|
||||
<section id="services" class="py-24 bg-[#0d0d0d]">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||||
<div>
|
||||
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Services Principaux</h2>
|
||||
<h3 class="text-4xl font-semibold text-white tracking-tight">Simulation & Optimisation</h3>
|
||||
</div>
|
||||
<p class="max-w-md text-sm text-gray-500 leading-relaxed">
|
||||
Expertise de pointe en analyse par éléments finis et optimisation structurelle pour valider et améliorer vos conceptions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Primary Services Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||
<!-- FEA Simulation -->
|
||||
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
||||
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
||||
<i data-lucide="activity" class="w-7 h-7 text-cyan-400"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-semibold text-white mb-4">Simulation FEA</h4>
|
||||
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
||||
Analyse par éléments finis pour valider vos designs. Études de contraintes, déformations, fatigue et transfert thermique.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Analyse statique & dynamique
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Études de fatigue
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Simulation thermique
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Optimization -->
|
||||
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
||||
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
||||
<i data-lucide="target" class="w-7 h-7 text-cyan-400"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-semibold text-white mb-4">Optimisation Structurelle</h4>
|
||||
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
||||
Optimisation topologique et paramétrique pour maximiser la performance tout en minimisant le poids et les coûts.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Optimisation topologique
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Réduction de masse
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Design for AM
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Validation & Certification -->
|
||||
<div class="glass-card p-8 rounded-xl border border-cyan-500/20 hover:border-cyan-500/40 transition-all group">
|
||||
<div class="bg-cyan-500/10 w-14 h-14 rounded-lg flex items-center justify-center mb-6 group-hover:bg-cyan-500/20 transition-colors">
|
||||
<i data-lucide="shield-check" class="w-7 h-7 text-cyan-400"></i>
|
||||
</div>
|
||||
<h4 class="text-xl font-semibold text-white mb-4">Validation & Rapports</h4>
|
||||
<p class="text-gray-400 text-sm leading-relaxed mb-6">
|
||||
Documentation technique complète et rapports de validation pour vos processus de certification.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm text-gray-500">
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Rapports d'analyse détaillés
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Validation de conception
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<i data-lucide="check" class="w-4 h-4 text-cyan-400"></i>
|
||||
Support certification
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Services -->
|
||||
<div class="border-t border-white/5 pt-16">
|
||||
<h3 class="text-xs font-mono text-gray-500 tracking-widest uppercase mb-8">Services Complémentaires</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<!-- Design CAO -->
|
||||
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
||||
<i data-lucide="pen-tool" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
||||
<h5 class="text-white font-medium mb-2">Conception CAO</h5>
|
||||
<p class="text-xs text-gray-500">Modélisation 3D et mise en plan technique</p>
|
||||
</div>
|
||||
|
||||
<!-- Additive Manufacturing -->
|
||||
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
||||
<i data-lucide="layers" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
||||
<h5 class="text-white font-medium mb-2">Fabrication Additive</h5>
|
||||
<p class="text-xs text-gray-500">Design optimisé pour impression 3D</p>
|
||||
</div>
|
||||
|
||||
<!-- Project Management -->
|
||||
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
||||
<i data-lucide="gantt-chart" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
||||
<h5 class="text-white font-medium mb-2">Gestion de Projet</h5>
|
||||
<p class="text-xs text-gray-500">Coordination et suivi technique</p>
|
||||
</div>
|
||||
|
||||
<!-- Consulting -->
|
||||
<div class="glass-card p-6 rounded-lg hover:bg-white/5 transition-colors group">
|
||||
<i data-lucide="message-circle" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-6 h-6 mb-4"></i>
|
||||
<h5 class="text-white font-medium mb-2">Consultation</h5>
|
||||
<p class="text-xs text-gray-500">Expertise et conseils techniques</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Expertise -->
|
||||
<section id="expertise" class="py-24 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||||
<div>
|
||||
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Expertise</h2>
|
||||
<h3 class="text-4xl font-semibold text-white tracking-tight">Outils & Technologies</h3>
|
||||
</div>
|
||||
<p class="max-w-md text-sm text-gray-500 leading-relaxed">
|
||||
Maîtrise des logiciels de simulation et conception les plus avancés de l'industrie.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Simulation Software -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Simulation FEA</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="" class="w-5 h-5 object-contain opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-gray-300 font-medium">ANSYS</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="" class="w-5 h-5 object-contain opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-gray-300 font-medium">Simcenter (NX Nastran)</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="" class="w-5 h-5 object-contain opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-gray-300 font-medium">SolidWorks Simulation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CAD Software -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Conception CAO</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="" class="w-5 h-5 object-contain opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-gray-300 font-medium">Siemens NX</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="" class="w-5 h-5 object-contain opacity-50 group-hover:opacity-100 transition-opacity">
|
||||
<span class="text-gray-300 font-medium">SolidWorks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analysis Types -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Types d'Analyses</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="activity" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Statique linéaire</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="zap" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Dynamique & Modal</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="thermometer" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Thermique</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="refresh-cw" class="text-gray-500 group-hover:text-cyan-400 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Fatigue & Durabilité</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<section id="projects" class="py-24 bg-[#0d0d0d]">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex justify-between items-end mb-12">
|
||||
<div>
|
||||
<h2 class="text-xs font-mono text-cyan-400 tracking-widest uppercase mb-4">Réalisations</h2>
|
||||
<h3 class="text-4xl font-semibold text-white tracking-tight">Projets Sélectionnés</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects Grid Layout -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Large Featured Card -->
|
||||
<div class="md:col-span-2 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-cyan-500/30 transition-all duration-500 h-[400px]">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-cyan-900/20 to-black/80"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i data-lucide="activity" class="w-32 h-32 text-cyan-500/20"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-8 z-20">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<span class="text-cyan-400 font-mono text-xs px-2 py-1 rounded border border-cyan-500/20 bg-cyan-500/10">FEA</span>
|
||||
<span class="text-gray-400 font-mono text-xs">Optimisation</span>
|
||||
</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Analyse Structurelle</h3>
|
||||
<p class="text-gray-400 line-clamp-2 mb-6 max-w-xl">
|
||||
Simulation par éléments finis et optimisation topologique pour composants mécaniques haute performance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 1 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[400px] md:h-auto">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i data-lucide="thermometer" class="w-20 h-20 text-cyan-500/20"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Analyse Thermique</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Transfert de chaleur • Couplage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 2 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i data-lucide="zap" class="w-20 h-20 text-cyan-500/20"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Analyse Dynamique</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Modal • Vibrations</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 3 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i data-lucide="pen-tool" class="w-20 h-20 text-cyan-500/20"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Conception CAO</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Modélisation • Plans techniques</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 4 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-gray-800/50 to-black/80"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<i data-lucide="layers" class="w-20 h-20 text-cyan-500/20"></i>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Design for AM</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Fabrication additive • Impression 3D</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer / Contact -->
|
||||
<footer id="contact" class="pt-24 pb-12 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-24">
|
||||
<div>
|
||||
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tighter mb-6">
|
||||
Démarrons <br>
|
||||
<span class="text-gray-600">votre projet.</span>
|
||||
</h2>
|
||||
<p class="text-gray-400 max-w-md">
|
||||
Besoin d'expertise en simulation FEA, optimisation ou conception mécanique?
|
||||
Discutons de votre projet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center items-start lg:items-end gap-6">
|
||||
<a href="mailto:contact@atomaste.ca" class="group flex items-center gap-4 text-2xl md:text-3xl text-gray-300 hover:text-cyan-400 transition-colors">
|
||||
contact@atomaste.ca
|
||||
<i data-lucide="arrow-up-right" class="w-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
||||
</a>
|
||||
<div class="flex gap-6">
|
||||
<a href="https://linkedin.com" class="text-gray-500 hover:text-cyan-400 transition-colors">LinkedIn</a>
|
||||
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors">atomaste.ca</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 text-xs text-gray-600 font-mono">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="Media/logo_atomaste.png" alt="Atomaste" class="h-6 opacity-50">
|
||||
<span>© 2025 Atomaste • Abitibi-Témiscamingue, Québec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Initialize Icons
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
485
Website Template/code
Normal file
485
Website Template/code
Normal file
@@ -0,0 +1,485 @@
|
||||
<!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>Rithy Tep | Full Stack Developer</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></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:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background-color: #0a0a0a;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0a0a0a;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
/* Ambient Glows */
|
||||
.ambient-glow {
|
||||
position: fixed;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(245, 158, 11, 0.03) 0%, rgba(0,0,0,0) 70%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.glow-top { top: -20%; left: -10%; }
|
||||
.glow-bottom { bottom: -20%; right: -10%; }
|
||||
.glow-center { top: 40%; left: 30%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(30, 30, 40, 0.3) 0%, rgba(0,0,0,0) 70%); }
|
||||
/* Utility for hiding scrollbar but allowing scroll */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
/* Image Mask for Hero */
|
||||
.hero-mask {
|
||||
-webkit-mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
||||
mask-image: radial-gradient(circle at center, black 60%, transparent 100%);
|
||||
}
|
||||
/* Text Gradient */
|
||||
.text-gradient-gold {
|
||||
background: linear-gradient(135deg, #ffffff 30%, #fbbf24 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(20, 20, 20, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.hover-trigger .hover-target {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.hover-trigger:hover .hover-target {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
</style></head>
|
||||
<body class="text-gray-400 antialiased selection:bg-amber-500/20 selection:text-amber-200 relative overflow-x-hidden">
|
||||
|
||||
<!-- Ambient Background Effects -->
|
||||
<div class="ambient-glow glow-top"></div>
|
||||
<div class="ambient-glow glow-bottom"></div>
|
||||
<div class="ambient-glow glow-center"></div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 w-full z-50 border-b border-white/5 bg-[#0a0a0a]/80 backdrop-blur-md">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-white font-semibold tracking-tighter text-lg">RITHY TEP</span>
|
||||
<span class="text-xs px-2 py-0.5 rounded-full border border-white/10 bg-white/5 font-mono text-gray-500">v2.0</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
||||
<a href="#about" class="hover:text-white transition-colors">About</a>
|
||||
<a href="#expertise" class="hover:text-white transition-colors">Expertise</a>
|
||||
<a href="#projects" class="hover:text-white transition-colors">Projects</a>
|
||||
<a href="#experience" class="hover:text-white transition-colors">Timeline</a>
|
||||
</div>
|
||||
<a href="#contact" class="group flex items-center gap-2 text-xs font-semibold tracking-wide uppercase text-white border border-white/10 px-5 py-2.5 rounded-full hover:bg-white hover:text-black transition-all duration-300">
|
||||
Get In Touch
|
||||
<i data-lucide="arrow-right" class="w-3 h-3 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-24">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-[90vh] flex flex-col justify-center px-6 max-w-7xl mx-auto relative pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-0 items-center">
|
||||
<!-- Left: Typography -->
|
||||
<div class="lg:col-span-7 flex flex-col gap-8 z-20">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-2 h-2 bg-amber-500 rounded-full animate-pulse"></div>
|
||||
<span class="font-mono text-xs text-amber-500 tracking-widest uppercase">Available for work</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-semibold text-white tracking-tighter leading-[0.95] uppercase">
|
||||
Crafting <br>
|
||||
<span class="text-gray-600">Digital</span> <br>
|
||||
Experiences
|
||||
</h1>
|
||||
|
||||
<p class="max-w-md text-lg text-gray-400 leading-relaxed font-light border-l border-white/10 pl-6 mt-4">
|
||||
Transforming complex challenges into elegant solutions with modern web technologies and a passion for innovation.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-6 mt-8">
|
||||
<a href="#projects" class="bg-amber-500 text-black px-8 py-4 rounded-sm font-semibold tracking-tight hover:bg-amber-400 transition-all transform hover:-translate-y-1 flex items-center gap-2 group">
|
||||
START CREATING
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
<a href="#about" class="text-white px-6 py-4 rounded-sm border border-white/10 hover:border-white/30 transition-all flex items-center gap-2 text-sm tracking-wide">
|
||||
<i data-lucide="play-circle" class="w-4 h-4"></i>
|
||||
VIEW SHOWREEL
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Visual & Stats -->
|
||||
<div class="lg:col-span-5 relative h-[500px] lg:h-[700px] flex items-center justify-center lg:justify-end">
|
||||
<!-- Circular Image Mask -->
|
||||
<div class="absolute inset-0 flex items-center justify-center lg:justify-end">
|
||||
<div class="w-[300px] h-[300px] md:w-[450px] md:h-[450px] rounded-full overflow-hidden border border-white/5 relative group">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/alex-knight-v_8xUFwLpE4-unsplash.jpg" alt="Hero Banner" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 scale-110 group-hover:scale-100">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Stats -->
|
||||
<div class="absolute top-10 right-0 lg:right-10 glass-card p-6 rounded-lg animate-[float_6s_ease-in-out_infinite]">
|
||||
<div class="text-3xl font-semibold text-white tracking-tighter">12+</div>
|
||||
<div class="text-xs text-gray-500 uppercase tracking-widest mt-1">Projects</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-20 left-0 lg:left-10 glass-card p-6 rounded-lg animate-[float_8s_ease-in-out_infinite_1s]">
|
||||
<div class="text-3xl font-semibold text-white tracking-tighter">100%</div>
|
||||
<div class="text-xs text-gray-500 uppercase tracking-widest mt-1">Satisfaction</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-1/2 -right-4 lg:-right-10 glass-card p-4 rounded-lg flex items-center gap-3">
|
||||
<div class="bg-green-500/20 p-2 rounded-full">
|
||||
<i data-lucide="code-2" class="w-4 h-4 text-green-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm font-medium text-white">Clean Code</div>
|
||||
<div class="text-[10px] text-gray-500 font-mono">Architecture</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-24 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
|
||||
<div class="relative">
|
||||
<div class="aspect-square w-full max-w-md mx-auto rounded-2xl overflow-hidden relative">
|
||||
<img src="https://images.khmer24.co/profiles/pictures/21-10-28/rithytep_631992_1635403035_35.jpg" alt="Rithy Tep" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
|
||||
<div class="absolute inset-0 border border-white/10 rounded-2xl"></div>
|
||||
</div>
|
||||
<!-- Decorative Elements -->
|
||||
<div class="absolute -z-10 top-10 -left-10 w-full h-full border border-dashed border-white/5 rounded-2xl hidden md:block"></div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h2 class="text-xs font-mono text-amber-500 tracking-widest uppercase mb-4">About Me</h2>
|
||||
<h3 class="text-3xl md:text-4xl font-semibold text-white tracking-tight mb-8">
|
||||
Passionate full-stack developer bridging the gap between design and engineering.
|
||||
</h3>
|
||||
<div class="space-y-6 text-gray-400 font-light leading-relaxed">
|
||||
<p>
|
||||
I'm a developer who believes in continuous improvement and meaningful innovation. With a foundation in Vue.js, Next.js, and .NET, I specialize in building scalable applications that solve real-world problems.
|
||||
</p>
|
||||
<p>
|
||||
My approach combines technical excellence with a deep understanding of security and system architecture. I thrive in collaborative environments where I can contribute to ambitious projects while continuously expanding my expertise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6 mt-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="zap" class="text-amber-500 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Fast Learner</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="shield-check" class="text-amber-500 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Security Expert</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="layers" class="text-amber-500 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">System Architecture</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<i data-lucide="users" class="text-amber-500 w-5 h-5"></i>
|
||||
<span class="text-white text-sm">Team Player</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Grid -->
|
||||
<section id="expertise" class="py-24 bg-[#0d0d0d]">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
|
||||
<div>
|
||||
<h2 class="text-xs font-mono text-amber-500 tracking-widest uppercase mb-4">Expertise</h2>
|
||||
<h3 class="text-4xl font-semibold text-white tracking-tight">Technical Arsenal</h3>
|
||||
</div>
|
||||
<p class="max-w-md text-sm text-gray-500 leading-relaxed">
|
||||
A curated set of technologies I use to build high-performance, scalable, and secure applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Frontend -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Frontend</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="layout" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Vue.js / Nuxt</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="triangle" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Next.js</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="file-code" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">TypeScript</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="palette" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Tailwind CSS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Backend</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="server" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">.NET / C#</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="terminal" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Node.js</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="database" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">MSSQL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud -->
|
||||
<div class="space-y-6">
|
||||
<h4 class="text-lg font-medium text-white border-b border-white/10 pb-4">Cloud & DevOps</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="cloud" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Cloudflare</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="cloud-cog" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Elastic</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded hover:bg-white/5 transition-colors group flex items-center gap-4">
|
||||
<i data-lucide="box" class="text-gray-500 group-hover:text-amber-500 transition-colors w-5 h-5"></i>
|
||||
<span class="text-gray-300 font-medium">Serverless</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Experience Timeline -->
|
||||
<section id="experience" class="py-24 border-t border-white/5">
|
||||
<div class="max-w-4xl mx-auto px-6">
|
||||
<h2 class="text-xs font-mono text-amber-500 tracking-widest uppercase mb-12 text-center">Professional Journey</h2>
|
||||
|
||||
<div class="relative border-l border-white/10 ml-4 md:ml-10 space-y-12">
|
||||
<!-- Item 1 -->
|
||||
<div class="relative pl-8 md:pl-12 group">
|
||||
<!-- Node -->
|
||||
<div class="absolute -left-[5px] top-2 w-[9px] h-[9px] rounded-full bg-amber-500 ring-4 ring-black"></div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-2 sm:items-center mb-2">
|
||||
<h3 class="text-xl font-semibold text-white">Full Stack Developer</h3>
|
||||
<span class="hidden sm:block text-gray-600">•</span>
|
||||
<span class="text-amber-500 font-medium">Techbodia</span>
|
||||
<span class="text-xs px-2 py-1 bg-white/5 rounded text-gray-400 ml-auto sm:ml-0">2024 - Present</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm leading-relaxed mb-4 max-w-2xl">
|
||||
Leading full-stack initiatives using Vue.js, Nuxt, C#, and .NET. Architecting scalable solutions with MSSQL and implementing enterprise search with Elasticsearch. Managing CI/CD pipelines via GitLab.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="text-[10px] font-mono border border-white/10 px-2 py-1 rounded text-gray-500 group-hover:text-white transition-colors">Vue.js</span>
|
||||
<span class="text-[10px] font-mono border border-white/10 px-2 py-1 rounded text-gray-500 group-hover:text-white transition-colors">.NET</span>
|
||||
<span class="text-[10px] font-mono border border-white/10 px-2 py-1 rounded text-gray-500 group-hover:text-white transition-colors">SQL</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item 2 -->
|
||||
<div class="relative pl-8 md:pl-12 group">
|
||||
<!-- Node -->
|
||||
<div class="absolute -left-[5px] top-2 w-[9px] h-[9px] rounded-full bg-gray-700 ring-4 ring-black group-hover:bg-white transition-colors"></div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-2 sm:items-center mb-2">
|
||||
<h3 class="text-xl font-semibold text-white">Full Stack Developer</h3>
|
||||
<span class="hidden sm:block text-gray-600">•</span>
|
||||
<span class="text-gray-300 font-medium">Private Company</span>
|
||||
<span class="text-xs px-2 py-1 bg-white/5 rounded text-gray-400 ml-auto sm:ml-0">2023 - 2024</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm leading-relaxed mb-4 max-w-2xl">
|
||||
Developed comprehensive full-stack applications leveraging Firebase backend services and Angular framework. Built real-time data synchronization features and secure authentication systems.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="text-[10px] font-mono border border-white/10 px-2 py-1 rounded text-gray-500 group-hover:text-white transition-colors">Angular</span>
|
||||
<span class="text-[10px] font-mono border border-white/10 px-2 py-1 rounded text-gray-500 group-hover:text-white transition-colors">Firebase</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Grid -->
|
||||
<section id="projects" class="py-24 bg-[#0d0d0d]">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex justify-between items-end mb-12">
|
||||
<div>
|
||||
<h2 class="text-xs font-mono text-amber-500 tracking-widest uppercase mb-4">Selected Works</h2>
|
||||
<h3 class="text-4xl font-semibold text-white tracking-tight">Featured Projects</h3>
|
||||
</div>
|
||||
<a href="https://github.com/RithyTep" target="_blank" class="hidden md:flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors group">
|
||||
View GitHub <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Bento Grid Layout -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Large Featured Card -->
|
||||
<div class="md:col-span-2 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-amber-500/30 transition-all duration-500 h-[400px]">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/1756111312916.jpg" alt="Kon Khmer AI" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 group-hover:scale-105 transition-all duration-700">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-8 z-20 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<span class="text-amber-500 font-mono text-xs px-2 py-1 rounded border border-amber-500/20 bg-amber-500/10">Next.js</span>
|
||||
<span class="text-gray-400 font-mono text-xs">HYPER3D</span>
|
||||
</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Kon Khmer AI</h3>
|
||||
<p class="text-gray-400 line-clamp-2 mb-6 max-w-xl group-hover:text-gray-300 transition-colors">
|
||||
Innovative 3D AI visualization platform showcasing Cambodian cultural elements through interactive 3D models.
|
||||
</p>
|
||||
<a href="https://konkhmerai3d.rithytep.online/" target="_blank" class="inline-flex items-center gap-2 text-white text-sm font-medium hover:text-amber-500 transition-colors">
|
||||
Explore Project <i data-lucide="arrow-up-right" class="w-4 h-4"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 1 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[400px] md:h-auto">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/123.png" alt="Portfolio CMS" class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Portfolio CMS</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Neon DB • Lucia Auth</p>
|
||||
<a href="https://portfolio-bodia.vercel.app" target="_blank" class="hover-trigger flex items-center gap-2 text-sm text-white">
|
||||
Visit Site <i data-lucide="arrow-right" class="w-4 h-4 hover-target"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 2 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/1762330596824.jpg" alt="Alanka Store" class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Alanka Store</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Three.js • WebGI</p>
|
||||
<a href="https://alanka.store" target="_blank" class="hover-trigger flex items-center gap-2 text-sm text-white">
|
||||
Visit Site <i data-lucide="arrow-right" class="w-4 h-4 hover-target"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 3 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/1756113382312.jpg" alt="HMS System" class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">HMS System</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">React • Vite • Shadcn</p>
|
||||
<a href="https://demo-hms.netlify.app/" target="_blank" class="hover-trigger flex items-center gap-2 text-sm text-white">
|
||||
Visit Site <i data-lucide="arrow-right" class="w-4 h-4 hover-target"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Standard Card 4 -->
|
||||
<div class="md:col-span-1 group relative overflow-hidden rounded-lg glass-card border border-white/5 hover:border-white/20 transition-all duration-500 h-[300px]">
|
||||
<img src="https://irzjjxlkm7f191oh.public.blob.vercel-storage.com/1756115059380.jpg" alt="Key Translator" class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 w-full p-6 z-20">
|
||||
<h3 class="text-xl font-bold text-white mb-2">Key Translator</h3>
|
||||
<p class="text-xs text-gray-400 mb-4 font-mono">Python • Google API</p>
|
||||
<a href="https://multi-translator-sepia.vercel.app/" target="_blank" class="hover-trigger flex items-center gap-2 text-sm text-white">
|
||||
Visit Site <i data-lucide="arrow-right" class="w-4 h-4 hover-target"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer / Contact -->
|
||||
<footer id="contact" class="pt-24 pb-12 border-t border-white/5">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-24">
|
||||
<div>
|
||||
<h2 class="text-4xl md:text-6xl font-bold text-white tracking-tighter mb-6">
|
||||
Let's Build <br>
|
||||
<span class="text-gray-600">Something Amazing.</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center items-start lg:items-end gap-6">
|
||||
<a href="mailto:contact@rithytep.online" class="group flex items-center gap-4 text-2xl md:text-3xl text-gray-300 hover:text-amber-500 transition-colors">
|
||||
contact@rithytep.online
|
||||
<i data-lucide="arrow-up-right" class="w-6 h-6 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
||||
</a>
|
||||
<div class="flex gap-6">
|
||||
<a href="https://github.com/RithyTep" class="text-gray-500 hover:text-white transition-colors">GitHub</a>
|
||||
<a href="https://www.linkedin.com/in/tep-rithy-7529b7226" class="text-gray-500 hover:text-white transition-colors">LinkedIn</a>
|
||||
<a href="https://www.youtube.com/@Rithy500" class="text-gray-500 hover:text-red-500 transition-colors">YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 text-xs text-gray-600 font-mono">
|
||||
<div>
|
||||
© 2025 Rithy Tep • Phnom Penh, Cambodia
|
||||
</div>
|
||||
<div class="mt-4 md:mt-0">
|
||||
SHAPING VOID INTO MATTER
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Initialize Icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Custom Cursor Effect (Optional, simple implementation)
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const x = e.clientX;
|
||||
const y = e.clientY;
|
||||
// Could add a custom cursor div here, but staying minimal with CSS hover states for better performance
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
Website Template/logo_atomaste.png
Normal file
BIN
Website Template/logo_atomaste.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 558 KiB |
Reference in New Issue
Block a user