Hugging Face's logo

Spaces:
oskarnr1
/
undefined
Running

App Files Community
oskarnr1 commited on
Commit
67939f8
·
verified ·
1 Parent(s): 2ab5416

create a new page that is called projects that is linked to the button View All Projects

Browse files
Files changed (2) hide show
  1. components/navbar.js +4 -4
  2. projects.html +113 -0
components/navbar.js CHANGED
@@ -70,8 +70,8 @@ class CustomNavbar extends HTMLElement {
70
  <div class="container">
71
  <a href="#" class="brand">OSKAR L.K</a>
72
  <div class="nav-links">
73
- <a href="#works">Projects</a>
74
- <a href="#about">About</a>
75
  <a href="#skills">Skills</a>
76
  <a href="#contact">Contact</a>
77
  </div>
@@ -83,8 +83,8 @@ class CustomNavbar extends HTMLElement {
83
  </div>
84
  <div id="mobile-menu">
85
  <div class="flex flex-col space-y-4 text-lg">
86
- <a href="#works">Projects</a>
87
- <a href="#about">About</a>
88
  <a href="#skills">Skills</a>
89
  <a href="#contact">Contact</a>
90
  </div>
 
70
  <div class="container">
71
  <a href="#" class="brand">OSKAR L.K</a>
72
  <div class="nav-links">
73
+ <a href="projects.html">Projects</a>
74
+ <a href="#about">About</a>
75
  <a href="#skills">Skills</a>
76
  <a href="#contact">Contact</a>
77
  </div>
 
83
  </div>
84
  <div id="mobile-menu">
85
  <div class="flex flex-col space-y-4 text-lg">
86
+ <a href="projects.html">Projects</a>
87
+ <a href="#about">About</a>
88
  <a href="#skills">Skills</a>
89
  <a href="#contact">Contact</a>
90
  </div>
projects.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>All Projects | Oskar L.K</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-50 text-gray-800">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="pt-20 pb-16">
16
+ <section class="py-16 bg-white">
17
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
18
+ <h1 class="text-4xl font-bold text-center mb-12">All Projects</h1>
19
+
20
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
21
+ <!-- Game Projects -->
22
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
23
+ <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" class="w-full h-48 object-cover">
24
+ <div class="p-6">
25
+ <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
26
+ <h3 class="text-xl font-semibold mb-2">A game about a cat spreading chaos</h3>
27
+ <p class="text-gray-600 mb-4">Why? Simply because it wants to spend more time with their owner.</p>
28
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
29
+ View Project
30
+ <i data-feather="arrow-right" class="ml-2"></i>
31
+ </a>
32
+ </div>
33
+ </div>
34
+
35
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
36
+ <img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" class="w-full h-48 object-cover">
37
+ <div class="p-6">
38
+ <h2 class="text-2xl font-bold mb-2">Mech Warrior</h2>
39
+ <h3 class="text-xl font-semibold mb-2">Epic mech battles</h3>
40
+ <p class="text-gray-600 mb-4">Strategic combat game with customizable mech units</p>
41
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
42
+ View Project
43
+ <i data-feather="arrow-right" class="ml-2"></i>
44
+ </a>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
49
+ <img src="http://static.photos/gaming/640x360/102" alt="Pixel Adventure" class="w-full h-48 object-cover">
50
+ <div class="p-6">
51
+ <h2 class="text-2xl font-bold mb-2">Pixel Adventure</h2>
52
+ <h3 class="text-xl font-semibold mb-2">Retro-style platformer</h3>
53
+ <p class="text-gray-600 mb-4">Explore a vibrant pixel world full of secrets</p>
54
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
55
+ View Project
56
+ <i data-feather="arrow-right" class="ml-2"></i>
57
+ </a>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Art Projects -->
62
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
63
+ <img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="The Fireflies Night" class="w-full h-48 object-cover">
64
+ <div class="p-6">
65
+ <h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
66
+ <h3 class="text-xl font-semibold mb-2">Moonlight house illustration</h3>
67
+ <p class="text-gray-600 mb-4">Where fireflies lead weary travelers to its doors.</p>
68
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
69
+ View Project
70
+ <i data-feather="arrow-right" class="ml-2"></i>
71
+ </a>
72
+ </div>
73
+ </div>
74
+
75
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
76
+ <img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" class="w-full h-48 object-cover">
77
+ <div class="p-6">
78
+ <h2 class="text-2xl font-bold mb-2">Concept Art</h2>
79
+ <h3 class="text-xl font-semibold mb-2">Stylized characters</h3>
80
+ <p class="text-gray-600 mb-4">Character concepts for fantasy RPG</p>
81
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
82
+ View Project
83
+ <i data-feather="arrow-right" class="ml-2"></i>
84
+ </a>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg h-full">
89
+ <img src="http://static.photos/art/640x360/43" alt="Environment Art" class="w-full h-48 object-cover">
90
+ <div class="p-6">
91
+ <h2 class="text-2xl font-bold mb-2">Environment Art</h2>
92
+ <h3 class="text-xl font-semibold mb-2">Fantasy landscapes</h3>
93
+ <p class="text-gray-600 mb-4">Magical environments and world-building</p>
94
+ <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
95
+ View Project
96
+ <i data-feather="arrow-right" class="ml-2"></i>
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </section>
103
+ </main>
104
+
105
+ <custom-footer></custom-footer>
106
+
107
+ <script src="components/navbar.js"></script>
108
+ <script src="components/footer.js"></script>
109
+ <script>
110
+ feather.replace();
111
+ </script>
112
+ </body>
113
+ </html>