Tailwind Css
Portfolio
Terminal
Neon
Dark Theme
Monospace
Futuriste
Developpeur
Template
Animations
Snippet
Jetbrains Mono
Template portfolio style terminal neon avec JetBrains Mono, animations phosphore, dark theme et UI futuriste pour profils développeur underground.
<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Template Portfolio Style Terminal HTML CSS 2026 05110900 | AngularForAll</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind Configuration -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
'display': ['Clash Display', 'sans-serif'],
'mono': ['JetBrains Mono', 'monospace'],
'body': ['Satoshi', 'sans-serif'],
},
colors: {
neon: {
pink: '#FF1493',
blue: '#00FFFF',
green: '#39FF14',
yellow: '#FFFF00',
purple: '#BF40BF',
orange: '#FF6600',
},
dark: {
900: '#000000',
800: '#0A0A0A',
700: '#111111',
600: '#1A1A1A',
}
},
animation: {
'glitch': 'glitch 0.5s infinite',
'scan': 'scan 3s linear infinite',
'matrix': 'matrix 20s linear infinite',
'flicker': 'flicker 0.15s infinite alternate',
'neon-pulse': 'neonPulse 2s ease-in-out infinite',
'spin-3d': 'spin3d 8s linear infinite',
'typewriter': 'typewriter 3s steps(40) infinite',
'marquee': 'marquee 25s linear infinite',
'border-glow': 'borderGlow 3s ease-in-out infinite',
},
keyframes: {
glitch: {
'0%, 100%': { transform: 'translate(0)' },
'20%': { transform: 'translate(-5px, 5px)' },
'40%': { transform: 'translate(-5px, -5px)' },
'60%': { transform: 'translate(5px, 5px)' },
'80%': { transform: 'translate(5px, -5px)' },
},
scan: {
'0%': { transform: 'translateY(-100%)' },
//'100%': { transform: 'translateY(100vh)' },
},
matrix: {
'0%': { backgroundPosition: '0% 0%' },
'100%': { backgroundPosition: '0% 100%' },
},
flicker: {
'0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%': { opacity: '1' },
'20%, 24%, 55%': { opacity: '0' },
},
neonPulse: {
'0%, 100%': {
textShadow: '0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa'
},
'50%': {
textShadow: '0 0 4px #fff, 0 0 7px #fff, 0 0 13px #fff, 0 0 25px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 70px #0fa, 0 0 90px #0fa'
},
},
spin3d: {
'0%': { transform: 'rotateY(0deg)' },
'100%': { transform: 'rotateY(360deg)' },
},
typewriter: {
'0%, 100%': { width: '0' },
'50%': { width: '100%' },
},
marquee: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(-100%)' },
},
borderGlow: {
'0%, 100%': { borderColor: '#FF1493' },
'33%': { borderColor: '#00FFFF' },
'66%': { borderColor: '#39FF14' },
},
}
}
}
}
</script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@400,500,700&display=swap" rel="stylesheet">
<style>
/* Effet CRT / Rétro */
.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
z-index: 9999;
}
/* Effet Matrix */
.matrix-bg {
background-image: linear-gradient(0deg, transparent 0%, rgba(0, 255, 0, 0.05) 50%, transparent 100%);
background-size: 5px 5px;
}
/* Effet Glitch */
.glitch-text {
position: relative;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-text::before {
color: #ff00ff;
animation: glitch 0.3s infinite;
z-index: -1;
}
.glitch-text::after {
color: #00ffff;
animation: glitch 0.3s infinite reverse;
z-index: -2;
}
/* Effet Neon Border */
.neon-border {
position: relative;
border: 2px solid #FF1493;
box-shadow: 0 0 5px #FF1493, 0 0 20px #FF1493, 0 0 40px #FF1493, inset 0 0 5px #FF1493;
animation: borderGlow 3s ease-in-out infinite;
}
/* Terminal Effect */
.terminal {
background: rgba(0, 0, 0, 0.9);
border: 1px solid #00ff00;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3), inset 0 0 10px rgba(0, 255, 0, 0.1);
}
.terminal-header {
background: #1a1a1a;
border-bottom: 1px solid #00ff00;
}
/* Scanline */
.scanline {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(0, 255, 0, 0.1);
z-index: 9998;
pointer-events: none;
animation: scan 3s linear infinite;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #000;
}
::-webkit-scrollbar-thumb {
background: #00ff00;
border-radius: 0;
}
.min-h-screen {
min-height: 600px;
}
/* Noise Overlay */
.noise {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*height: 100%;*/
opacity: 0.03;
pointer-events: none;
z-index: 9997;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* Text Gradient Cyber */
.text-cyber {
background: linear-gradient(135deg, #FF1493 0%, #00FFFF 50%, #39FF14 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradient 3s ease infinite;
}
@keyframes gradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
</style>
</head>
<body class="font-body bg-dark-900 text-gray-300 overflow-x-hidden">
<!-- Noise Overlay -->
<div class="noise"></div>
<!-- Scanline Effect -->
<div class="scanline"></div>
<!-- CRT Effect -->
<div class="crt"></div>
<!-- Matrix Rain Container -->
<canvas id="matrixRain" class="fixed inset-0 pointer-events-none z-0 opacity-20"></canvas>
<!-- Navigation Terminal -->
<nav class="fixed top-0 left-0 right-0 z-50 terminal border-t-0 border-l-0 border-r-0">
<div class="terminal-header flex items-center gap-2 px-4 py-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="font-mono text-xs text-green-400 ml-2">portfolio.sh</span>
</div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3">
<div class="flex items-center justify-between">
<a href="#" class="font-mono text-2xl font-bold">
<span class="text-neon-green">></span>
<span class="text-cyber">root@portfolio</span>
<span class="text-neon-green">:~$</span>
</a>
<!-- Desktop Menu -->
<div class="hidden lg:flex items-center gap-1 font-mono text-sm">
<a href="#home" class="terminal-link px-4 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10 transition-all duration-200">
<span class="text-neon-blue">./</span>home
</a>
<a href="#about" class="terminal-link px-4 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10 transition-all duration-200">
<span class="text-neon-blue">./</span>about
</a>
<a href="#skills" class="terminal-link px-4 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10 transition-all duration-200">
<span class="text-neon-blue">./</span>skills
</a>
<a href="#projects" class="terminal-link px-4 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10 transition-all duration-200">
<span class="text-neon-blue">./</span>projects
</a>
<a href="#terminal" class="terminal-link px-4 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10 transition-all duration-200">
<span class="text-neon-blue">./</span>terminal
</a>
<a href="#contact" class="ml-4 px-6 py-2 border border-neon-green text-neon-green font-bold hover:bg-neon-green hover:text-black transition-all duration-300 shadow-[0_0_15px_rgba(57,255,20,0.5)]">
contact.sh
</a>
</div>
<!-- Mobile Menu -->
<button class="lg:hidden font-mono text-neon-green text-xl" id="menuToggle">
[<span id="menuIcon">+</span>]
</button>
</div>
<!-- Mobile Menu Dropdown -->
<div class="lg:hidden hidden mt-4 font-mono text-sm" id="mobileMenu">
<div class="terminal p-4 space-y-2">
<a href="#home" class="block px-3 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10">> cd /home</a>
<a href="#about" class="block px-3 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10">> cd /about</a>
<a href="#skills" class="block px-3 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10">> cd /skills</a>
<a href="#projects" class="block px-3 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10">> cd /projects</a>
<a href="#terminal" class="block px-3 py-2 text-green-400 hover:text-neon-pink hover:bg-green-400/10">> cd /terminal</a>
<a href="#contact" class="block px-3 py-2 text-neon-green border border-neon-green text-center">> ./contact.sh</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section - Glitch Style -->
<section id="home" class="relative min-h-screen flex items-center overflow-hidden">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Left Content -->
<div class="space-y-8">
<!-- Terminal Badge -->
<div class="inline-block terminal px-6 py-3 font-mono text-sm">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">STATUS</span>
<span class="text-neon-green">]</span>
<span class="text-neon-blue"> $ </span>
<span class="text-neon-green animate-flicker">AVAILABLE_FOR_HIRE</span>
</div>
<!-- Glitch Title -->
<div class="space-y-4">
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-bold">
<div class="text-white">I BUILD</div>
<div class="glitch-text text-cyber" data-text="DIGITAL">
DIGITAL
</div>
<div class="text-white">EXPERIENCES</div>
</h1>
</div>
<!-- Terminal Description -->
<div class="terminal p-4 font-mono text-sm max-w-lg">
<p class="text-green-400">$ cat description.txt</p>
<p class="text-gray-300 mt-2">
> Full-stack developer & digital architect
<br>> Specializing in scalable web applications
<br>> Creating immersive digital experiences
</p>
</div>
<!-- CTA Buttons -->
<div class="flex flex-wrap gap-4">
<a href="#projects" class="group px-8 py-4 bg-transparent border-2 border-neon-pink text-neon-pink font-mono font-bold hover:bg-neon-pink hover:text-black transition-all duration-300 shadow-[0_0_20px_rgba(255,20,147,0.5)] hover:shadow-[0_0_40px_rgba(255,20,147,0.8)]">
<span class="text-neon-blue">$</span> view_projects
<span class="group-hover:animate-glitch inline-block">_</span>
</a>
<a href="#contact" class="px-8 py-4 border-2 border-neon-blue text-neon-blue font-mono font-bold hover:bg-neon-blue hover:text-black transition-all duration-300 shadow-[0_0_20px_rgba(0,255,255,0.5)] hover:shadow-[0_0_40px_rgba(0,255,255,0.8)]">
<span class="text-neon-pink">></span> send_message
</a>
</div>
<!-- Stats -->
<div class="flex gap-8 font-mono">
<div class="terminal px-6 py-3 text-center">
<div class="text-3xl font-bold text-neon-green animate-neon-pulse">50+</div>
<div class="text-xs text-gray-500 mt-1">COMMITS</div>
</div>
<div class="terminal px-6 py-3 text-center">
<div class="text-3xl font-bold text-neon-pink animate-neon-pulse">30+</div>
<div class="text-xs text-gray-500 mt-1">REPOS</div>
</div>
<div class="terminal px-6 py-3 text-center">
<div class="text-3xl font-bold text-neon-blue animate-neon-pulse">100%</div>
<div class="text-xs text-gray-500 mt-1">UPTIME</div>
</div>
</div>
</div>
<!-- Right Content - Cyber Animation -->
<div class="relative flex justify-center">
<div class="relative w-72 h-72 lg:w-96 lg:h-96">
<!-- Rotating Border -->
<div class="absolute inset-0 border-4 border-neon-green rounded-full animate-spin-3d shadow-[0_0_30px_rgba(57,255,20,0.5)]"></div>
<div class="absolute inset-4 border-4 border-neon-pink rounded-full animate-spin-3d shadow-[0_0_30px_rgba(255,20,147,0.5)]" style="animation-direction: reverse;"></div>
<div class="absolute inset-8 border-4 border-neon-blue rounded-full animate-spin-3d shadow-[0_0_30px_rgba(0,255,255,0.5)]" style="animation-duration: 6s;"></div>
<!-- Center Image -->
<div class="absolute inset-12 rounded-full overflow-hidden border-4 border-neon-green shadow-[0_0_50px_rgba(57,255,20,0.3)]">
<img src="public/avatar.png"
alt="Profile"
class="w-full h-full object-cover"
onerror="this.src='https://via.placeholder.com/600x600/000/00ff00?text=HACKER'">
</div>
</div>
</div>
</div>
</div>
<!-- Moving text marquee -->
<div class="absolute bottom-0 left-0 w-full overflow-hidden font-mono text-neon-green/20 text-9xl font-bold whitespace-nowrap select-none">
<div class="animate-marquee">
DIGITAL CREATOR • WEB DEVELOPER • UI DESIGNER • INNOVATOR •
</div>
</div>
</section>
<!-- About Section - Terminal Style -->
<section id="about" class="py-24 relative">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block terminal px-6 py-2 font-mono text-sm mb-4">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">ABOUT</span>
<span class="text-neon-green">]</span>
</div>
<h2 class="font-display text-5xl sm:text-6xl font-bold text-white">
WHO<span class="text-neon-pink">AMI</span>
</h2>
</div>
<div class="grid lg:grid-cols-3 gap-8">
<!-- Bio Card -->
<div class="lg:col-span-2 terminal p-8">
<div class="flex items-center gap-2 mb-4 font-mono text-sm">
<span class="text-neon-green">$</span>
<span class="text-white">whoami</span>
</div>
<p class="text-gray-400 mb-4 font-mono text-sm leading-relaxed">
> I am a passionate developer with over 5 years of experience in building
> cutting-edge web applications and digital solutions. My expertise spans
> across the entire stack, from pixel-perfect frontends to robust backend
> architectures.
</p>
<div class="flex items-center gap-2 font-mono text-sm">
<span class="text-neon-green">$</span>
<span class="text-white">cat skills.txt</span>
</div>
<p class="text-gray-400 mt-2 font-mono text-sm">
> Frontend: React, Vue, Next.js, TypeScript, Tailwind
<br>> Backend: Node.js, Python, Go, Rust
<br>> Database: PostgreSQL, MongoDB, Redis
<br>> DevOps: Docker, AWS, CI/CD, Kubernetes
</p>
</div>
<!-- Experience Card -->
<div class="space-y-4">
<div class="terminal p-6 text-center">
<div class="text-5xl font-bold text-neon-green mb-2 animate-neon-pulse">5+</div>
<div class="font-mono text-xs text-gray-500">YEARS EXPERIENCE</div>
</div>
<div class="terminal p-6 text-center">
<div class="text-5xl font-bold text-neon-pink mb-2 animate-neon-pulse">50+</div>
<div class="font-mono text-xs text-gray-500">PROJECTS COMPLETED</div>
</div>
<div class="terminal p-6 text-center">
<div class="text-5xl font-bold text-neon-blue mb-2 animate-neon-pulse">30+</div>
<div class="font-mono text-xs text-gray-500">HAPPY CLIENTS</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section - Matrix Grid -->
<section id="skills" class="py-24 relative matrix-bg">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block terminal px-6 py-2 font-mono text-sm mb-4">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">SKILLS</span>
<span class="text-neon-green">]</span>
</div>
<h2 class="font-display text-5xl sm:text-6xl font-bold text-white">
TECH<span class="text-neon-green">STACK</span>
</h2>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Skill 1 -->
<div class="neon-border p-8 text-center font-mono group hover:scale-105 transition-transform duration-300">
<div class="text-6xl mb-4 text-neon-pink">⚡</div>
<h3 class="text-xl font-bold text-white mb-3">FRONTEND</h3>
<div class="space-y-2 text-sm">
<p class="text-green-400">> React.js</p>
<p class="text-green-400">> Next.js</p>
<p class="text-green-400">> Vue.js</p>
<p class="text-green-400">> TypeScript</p>
</div>
<div class="mt-4 text-xs text-neon-blue">[ LOADED ]</div>
</div>
<!-- Skill 2 -->
<div class="neon-border p-8 text-center font-mono group hover:scale-105 transition-transform duration-300">
<div class="text-6xl mb-4 text-neon-blue">🔧</div>
<h3 class="text-xl font-bold text-white mb-3">BACKEND</h3>
<div class="space-y-2 text-sm">
<p class="text-green-400">> Node.js</p>
<p class="text-green-400">> Python</p>
<p class="text-green-400">> Go</p>
<p class="text-green-400">> GraphQL</p>
</div>
<div class="mt-4 text-xs text-neon-pink">[ READY ]</div>
</div>
<!-- Skill 3 -->
<div class="neon-border p-8 text-center font-mono group hover:scale-105 transition-transform duration-300">
<div class="text-6xl mb-4 text-neon-green">🗄️</div>
<h3 class="text-xl font-bold text-white mb-3">DATABASE</h3>
<div class="space-y-2 text-sm">
<p class="text-green-400">> PostgreSQL</p>
<p class="text-green-400">> MongoDB</p>
<p class="text-green-400">> Redis</p>
<p class="text-green-400">> Prisma</p>
</div>
<div class="mt-4 text-xs text-neon-green">[ CONNECTED ]</div>
</div>
<!-- Skill 4 -->
<div class="neon-border p-8 text-center font-mono group hover:scale-105 transition-transform duration-300">
<div class="text-6xl mb-4 text-neon-yellow">🚀</div>
<h3 class="text-xl font-bold text-white mb-3">DEVOPS</h3>
<div class="space-y-2 text-sm">
<p class="text-green-400">> Docker</p>
<p class="text-green-400">> AWS</p>
<p class="text-green-400">> Kubernetes</p>
<p class="text-green-400">> CI/CD</p>
</div>
<div class="mt-4 text-xs text-neon-yellow">[ DEPLOYED ]</div>
</div>
</div>
</div>
</section>
<!-- Projects Section - Glitch Cards -->
<section id="projects" class="py-24 relative">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block terminal px-6 py-2 font-mono text-sm mb-4">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">PROJECTS</span>
<span class="text-neon-green">]</span>
</div>
<h2 class="font-display text-5xl sm:text-6xl font-bold text-white">
LATEST<span class="text-neon-blue">WORK</span>
</h2>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Project 1 -->
<div class="terminal overflow-hidden group">
<div class="relative h-48 overflow-hidden border-b border-green-400/30">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
<img src="public/phoneL.webp"
alt="Code"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6 font-mono">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-neon-green"></span>
<span class="text-xs text-neon-green">LIVE</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">AI Dashboard</h3>
<p class="text-gray-400 text-sm mb-4">
> Real-time analytics dashboard powered by machine learning algorithms.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 text-xs border border-neon-pink text-neon-pink">React</span>
<span class="px-2 py-1 text-xs border border-neon-blue text-neon-blue">Python</span>
<span class="px-2 py-1 text-xs border border-neon-green text-neon-green">AI</span>
</div>
<a href="#" class="inline-flex items-center gap-2 text-neon-green hover:text-neon-pink transition-colors text-sm">
<span>$</span> view_project.sh
<span class="animate-flicker">_</span>
</a>
</div>
</div>
<!-- Project 2 -->
<div class="terminal overflow-hidden group">
<div class="relative h-48 overflow-hidden border-b border-green-400/30">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
<img src="public/phoneL.webp"
alt="Mobile App"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6 font-mono">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-neon-pink"></span>
<span class="text-xs text-neon-pink">DEVELOPMENT</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Crypto Tracker</h3>
<p class="text-gray-400 text-sm mb-4">
> Cryptocurrency tracking app with real-time updates and portfolio management.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 text-xs border border-neon-pink text-neon-pink">Vue</span>
<span class="px-2 py-1 text-xs border border-neon-blue text-neon-blue">Node</span>
<span class="px-2 py-1 text-xs border border-neon-green text-neon-green">WebSocket</span>
</div>
<a href="#" class="inline-flex items-center gap-2 text-neon-green hover:text-neon-pink transition-colors text-sm">
<span>$</span> view_project.sh
<span class="animate-flicker">_</span>
</a>
</div>
</div>
<!-- Project 3 -->
<div class="terminal overflow-hidden group">
<div class="relative h-48 overflow-hidden border-b border-green-400/30">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 z-10"></div>
<img src="public/phoneL.webp"
alt="Design"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
</div>
<div class="p-6 font-mono">
<div class="flex items-center gap-2 mb-3">
<span class="w-2 h-2 rounded-full bg-neon-blue"></span>
<span class="text-xs text-neon-blue">COMPLETED</span>
</div>
<h3 class="text-lg font-bold text-white mb-2">Design System</h3>
<p class="text-gray-400 text-sm mb-4">
> Comprehensive design system with reusable components and documentation.
</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="px-2 py-1 text-xs border border-neon-pink text-neon-pink">Figma</span>
<span class="px-2 py-1 text-xs border border-neon-blue text-neon-blue">Storybook</span>
<span class="px-2 py-1 text-xs border border-neon-green text-neon-green">React</span>
</div>
<a href="#" class="inline-flex items-center gap-2 text-neon-green hover:text-neon-pink transition-colors text-sm">
<span>$</span> view_project.sh
<span class="animate-flicker">_</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Terminal Section -->
<section id="terminal" class="py-24 relative matrix-bg">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block terminal px-6 py-2 font-mono text-sm mb-4">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">TERMINAL</span>
<span class="text-neon-green">]</span>
</div>
<h2 class="font-display text-5xl sm:text-6xl font-bold text-white">
INTERACTIVE<span class="text-neon-green">SHELL</span>
</h2>
</div>
<div class="max-w-3xl mx-auto">
<div class="terminal overflow-hidden">
<div class="terminal-header flex items-center gap-2 px-4 py-3">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="font-mono text-xs text-green-400 ml-2">terminal@portfolio ~ </span>
</div>
<div class="p-6 font-mono text-sm h-96 overflow-y-auto" id="terminalOutput">
<p class="text-green-400">Welcome to interactive terminal v2.0</p>
<p class="text-green-400">Type 'help' for available commands</p>
<p class="text-gray-500">---</p>
<div id="terminalHistory"></div>
<div class="flex items-center gap-2 mt-2">
<span class="text-neon-green">❯</span>
<input type="text" id="terminalInput"
class="flex-1 bg-transparent border-none outline-none text-green-400 font-mono text-sm"
placeholder="Type a command..."
autofocus>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-24 relative">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<div class="inline-block terminal px-6 py-2 font-mono text-sm mb-4">
<span class="text-neon-green">[</span>
<span class="text-neon-pink">CONTACT</span>
<span class="text-neon-green">]</span>
</div>
<h2 class="font-display text-5xl sm:text-6xl font-bold text-white">
GET<span class="text-neon-pink">IN</span>TOUCH
</h2>
</div>
<div class="max-w-2xl mx-auto">
<form class="terminal p-8 space-y-6 font-mono">
<div>
<label class="flex items-center gap-2 text-neon-green text-sm mb-2">
<span>$</span> echo "Your Name"
</label>
<input type="text"
class="w-full px-4 py-3 bg-black/50 border border-green-400/30 text-green-400 placeholder-green-400/30 focus:outline-none focus:border-neon-green transition-all"
placeholder="> Enter your name">
</div>
<div>
<label class="flex items-center gap-2 text-neon-green text-sm mb-2">
<span>$</span> echo "Your Email"
</label>
<input type="email"
class="w-full px-4 py-3 bg-black/50 border border-green-400/30 text-green-400 placeholder-green-400/30 focus:outline-none focus:border-neon-green transition-all"
placeholder="> Enter your email">
</div>
<div>
<label class="flex items-center gap-2 text-neon-green text-sm mb-2">
<span>$</span> echo "Message"
</label>
<textarea rows="5"
class="w-full px-4 py-3 bg-black/50 border border-green-400/30 text-green-400 placeholder-green-400/30 focus:outline-none focus:border-neon-green transition-all resize-none"
placeholder="> Type your message"></textarea>
</div>
<button type="submit"
class="w-full px-8 py-4 bg-transparent border-2 border-neon-green text-neon-green font-bold hover:bg-neon-green hover:text-black transition-all duration-300 shadow-[0_0_20px_rgba(57,255,20,0.5)] hover:shadow-[0_0_40px_rgba(57,255,20,0.8)] text-lg">
$ ./send_message.sh
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-green-400/20">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center gap-8 font-mono text-sm">
<div class="text-green-400">
<span class="text-neon-green">></span> © 2024 /root/portfolio
</div>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 border border-green-400/30 flex items-center justify-center text-green-400 hover:text-neon-pink hover:border-neon-pink transition-all">
<span class="text-xs">GH</span>
</a>
<a href="#" class="w-10 h-10 border border-green-400/30 flex items-center justify-center text-green-400 hover:text-neon-pink hover:border-neon-pink transition-all">
<span class="text-xs">LI</span>
</a>
<a href="#" class="w-10 h-10 border border-green-400/30 flex items-center justify-center text-green-400 hover:text-neon-pink hover:border-neon-pink transition-all">
<span class="text-xs">TW</span>
</a>
<a href="#" class="w-10 h-10 border border-green-400/30 flex items-center justify-center text-green-400 hover:text-neon-pink hover:border-neon-pink transition-all">
<span class="text-xs">DR</span>
</a>
</div>
<a href="#home" class="text-green-400 hover:text-neon-pink transition-colors">
<span class="text-neon-green">$</span> cd /home
</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// === Matrix Rain Effect ===
const canvas = document.getElementById('matrixRain');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';
const alphabet = katakana + latin + nums;
const fontSize = 16;
const columns = canvas.width / fontSize;
const rainDrops = [];
for (let x = 0; x < columns; x++) {
rainDrops[x] = 1;
}
function drawMatrix() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#0F0';
ctx.font = fontSize + 'px monospace';
for (let i = 0; i < rainDrops.length; i++) {
const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
rainDrops[i] = 0;
}
rainDrops[i]++;
}
}
setInterval(drawMatrix, 30);
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// === Mobile Menu ===
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
const menuIcon = document.getElementById('menuIcon');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
menuIcon.textContent = mobileMenu.classList.contains('hidden') ? '+' : '-';
});
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
menuIcon.textContent = '+';
});
});
// === Interactive Terminal ===
const terminalInput = document.getElementById('terminalInput');
const terminalHistory = document.getElementById('terminalHistory');
const terminalOutput = document.getElementById('terminalOutput');
const commands = {
help: 'Available commands: about, skills, projects, contact, clear, date, whoami, neofetch, matrix, joke',
about: '> I am a passionate full-stack developer with 5+ years of experience.',
skills: '> React, Vue, Node.js, Python, PostgreSQL, Docker, AWS, TypeScript',
projects: '> 1. AI Dashboard 2. Crypto Tracker 3. Design System 4. E-Commerce Platform',
contact: '> Email: dev@portfolio.dev | Location: Paris, France | Available for freelance',
date: new Date().toString(),
whoami: 'root@portfolio',
neofetch: `
⣇⣿⠘⣿⣿⣿⡿⡿⣟⣟⢟⢟⢝⠵⡝⣿⡿⢂⣼⣿⣷⣌⠩⡫⡻⣝⠹⢿⣿⣷
⡆⣿⣆⠱⣝⡵⣝⢿⡵⣩⢕⢕⢕⢱⢹⣿⣿⣿⣿⣿⣿⣿⣿⣷⡑⣝⠥⢈⠹⡇
⡆⣿⣿⣷⣝⠷⡝⣝⣞⢟⢕⢕⢕⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡌⢆⢹⡳⣹
⡆⣿⣿⣿⣿⣷⣝⠷⡝⣮⢪⢺⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣌⢎⢣⣿
⡆⣿⣿⣿⣿⣿⣿⣷⡝⣮⢺⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⢧⣿
⡆⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣿⡿⣿⣿⣿⣿⣆⣿
OS: PortfolioOS v2.0
Shell: Interactive Portfolio Shell
Uptime: 5+ years
Packages: 50+ projects
Theme: Cyber Neon Dark`,
matrix: 'Wake up, Neo... The Matrix has you... Follow the white rabbit.',
joke: '> Why do programmers prefer dark mode? Because light attracts bugs! 🐛',
};
terminalInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
const command = this.value.trim().toLowerCase();
if (command) {
// Add command to history
const commandLine = document.createElement('p');
commandLine.innerHTML = `<span class="text-neon-green">❯</span> <span class="text-white">${command}</span>`;
terminalHistory.appendChild(commandLine);
// Execute command
const output = document.createElement('p');
if (command === 'clear') {
terminalHistory.innerHTML = '';
} else if (commands[command]) {
output.innerHTML = `<span class="text-green-400">${commands[command]}</span>`;
terminalHistory.appendChild(output);
} else {
output.innerHTML = `<span class="text-red-400">Command not found: ${command}. Type 'help' for available commands.</span>`;
terminalHistory.appendChild(output);
}
// Clear input
this.value = '';
// Scroll to bottom
terminalOutput.scrollTop = terminalOutput.scrollHeight;
}
}
});
// Focus terminal input when clicking anywhere in the terminal
terminalOutput.addEventListener('click', () => {
terminalInput.focus();
});
// === Smooth Scroll ===
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// === Form Submit ===
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const btn = this.querySelector('button');
const originalText = btn.innerHTML;
btn.innerHTML = '$ ./success.sh [MESSAGE SENT]';
btn.classList.add('border-neon-green', 'text-neon-green');
setTimeout(() => {
btn.innerHTML = originalText;
btn.classList.remove('border-neon-green', 'text-neon-green');
}, 3000);
this.reset();
});
console.log('🔥 Neon Cyber Portfolio Loaded Successfully!');
console.log('💻 Try the interactive terminal below!');
</script>
</body>
</html>
Télécharger le fichier source