Hugging Face's logo

Spaces:
RowDler
/
pixelvault-devport
Running

App Files Community
pixelvault-devport
File size: 16,098 Bytes
970e21e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f354882
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

<!DOCTYPE html>
<html lang="en" class="scroll-smooth" style="image-rendering: pixelated;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeVintage | Retro Developer Portfolio</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>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        vintage: {
                            100: '#FFF1E6',
                            200: '#FDE2E4',
                            300: '#FAD2E1',
                            400: '#E2ECE9',
                            500: '#BEE1E6',
                            600: '#9DB4C0',
                            700: '#5C6B73',
                            800: '#253237',
                            900: '#1B2021',
                        },
                        retro: {
                            100: '#F7F0F5',
                            200: '#DECBB7',
                            300: '#AC7B84',
                            400: '#8F5C5C',
                            500: '#5D2E46',
                            600: '#4A2545',
                            700: '#3A1E3B',
                            800: '#2A1629',
                            900: '#1A0D1A',
                        }
                    },
                    fontFamily: {
                        vintage: ['"Courier New"', 'monospace'],
                        retro: ['"Press Start 2P"', 'cursive']
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-[#1a1a1a] text-[#e0e0e0] font-mono min-h-screen" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzIyMjIyMiIvPjwvc3ZnPg==');">
    <custom-navbar></custom-navbar>
    <script src="components/navbar.js"></script>

    <main class="container mx-auto px-4 py-12 md:py-24" style="max-width: 1200px;">
        <!-- Hero Section -->
        <section class="mb-24">
            <div class="flex flex-col md:flex-row items-center gap-8">
                <div class="md:w-1/2 relative">
                    <div class="absolute -top-4 -left-4 w-full h-full border-4 border-[#4a8fe7] z-0"></div>
                    <div class="relative z-10 w-full h-full">
                        <img src="http://static.photos/technology/200x200/42" alt="Pixel Developer" class="w-full h-auto border-4 border-[#3061b3] object-cover" style="image-rendering: pixelated;">
                    </div>
                </div>
                <div class="md:w-1/2 mt-8 md:mt-0">
                    <h1 class="text-4xl md:text-5xl mb-6 text-[#4a8fe7] font-bold" style="text-shadow: 4px 4px 0 #3061b3;">HELLO,</h1>
                    <h1 class="text-4xl md:text-5xl mb-6 text-[#4a8fe7] font-bold" style="text-shadow: 4px 4px 0 #3061b3;">I'M PIXEL_DEV</h1>
                    <p class="text-lg mb-8 leading-relaxed text-[#e0e0e0]">A <span class="text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">blocky-styled</span> full-stack developer crafting digital experiences with a pixel twist. Specializing in creating unique, 8-bit inspired interfaces with modern functionality.</p>
                    <div class="flex gap-4">
                        <a href="#projects" class="px-6 py-3 bg-[#4a8fe7] hover:bg-[#3a7dd7] text-[#e0e0e0] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#2050a3] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;">
                            <i data-feather="code"></i> VIEW WORK
                        </a>
                        <a href="#contact" class="px-6 py-3 bg-transparent hover:bg-[#222222] text-[#4a8fe7] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#4a8fe7] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;">
                            <i data-feather="mail"></i> CONTACT
                        </a>
                    </div>
</div>
            </div>
        </section>
        <!-- About Section -->
        <section id="about" class="mb-24">
            <div class="relative">
                <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;">
                    <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span>
                    ABOUT_ME
                </h2>
                <div class="flex flex-col md:flex-row gap-8">
                    <div class="md:w-1/3 bg-[#222222] p-6 border-l-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;">
                        <h3 class="text-2xl mb-4 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">THE_STORY</h3>
                        <p class="mb-6 text-[#e0e0e0]">Started coding on an old brick-like computer. Fell in love with the digital world and never looked back.</p>
                        <p class="text-[#e0e0e0]">Now I build blocky interfaces with modern web technologies.</p>
                    </div>
                    <div class="md:w-2/3">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;">
                                <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div>
                                <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">DEVELOPMENT</h3>
                                <p class="text-[#e0e0e0]">Block-by-block full-stack development creating pixel-perfect experiences.</p>
                            </div>
                            <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;">
                                <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div>
                                <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">DESIGN</h3>
                                <p class="text-[#e0e0e0]">8-bit inspired designs with modern UX principles.</p>
                            </div>
                            <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;">
                                <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div>
                                <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">TECH</h3>
                                <p class="text-[#e0e0e0]">Modern stack with 8-bit inspiration: React, Node.js, WebGL, and more.</p>
                            </div>
                            <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;">
                                <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div>
                                <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">PASSION</h3>
                                <p class="text-[#e0e0e0]">Building digital worlds that feel like classic video games.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</section>
        <!-- Projects Section -->
        <section id="projects" class="mb-24">
            <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;">
                <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span>
                PROJECTS
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Project 1 -->
                <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;">
                    <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div>
                    <img src="http://static.photos/gaming/320x240/1" alt="8-bit Game" class="w-full h-64 object-cover" style="image-rendering: pixelated;">
                    <div class="bg-[#222222] p-4">
                        <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">8-BIT GAME ENGINE</h3>
                        <p class="text-[#e0e0e0] mb-4">A retro game engine built with modern web technologies.</p>
                        <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1">
                            VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;">
                    <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div>
                    <img src="http://static.photos/technology/320x240/2" alt="Pixel Art Editor" class="w-full h-64 object-cover" style="image-rendering: pixelated;">
                    <div class="bg-[#222222] p-4">
                        <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">PIXEL_ART_EDITOR</h3>
                        <p class="text-[#e0e0e0] mb-4">In-browser pixel art creation tool with 8-bit palette.</p>
                        <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1">
                            VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;">
                    <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div>
                    <img src="http://static.photos/gaming/320x240/3" alt="Block World" class="w-full h-64 object-cover" style="image-rendering: pixelated;">
                    <div class="bg-[#222222] p-4">
                        <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">BLOCK_WORLD</h3>
                        <p class="text-[#e0e0e0] mb-4">Procedurally generated 3D world with voxel graphics.</p>
                        <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1">
                            VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i>
                        </a>
                    </div>
                </div>
            </div>
</section>
        <!-- Contact Section -->
        <section id="contact" class="mb-24">
            <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;">
                <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span>
                GET_IN_TOUCH
            </h2>
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/2">
                    <p class="text-xl mb-8 text-[#e0e0e0]">Have a project that needs pixel perfect execution? Let's talk!</p>
                    <div class="space-y-6">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;">
                                <i data-feather="mail" class="text-[#e0e0e0]"></i>
                            </div>
                            <span class="text-[#e0e0e0]">hello@pixelvault.dev</span>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;">
                                <i data-feather="phone" class="text-[#e0e0e0]"></i>
                            </div>
                            <span class="text-[#e0e0e0]">+1 (555) PIX-ELDEV</span>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;">
                                <i data-feather="map-pin" class="text-[#e0e0e0]"></i>
                            </div>
                            <span class="text-[#e0e0e0]">Block #42, Pixel Valley</span>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <form class="space-y-6 border-4 border-[#3061b3] p-6" style="box-shadow: 6px 6px 0 #3061b3;">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="name" class="block text-[#e0e0e0] mb-2 font-bold">NAME</label>
                                <input type="text" id="name" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;">
                            </div>
                            <div>
                                <label for="email" class="block text-[#e0e0e0] mb-2 font-bold">EMAIL</label>
                                <input type="email" id="email" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;">
                            </div>
                        </div>
                        <div>
                            <label for="subject" class="block text-[#e0e0e0] mb-2 font-bold">SUBJECT</label>
                            <input type="text" id="subject" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;">
                        </div>
                        <div>
                            <label for="message" class="block text-[#e0e0e0] mb-2 font-bold">MESSAGE</label>
                            <textarea id="message" rows="4" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;"></textarea>
                        </div>
                        <button type="submit" class="px-6 py-3 bg-[#4a8fe7] hover:bg-[#3a7dd7] text-[#e0e0e0] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#2050a3] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;">
                            SEND MESSAGE
                        </button>
                    </form>
                </div>
            </div>
    </main>

    <custom-footer></custom-footer>
    <script src="components/footer.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>