-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
237 lines (218 loc) · 13.5 KB
/
Copy pathindex.html
File metadata and controls
237 lines (218 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angelo - Developer Tools & Portfolio</title>
<link rel="stylesheet" href="dist/styles.css" />
<style>
/* Custom scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
transition: background 0.2s;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Smooth scrolling */
.horizontal-scroll {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body class="font-sans bg-gray-900 text-gray-100 overflow-hidden">
<!-- Background Parallax Layers -->
<div
class="fixed w-[130%] h-[130%] bg-no-repeat bg-center bg-cover z-[-50] -top-[25%] -left-[25%]"
style="background-image: url("images/bgz0.png")"></div>
<div
class="fixed w-[130%] h-[130%] bg-no-repeat bg-center bg-cover z-[-50] -top-[25%] -left-[25%]"
style="background-image: url("images/bgz1.png")"></div>
<div
class="fixed w-[130%] h-[130%] bg-no-repeat bg-center bg-cover z-[-50] -top-[25%] -left-[25%]"
style="background-image: url("images/bgz2.png")"></div>
<script src="parallax.js"></script>
<!-- Main Container -->
<div
id="main"
class="h-screen flex flex-col md:flex-row md:overflow-x-auto md:overflow-y-hidden overflow-y-auto overflow-x-hidden gap-6 md:gap-8 p-6 md:p-8 horizontal-scroll custom-scrollbar">
<!-- About Me Section -->
<section class="flex-shrink-0 h-auto md:h-full md:w-lg">
<div class="bg-gray-900/95 rounded-xl shadow-2xl backdrop-blur-sm h-full flex flex-col overflow-hidden">
<header class="p-8 pb-6 text-center flex-shrink-0 border-b border-gray-800">
<img
src="images/avatar.png"
alt="Angelo Avatar"
class="w-20 h-20 mb-4 rounded-full border-2 border-gray-700 object-cover mx-auto shadow-lg" />
<h1 class="text-3xl font-semibold text-gray-100">Angelo</h1>
<p class="text-gray-400 text-lg font-normal mb-2">(Pixelmancer)</p>
<p class="text-gray-400 text-sm font-normal">Developer & Artist</p>
</header>
<div class="flex-1 overflow-y-auto custom-scrollbar p-8 pt-6">
<div class="mb-6 pt-2">
<p class="text-gray-300 text-sm leading-relaxed">
I'm a Minecraft Marketplace developer who's been at it since 2018. I work as both an artist and a developer, so visuals and systems
are always planned together. I'm most motivated by ideas that haven't been done before, pushing into R&D and discovery, and I love
cleaning up repetitive modding work with simple, automated solutions.
</p>
</div>
<div class="mb-6 pt-2 mt-2 border-t border-gray-700">
<div class="text-xs text-gray-500 font-semibold uppercase tracking-wider px-1 mb-3">Skills & Technologies</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-purple-400/10 border border-purple-400/30 rounded-full text-purple-400 text-xs">Attachables</span>
<span class="px-3 py-1 bg-orange-400/10 border border-orange-400/30 rounded-full text-orange-400 text-xs">Blockbench</span>
<span class="px-3 py-1 bg-pink-400/10 border border-pink-400/30 rounded-full text-pink-400 text-xs">Blender</span>
<span class="px-3 py-1 bg-red-400/10 border border-red-400/30 rounded-full text-red-400 text-xs">Boss Behaviors</span>
<span class="px-3 py-1 bg-blue-400/10 border border-blue-400/30 rounded-full text-blue-400 text-xs">Entity Vehicles</span>
<span class="px-3 py-1 bg-yellow-400/10 border border-yellow-400/30 rounded-full text-yellow-400 text-xs">JS/TS</span>
<span class="px-3 py-1 bg-fuchsia-400/10 border border-fuchsia-400/30 rounded-full text-fuchsia-400 text-xs">Math Animations</span>
<span class="px-3 py-1 bg-teal-400/10 border border-teal-400/30 rounded-full text-teal-400 text-xs">Minecraft Bedrock</span>
<span class="px-3 py-1 bg-cyan-400/10 border border-cyan-400/30 rounded-full text-cyan-400 text-xs">Particles</span>
<span class="px-3 py-1 bg-indigo-400/10 border border-indigo-400/30 rounded-full text-indigo-400 text-xs">Pixel Art</span>
<span class="px-3 py-1 bg-emerald-400/10 border border-emerald-400/30 rounded-full text-emerald-400 text-xs">Python</span>
<span class="px-3 py-1 bg-orange-400/10 border border-orange-400/30 rounded-full text-orange-400 text-xs">Aseprite</span>
<span class="px-3 py-1 bg-lime-400/10 border border-lime-400/30 rounded-full text-lime-400 text-xs">Regolith</span>
<span class="px-3 py-1 bg-amber-400/10 border border-amber-400/30 rounded-full text-amber-400 text-xs">Scripting-API</span>
<span class="px-3 py-1 bg-gray-400/10 border border-gray-400/30 rounded-full text-gray-400 text-xs">Server-UI</span>
<span class="px-3 py-1 bg-violet-400/10 border border-violet-400/30 rounded-full text-violet-400 text-xs">VSCode Extensions</span>
<span class="px-3 py-1 bg-green-500/10 border border-green-500/30 rounded-full text-green-500 text-xs">World-Generation</span>
</div>
</div>
</div>
</div>
</section>
<!-- Tools & Extensions Section -->
<section class="flex-shrink-0 h-auto md:h-full md:w-lg">
<div class="bg-gray-900/95 rounded-xl shadow-2xl backdrop-blur-sm h-full flex flex-col overflow-hidden">
<header class="p-8 pb-6 text-center flex-shrink-0 border-b border-gray-800">
<h2 class="text-3xl font-semibold text-gray-100 mb-2">Tools & Extensions</h2>
<p class="text-gray-400 text-sm font-normal">Development utilities & plugins</p>
</header>
<div class="flex-1 overflow-y-auto custom-scrollbar p-8 pt-6">
<nav role="navigation" aria-label="Developer Tools">
<ul class="list-none flex flex-col gap-3">
<li>
<a
href="https://github.com/thePixelmancer/regolith-filters"
target="_blank"
rel="noopener noreferrer"
class="group flex items-center justify-between p-4 px-5 text-gray-100 bg-transparent border border-gray-700 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out relative hover:bg-gray-700 hover:border-red-400 hover:shadow-lg hover:shadow-red-400/20">
<div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-red-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span>Regolith Filters</span>
</div>
<div class="text-xs text-gray-400 font-normal mt-1">Development Tools • Bedrock</div>
<div class="text-xs text-gray-500 mt-1">
Collection of powerful filters and utilities for Minecraft Bedrock Edition development
</div>
</div>
<span
class="opacity-60 transition-all duration-200 ease-in-out group-hover:opacity-100 group-hover:translate-x-1 group-hover:text-red-400"
>→</span
>
</a>
</li>
<li class="pt-2 mt-2 border-t border-gray-700">
<div class="text-xs text-gray-500 font-semibold uppercase tracking-wider px-1 mb-3">Web Tools</div>
</li>
<li>
<a
href="https://thepixelmancer.github.io/perlin-fiddle/"
target="_blank"
rel="noopener noreferrer"
class="group flex items-center justify-between p-4 px-5 text-gray-100 bg-transparent border border-gray-700 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out relative hover:bg-gray-700 hover:border-green-400 hover:shadow-lg hover:shadow-green-400/20">
<div>
<div class="flex items-center gap-3">
<img src="images/perlin-fiddle-icon.png" alt="Perlin Fiddle Icon" class="w-8 h-8 rounded object-cover" />
<div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-green-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span>Perlin Fiddle</span>
</div>
<div class="text-xs text-gray-400 font-normal">Noise Generator • p5.js</div>
</div>
</div>
<div class="text-xs text-gray-500 mt-2">
Interactive Perlin noise generation tool for procedural content and game development
</div>
</div>
<span
class="opacity-60 transition-all duration-200 ease-in-out group-hover:opacity-100 group-hover:translate-x-1 group-hover:text-green-400"
>→</span
>
</a>
</li>
<li class="pt-2 mt-2 border-t border-gray-700">
<div class="text-xs text-gray-500 font-semibold uppercase tracking-wider px-1 mb-3">VSCode Extensions</div>
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=pixelmancer.controller-view"
target="_blank"
rel="noopener noreferrer"
class="group flex items-center justify-between p-4 px-5 text-gray-100 bg-transparent border border-gray-700 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out relative hover:bg-gray-700 hover:border-orange-400 hover:shadow-lg hover:shadow-orange-400/20">
<div>
<div class="flex items-center gap-3">
<img src="images/controller-view-icon.png" alt="Controller View Icon" class="w-8 h-8 rounded object-cover" />
<div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span>Controller View</span>
</div>
<div class="text-xs text-gray-400 font-normal">VSCode Extension • Controller</div>
</div>
</div>
<div class="text-xs text-gray-500 mt-2">
Enhanced controller development tools with advanced debugging and visualization features
</div>
</div>
<span
class="opacity-60 transition-all duration-200 ease-in-out group-hover:opacity-100 group-hover:translate-x-1 group-hover:text-orange-400"
>→</span
>
</a>
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=pixelmancer.modular-mc-syntax"
target="_blank"
rel="noopener noreferrer"
class="group flex items-center justify-between p-4 px-5 text-gray-100 bg-transparent border border-gray-700 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out relative hover:bg-gray-700 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-400/20">
<div>
<div class="flex items-center gap-3">
<img src="images/modular-mc-syntax-icon.png" alt="Modular MC Syntax Icon" class="w-8 h-8 rounded object-cover" />
<div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 bg-cyan-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span>Modular MC Syntax</span>
</div>
<div class="text-xs text-gray-400 font-normal">VSCode Extension • Syntax</div>
</div>
</div>
<div class="text-xs text-gray-500 mt-2">Comprehensive syntax highlighting and language support for Minecraft development</div>
</div>
<span
class="opacity-60 transition-all duration-200 ease-in-out group-hover:opacity-100 group-hover:translate-x-1 group-hover:text-cyan-400"
>→</span
>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</div>
</body>
</html>