File size: 15,545 Bytes
3bb53e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martin JULES - Graphics Programmer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-gradient {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.glow-text {
text-shadow: 0 0 8px rgba(100, 149, 237, 0.6);
}
.typewriter {
overflow: hidden;
border-right: .15em solid #4299e1;
white-space: nowrap;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #4299e1 }
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 font-sans">
<!-- Hero Section -->
<section class="hero-gradient min-h-screen flex items-center justify-center px-4 py-20">
<div class="container mx-auto flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-6xl font-bold mb-4 glow-text">
<span class="text-blue-400">Hi, I'm</span> Martin
</h1>
<div class="typewriter text-2xl md:text-4xl font-mono mb-6">
A Graphics Programmer
</div>
<p class="text-xl md:text-2xl text-blue-300 mb-8">
& Gamedev Enthusiast
</p>
<div class="flex space-x-4">
<a href="#projects" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition duration-300 flex items-center">
<i class="fas fa-project-diagram mr-2"></i> View Projects
</a>
<a href="#" class="px-6 py-3 border border-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition duration-300 flex items-center">
<i class="fas fa-paper-plane mr-2"></i> Contact Me
</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://www.martinjules.com/static/media/developer.ef097afb.svg"
alt="Developer Illustration"
class="w-full max-w-md animate-float"
style="animation: float 6s ease-in-out infinite">
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="py-20 px-4">
<div class="container mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-2 text-center glow-text">
Projects Portfolio
</h2>
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">
Search projects by title or filter by category
</p>
<!-- Search and Filter -->
<div class="max-w-3xl mx-auto mb-12">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 relative">
<input type="text" placeholder="Search projects..."
class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute right-4 top-3.5 text-gray-500"></i>
</div>
<select class="px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">All Categories</option>
<option value="engine">Handmade 3D Engine</option>
<option value="game">Game Development</option>
<option value="graphics">Graphics Study</option>
<option value="tool">Development Tools</option>
</select>
</div>
</div>
<!-- Projects Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<a href="https://www.martinjules.com/projects/single-project?id=1"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center">
<i class="fas fa-gamepad text-6xl text-blue-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Exploration Craft Game</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full mr-2">
Handmade 3D Engine
</span>
<span class="inline-block px-2 py-1 bg-purple-900/50 text-purple-300 text-xs rounded-full">
Game Development
</span>
</div>
<p class="text-gray-400">An exploration game built with my custom 3D engine featuring procedural world generation.</p>
</div>
</a>
<!-- Project 2 -->
<a href="https://www.martinjules.com/projects/single-project?id=2"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-indigo-900 to-blue-900 flex items-center justify-center">
<i class="fas fa-rocket text-6xl text-indigo-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">SpaceFlight Factory Game</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full mr-2">
Handmade 3D Engine
</span>
<span class="inline-block px-2 py-1 bg-indigo-900/50 text-indigo-300 text-xs rounded-full">
Simulation
</span>
</div>
<p class="text-gray-400">Space flight simulation game with factory building elements using custom physics engine.</p>
</div>
</a>
<!-- Project 3 -->
<a href="https://www.martinjules.com/projects/single-project?id=3"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-teal-900 to-emerald-900 flex items-center justify-center">
<i class="fas fa-ship text-6xl text-teal-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Boat Craft: Multiplayer Game</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-emerald-900/50 text-emerald-300 text-xs rounded-full">
Multiplayer
</span>
</div>
<p class="text-gray-400">Online multiplayer boat building and sailing game with real-time water physics.</p>
</div>
</a>
<!-- Project 4 -->
<a href="https://www.martinjules.com/projects/single-project?id=4"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-amber-900 to-yellow-900 flex items-center justify-center">
<i class="fas fa-pen-fancy text-6xl text-amber-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Graphic Study</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-amber-900/50 text-amber-300 text-xs rounded-full">
Research
</span>
</div>
<p class="text-gray-400">In-depth studies of advanced graphics techniques and rendering pipelines.</p>
</div>
</a>
<!-- Project 5 -->
<a href="https://www.martinjules.com/projects/single-project?id=5"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-red-900 to-pink-900 flex items-center justify-center">
<i class="fas fa-lightbulb text-6xl text-red-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Raytracer + PovRay Parser Tool</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-pink-900/50 text-pink-300 text-xs rounded-full mr-2">
Ray Tracing
</span>
<span class="inline-block px-2 py-1 bg-red-900/50 text-red-300 text-xs rounded-full">
Development Tool
</span>
</div>
<p class="text-gray-400">Custom raytracer implementation with PovRay scene file parser and converter.</p>
</div>
</a>
<!-- Project 6 -->
<a href="https://www.martinjules.com/projects/single-project?id=6"
class="project-card bg-gray-800 rounded-xl overflow-hidden transition duration-300 hover:border-blue-500 border border-gray-700">
<div class="h-48 bg-gradient-to-r from-purple-900 to-pink-900 flex items-center justify-center">
<i class="fas fa-fort-awesome text-6xl text-purple-400"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Tower Bruiser Game</h3>
<div class="flex items-center mb-4">
<span class="inline-block px-2 py-1 bg-blue-900/50 text-blue-300 text-xs rounded-full mr-2">
Handmade 3D Engine
</span>
<span class="inline-block px-2 py-1 bg-purple-900/50 text-purple-300 text-xs rounded-full">
Action Game
</span>
</div>
<p class="text-gray-400">Destruction-focused action game featuring physics-based tower demolition.</p>
</div>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 py-12 px-4">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h3 class="text-2xl font-bold mb-2">Martin JULES</h3>
<p class="text-gray-400">Graphics Programmer & Gamedev Enthusiast</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300 text-xl">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300 text-xl">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300 text-xl">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-400 transition duration-300 text-xl">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">
<p>© 2023 Martin JULES. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Simple animation for project cards
document.querySelectorAll('.project-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
});
card.addEventListener('mouseleave', function() {
this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
});
});
// Typewriter effect for the hero section
const typewriterTexts = [
"A Graphics Programmer",
"A Game Developer",
"A 3D Engine Creator",
"A Rendering Specialist"
];
let currentIndex = 0;
const typewriterElement = document.querySelector('.typewriter');
function changeTypewriterText() {
currentIndex = (currentIndex + 1) % typewriterTexts.length;
typewriterElement.textContent = typewriterTexts[currentIndex];
typewriterElement.style.animation = 'none';
void typewriterElement.offsetWidth; // Trigger reflow
typewriterElement.style.animation = 'typing 3.5s steps(40, end), blink-caret .75s step-end infinite';
}
setInterval(changeTypewriterText, 4000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Sc077y/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |