|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Bap Cat | 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">Bap Cat</h1> |
|
|
<p class="text-xl md:text-2xl max-w-3xl mb-8">A chaotic game about a cat spreading havoc in their owner's cafe</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">2025</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" 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>Bap Cat is a whimsical game about a mischievous feline causing chaos in their owner's cafe. The core concept revolves around the cat's desire to spend more time with its owner, leading to increasingly creative disruptions.</p> |
|
|
<h3 class="text-2xl font-bold mt-10 mb-4">Development Process</h3> |
|
|
<p>My role during this project was primarily that of game designer and tech artist. When designing for the game, we had to work fast to be able to start working immediately on a game mechanic, as the theme of the game was "Spread it", so we decided to go with making use of Unity's physics system to spread chaos.</p> |
|
|
<p>And as we started working on it, I was put in charge of creating a two-outline-based system that had the art style we wanted: simple, stylized, with an inner colored line and a general black outline. Each object and character had to have its own colored outline, but would share the same general black outline.</p> |
|
|
<p>I also create simple VFX for destruction in the game, like when a cup falls over or a plate hits the ground, which give off specific effects.</p> |
|
|
<p>We didn't win the game jam, but we managed to rise in the popularity rankings to fourth.</p> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Gallery</h3> |
|
|
<div class="bg-gray-100 rounded-xl overflow-hidden"> |
|
|
<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat Main" class="w-full h-auto"> |
|
|
<p class="p-4 text-sm text-gray-600">The mischievous protagonist in action</p> |
|
|
</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/example" 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">Physics-Based Chaos</h4> |
|
|
</div> |
|
|
<p>Realistic physics interactions make every playthrough unique as objects bounce, break, and tumble in unpredictable ways.</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="sparkles" class="text-red-600"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold ml-4">Simple VFX</h4> |
|
|
</div> |
|
|
<p>Created simple but effective visual effects for destruction events like breaking cups and plates to enhance the chaotic feel.</p> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
