|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Project Title | Oskar L.K</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="pt-20 pb-16"> |
|
|
|
|
|
<section class="relative bg-black text-white"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/30 to-black/70"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32 relative z-10"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<span class="bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold flex items-center"> |
|
|
<i data-feather="cpu" class="w-4 h-4 mr-2"></i> |
|
|
Game Project |
|
|
</span> |
|
|
</div> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Project Title</h1> |
|
|
<p class="text-xl md:text-2xl max-w-3xl mb-8">A short tagline or description of the project that explains what it's about</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="bg-white/20 px-4 py-2 rounded-full"> |
|
|
<p class="text-sm">Unity</p> |
|
|
</div> |
|
|
<div class="bg-white/20 px-4 py-2 rounded-full"> |
|
|
<p class="text-sm">C#</p> |
|
|
</div> |
|
|
<div class="bg-white/20 px-4 py-2 rounded-full"> |
|
|
<p class="text-sm">2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<img src="http://static.photos/gaming/1200x630/42" alt="Project Header" class="absolute inset-0 w-full h-full object-cover -z-10"> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="prose lg:prose-xl"> |
|
|
<h2 class="text-3xl font-bold mb-6">About the Project</h2> |
|
|
<p>This is where you can provide a detailed description of your project. Talk about the inspiration behind it, the development process, challenges you faced, and solutions you implemented.</p> |
|
|
|
|
|
<h3 class="text-2xl font-bold mt-10 mb-4">Development Process</h3> |
|
|
<p>Describe your workflow, tools used, and any interesting technical aspects. You might want to include:</p> |
|
|
<ul> |
|
|
<li>Game design decisions</li> |
|
|
<li>Technical challenges and solutions</li> |
|
|
<li>Art style choices</li> |
|
|
<li>Prototyping process</li> |
|
|
</ul> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Gallery</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gray-100 rounded-xl overflow-hidden"> |
|
|
<img src="http://static.photos/gaming/640x360/101" alt="Screenshot 1" class="w-full h-auto"> |
|
|
<p class="p-4 text-sm text-gray-600">Caption for the screenshot</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 rounded-xl overflow-hidden"> |
|
|
<img src="http://static.photos/gaming/640x360/102" alt="Screenshot 2" class="w-full h-auto"> |
|
|
<p class="p-4 text-sm text-gray-600">Caption for the screenshot</p> |
|
|
</div> |
|
|
<div class="bg-gray-100 rounded-xl overflow-hidden md:col-span-2"> |
|
|
<img src="http://static.photos/gaming/1024x576/103" alt="Screenshot 3" class="w-full h-auto"> |
|
|
<p class="p-4 text-sm text-gray-600">Wide screenshot showing gameplay</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Gameplay Video</h3> |
|
|
<div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-xl overflow-hidden"> |
|
|
<iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Key Features</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="p-6 bg-white rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="zap" class="text-red-600"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold ml-4">Feature 1</h4> |
|
|
</div> |
|
|
<p>Detailed description of this feature and its importance to the project.</p> |
|
|
</div> |
|
|
<div class="p-6 bg-white rounded-xl shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="box" class="text-red-600"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold ml-4">Feature 2</h4> |
|
|
</div> |
|
|
<p>Detailed description of this feature and its importance to the project.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Lessons Learned</h3> |
|
|
<p>Reflect on what you learned from this project, both in terms of technical skills and project management. Discuss what you would do differently next time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-red-600 to-red-800 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Like What You See?</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto">Check out more of my projects or get in touch to discuss potential collaborations.</p> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="projects.html" class="px-8 py-3 bg-white text-red-600 rounded-full font-medium hover:bg-gray-100 transition"> |
|
|
View All Projects |
|
|
</a> |
|
|
<a href="index.html#contact" class="px-8 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white/10 transition"> |
|
|
Contact Me |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
