Skip to content

Commit 4a110e1

Browse files
UnderscorePanUnderscorePan
committed
updated projects
1 parent ff2a5f0 commit 4a110e1

1 file changed

Lines changed: 100 additions & 89 deletions

File tree

‎src/components/projectsbox.astro‎

Lines changed: 100 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,117 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Projects - Samson Hew</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<script>
9-
tailwind.config = {
10-
theme: {
11-
extend: {
12-
colors: {
13-
}
14-
}
15-
}
16-
}
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
colors: {},
13+
},
14+
},
15+
};
1716
</script>
1817
<style>
19-
@keyframes fadeIn {
20-
from {
21-
opacity: 0;
22-
transform: translateY(20px);
23-
}
24-
to {
25-
opacity: 1;
26-
transform: translateY(0);
27-
}
28-
}
29-
30-
.fade-in {
31-
animation: fadeIn 0.6s ease-out forwards;
32-
}
33-
34-
.scrollbar-thin::-webkit-scrollbar {
35-
width: 8px;
36-
}
37-
38-
.scrollbar-thin::-webkit-scrollbar-track {
39-
background: rgba(255, 255, 255, 0.1);
40-
border-radius: 4px;
41-
}
42-
43-
.scrollbar-thin::-webkit-scrollbar-thumb {
44-
background: rgba(94, 129, 172, 0.5);
45-
border-radius: 4px;
18+
@keyframes fadeIn {
19+
from {
20+
opacity: 0;
21+
transform: translateY(20px);
4622
}
47-
48-
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
49-
background: rgba(94, 129, 172, 0.7);
23+
to {
24+
opacity: 1;
25+
transform: translateY(0);
5026
}
27+
}
28+
29+
.fade-in {
30+
animation: fadeIn 0.6s ease-out forwards;
31+
}
32+
33+
.scrollbar-thin::-webkit-scrollbar {
34+
width: 8px;
35+
}
36+
37+
.scrollbar-thin::-webkit-scrollbar-track {
38+
background: rgba(255, 255, 255, 0.1);
39+
border-radius: 4px;
40+
}
41+
42+
.scrollbar-thin::-webkit-scrollbar-thumb {
43+
background: rgba(94, 129, 172, 0.5);
44+
border-radius: 4px;
45+
}
46+
47+
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
48+
background: rgba(94, 129, 172, 0.7);
49+
}
5150
</style>
52-
</head>
53-
<body class="overflow-hidden">
51+
</head>
52+
<body class="overflow-hidden">
5453
<!-- Background -->
55-
<div class="absolute bg-[url(/bluemountain.webp)] saturate-[1.25] blur-[2px] bg-cover h-screen w-screen -z-10"></div>
56-
57-
<div class="flex items-center justify-center min-h-screen p-4">
58-
<div class="bg-gray-900/95 p-8 rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto scrollbar-thin fade-in">
59-
60-
<!-- Header Section -->
61-
<div class="text-center mb-8">
62-
<a href="/" class="inline-block mb-4 text-gray-300 hover:text-white transition-colors duration-300">
63-
← Back to Home
64-
</a>
65-
<h1 class="text-4xl font-bold text-white mb-2">Featured Projects</h1>
66-
<div class="h-1 w-24 bg-blue-400/50 mx-auto mb-4"></div>
67-
<p class="text-gray-200 text-lg max-w-2xl mx-auto">
68-
Explore some of my recent work and projects.
69-
</p>
70-
</div>
54+
<div
55+
class="absolute bg-[url(/bluemountain.webp)] saturate-[1.25] blur-[2px] bg-cover h-screen w-screen -z-10"
56+
>
57+
</div>
7158

72-
<!-- Projects Section -->
73-
<div class="mb-8">
74-
<div class="grid md:grid-cols-2 gap-4">
75-
<!-- Project 1 -->
76-
<div class="bg-white/10 p-5 rounded-lg hover:bg-white/15 transition-colors duration-300">
77-
<h3 class="text-xl font-semibold text-white mb-2">ur not supposed to be here</h3>
78-
<p class="text-gray-200 mb-3">
79-
ya0pyayapyap
80-
</p>
81-
<div class="flex flex-wrap gap-2">
82-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">React</span>
83-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Node.js</span>
84-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">MongoDB</span>
85-
</div>
86-
</div>
59+
<div class="flex items-center justify-center min-h-screen p-4">
60+
<div
61+
class="bg-gray-900/95 p-8 rounded-lg shadow-lg w-full max-w-4xl max-h-[90vh] overflow-y-auto scrollbar-thin fade-in"
62+
>
63+
<!-- Header Section -->
64+
<div class="text-center mb-8">
65+
<a
66+
href="/"
67+
class="inline-block mb-4 text-gray-300 hover:text-white transition-colors duration-300"
68+
>
69+
← Back to Home
70+
</a>
71+
<h1 class="text-4xl font-bold text-white mb-2">Featured Projects</h1>
72+
<div class="h-1 w-24 bg-blue-400/50 mx-auto mb-4"></div>
73+
<p class="text-gray-200 text-lg max-w-2xl mx-auto">
74+
Explore some of my recent work and projects.
75+
</p>
76+
</div>
8777

88-
<!-- Project 2 -->
89-
<div class="bg-white/10 p-5 rounded-lg hover:bg-white/15 transition-colors duration-300">
90-
<h3 class="text-xl font-semibold text-white mb-2">ppp</h3>
91-
<p class="text-gray-200 mb-3">
92-
placeholder
93-
</p>
94-
<div class="flex flex-wrap gap-2">
95-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Vue.js</span>
96-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Firebase</span>
97-
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Tailwind</span>
98-
</div>
99-
</div>
100-
</div>
78+
<!-- Projects Section -->
79+
<div class="grid gap-4 md:grid-cols-2">
80+
<a
81+
href="https://github.com/UnderscorePan/EZFlip"
82+
target="_blank"
83+
rel="noopener noreferrer"
84+
class="bg-white/10 p-5 rounded-lg hover:bg-white/15 transition-colors duration-300 block"
85+
>
86+
<h3 class="text-xl font-semibold text-white mb-2">
87+
EZFlip - Flashcard App
88+
</h3>
89+
<p class="text-gray-200 mb-3">
90+
My final your project during my diploma studies which utilizes
91+
gesture recognization to navigate through flashcards.
92+
</p>
93+
<div class="flex flex-wrap gap-2">
94+
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Python</span>
95+
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Mediapipe</span>
10196
</div>
97+
</a>
10298

99+
<a
100+
href="https://underscorepan.github.io/"
101+
target="_blank"
102+
rel="noopener noreferrer"
103+
class="bg-white/10 p-5 rounded-lg hover:bg-white/15 transition-colors duration-300 block"
104+
>
105+
<h3 class="text-xl font-semibold text-white mb-2">underscorepan.github.io</h3>
106+
<p class="text-gray-200 mb-3">This website! Well, not much to tell you. Take a look around.</p>
107+
<div class="flex flex-wrap gap-2">
108+
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Astro</span>
109+
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Tailwind CSS</span>
110+
<span class="bg-blue-400/50 px-3 py-1 rounded text-sm text-white">Howler.js</span>
111+
</div>
112+
</a>
103113
</div>
114+
104115
</div>
105-
</body>
116+
</body>
106117
</html>

0 commit comments

Comments
 (0)