Spaces:

oskarnr1
/

undefined

Running

App Files Files Community

oskarnr1 commited on Oct 25, 2025

Commit

5d2a495

verified ·

1 Parent(s): 0f1c8d4

follow context

Browse files

Files changed (2) hide show

index.html +14 -8
projects.html +143 -0

index.html CHANGED Viewed

@@ -97,11 +97,17 @@
                         <p class="mt-4">My journey began in Skellefteå, Sweden, studying game and UX design, and continues now in Kortrijk, Belgium at DAE's Independent Game Production program.</p>
                         <p class="mt-4">I believe games are more than entertainment - they're portals to new experiences, stories that shape us, and art that moves us.</p>
                     </div>
-                    <a href="https://www.oskarlkportfolio.com/_files/ugd/6588f2_702049f1c21a4c0093148d8d58579f11.pdf" class="mt-6 inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-full hover:shadow-lg transition">
-                        Download CV
-                        <i data-feather="download" class="ml-2"></i>
-                    </a>
-                </div>
                 <div class="md:w-1/2 flex justify-center">
                     <div class="relative">
                         <img src="https://static.wixstatic.com/media/6588f2_4fd8efde373342ed96ab1e31ce703032~mv2.jpg" alt="Oskar photo" class="rounded-xl shadow-2xl w-full max-w-md">
@@ -239,11 +245,11 @@
             </div>
         </div>
         <div class="text-center mt-16">
-            <a href="works.html" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-medium transition hover:shadow-lg">
-                View Complete Portfolio
                 <i data-feather="arrow-right" class="ml-2"></i>
             </a>
-        </div>
     </section>
     <!-- Contact Section -->

                         <p class="mt-4">My journey began in Skellefteå, Sweden, studying game and UX design, and continues now in Kortrijk, Belgium at DAE's Independent Game Production program.</p>
                         <p class="mt-4">I believe games are more than entertainment - they're portals to new experiences, stories that shape us, and art that moves us.</p>
                     </div>
+                    <div class="flex flex-col sm:flex-row gap-4 mt-6">
+                        <a href="https://www.oskarlkportfolio.com/_files/ugd/6588f2_702049f1c21a4c0093148d8d58579f11.pdf" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-full hover:shadow-lg transition">
+                            Download CV
+                            <i data-feather="download" class="ml-2"></i>
+                        </a>
+                        <a href="/projects.html" class="inline-flex items-center px-6 py-3 bg-white text-purple-600 border border-purple-600 rounded-full hover:bg-purple-50 transition">
+                            View All Projects
+                            <i data-feather="arrow-right" class="ml-2"></i>
+                        </a>
+                    </div>
+</div>
                 <div class="md:w-1/2 flex justify-center">
                     <div class="relative">
                         <img src="https://static.wixstatic.com/media/6588f2_4fd8efde373342ed96ab1e31ce703032~mv2.jpg" alt="Oskar photo" class="rounded-xl shadow-2xl w-full max-w-md">
             </div>
         </div>
         <div class="text-center mt-16">
+            <a href="/projects.html" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl font-medium transition hover:shadow-lg">
+                View All Projects
                 <i data-feather="arrow-right" class="ml-2"></i>
             </a>
+</div>
     </section>
     <!-- Contact Section -->

projects.html ADDED Viewed

	@@ -0,0 +1,143 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects | Oskar L.K</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            scroll-behavior: smooth;
+        }
+        .project-card {
+            transition: all 0.3s ease;
+            border: 1px solid #e5e7eb;
+        }
+        .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);
+            border-color: #667eea;
+        }
+        .filter-btn.active {
+            background: linear-gradient(to right, #667eea, #764ba2);
+            color: white;
+            border-color: transparent;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800">
+    <custom-navbar></custom-navbar>
+    <main class="pt-20 pb-16">
+        <section class="py-16 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">My Projects</h1>
+                <p class="text-xl max-w-3xl mx-auto">Explore my portfolio of game design, development, and visual art projects</p>
+            </div>
+        </section>
+        <section class="py-16 bg-white">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex flex-wrap justify-center gap-4 mb-12">
+                    <button class="filter-btn active px-6 py-3 rounded-xl font-medium border transition" data-filter="all">All Projects</button>
+                    <button class="filter-btn px-6 py-3 rounded-xl font-medium border transition" data-filter="game">Games</button>
+                    <button class="filter-btn px-6 py-3 rounded-xl font-medium border transition" data-filter="art">Art</button>
+                    <button class="filter-btn px-6 py-3 rounded-xl font-medium border transition" data-filter="design">Design</button>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Project cards will be loaded here -->
+                    <div class="project-card bg-white rounded-xl overflow-hidden" data-category="game">
+                        <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
+                            <p class="text-gray-600 mb-4">A mischievous cat causes chaos to spend more time with its owner.</p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
+                                View Project
+                                <i data-feather="arrow-right" class="ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="project-card bg-white rounded-xl overflow-hidden" data-category="game">
+                        <img src="https://static.wixstatic.com/media/6588f2_7dcc0d9a4e6d4e0fb3e7b5d3c0c8e0b8~mv2.png" alt="The Fireflies Night" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
+                            <p class="text-gray-600 mb-4">Follow the fireflies to a mysterious house under the full moonlight.</p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
+                                View Project
+                                <i data-feather="arrow-right" class="ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="project-card bg-white rounded-xl overflow-hidden" data-category="art">
+                        <img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="Fireflies Art" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h2 class="text-2xl font-bold mb-2">Fireflies Concept Art</h2>
+                            <p class="text-gray-600 mb-4">Visual development for The Fireflies Night game.</p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
+                                View Artwork
+                                <i data-feather="arrow-right" class="ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="project-card bg-white rounded-xl overflow-hidden" data-category="design">
+                        <img src="https://static.wixstatic.com/media/6588f2_89c0a3ecc407460e9dd1208d6f38f934~mv2.png" alt="Portfolio Map" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <h2 class="text-2xl font-bold mb-2">Portfolio Map</h2>
+                            <p class="text-gray-600 mb-4">Interactive visualization of project connections.</p>
+                            <a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
+                                Explore
+                                <i data-feather="arrow-right" class="ml-2"></i>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- Additional projects can be added here -->
+                </div>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Project filtering
+        document.querySelectorAll('.filter-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                // Update active button
+                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                this.classList.add('active');
+                const filter = this.dataset.filter;
+                const projects = document.querySelectorAll('.project-card');
+                projects.forEach(project => {
+                    if (filter === 'all' || project.dataset.category === filter) {
+                        project.style.display = 'block';
+                    } else {
+                        project.style.display = 'none';
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>