485 lines
31 KiB
Plaintext
485 lines
31 KiB
Plaintext
|
<!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>
|