Hugging Face's logo

Spaces:
GXSNetwork
/
quantos
Running

App Files Community
CodeSerenity commited on
Commit
ecac693
·
verified ·
1 Parent(s): e3e4f22

buatkan saya website portfolio terkeren sepanjang masa design masa depan dengan adanya 3d model rapih dan responsives

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +288 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Quantumfolio 3000
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: QuantumFolio 3000 🚀
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,288 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>QuantumFolio 3D</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
16
+
17
+ body {
18
+ font-family: 'Orbitron', sans-serif;
19
+ overflow-x: hidden;
20
+ }
21
+
22
+ #vanta-bg {
23
+ position: fixed;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ z-index: -1;
29
+ }
30
+
31
+ .card-3d {
32
+ transform-style: preserve-3d;
33
+ transition: all 0.5s ease;
34
+ }
35
+ .card-3d:hover {
36
+ transform: rotateY(10deg) rotateX(5deg) translateY(-10px) scale(1.03);
37
+ box-shadow: 0 25px 50px rgba(0, 255, 255, 0.3);
38
+ }
39
+
40
+ #3d-model {
41
+ transition: all 0.5s ease;
42
+ }
43
+
44
+ #3d-model:hover {
45
+ filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
46
+ }
47
+ .neon-text {
48
+ text-shadow: 0 0 10px rgba(0, 255, 255, 0.7),
49
+ 0 0 20px rgba(0, 255, 255, 0.5),
50
+ 0 0 30px rgba(0, 255, 255, 0.3);
51
+ }
52
+
53
+ .glow-hover:hover {
54
+ filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7));
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-900 text-cyan-100">
59
+ <div id="vanta-bg"></div>
60
+
61
+ <!-- Floating Navbar -->
62
+ <nav class="fixed top-0 left-0 right-0 z-50 backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-800 border-b border-cyan-500 border-opacity-20">
63
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
64
+ <div class="text-2xl font-bold neon-text">
65
+ <span class="text-cyan-400">Q</span>uantum<span class="text-cyan-400">F</span>olio
66
+ </div>
67
+ <div class="hidden md:flex space-x-8">
68
+ <a href="#home" class="hover:text-cyan-400 transition duration-300">Home</a>
69
+ <a href="#projects" class="hover:text-cyan-400 transition duration-300">Projects</a>
70
+ <a href="#skills" class="hover:text-cyan-400 transition duration-300">Skills</a>
71
+ <a href="#about" class="hover:text-cyan-400 transition duration-300">About</a>
72
+ <a href="#contact" class="hover:text-cyan-400 transition duration-300">Contact</a>
73
+ </div>
74
+ <div class="md:hidden">
75
+ <i data-feather="menu"></i>
76
+ </div>
77
+ </div>
78
+ </nav>
79
+
80
+ <!-- Hero Section -->
81
+ <section id="home" class="min-h-screen flex items-center justify-center pt-20">
82
+ <div class="container mx-auto px-6 py-16 flex flex-col md:flex-row items-center">
83
+ <div class="md:w-1/2 mb-10 md:mb-0">
84
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 neon-text">
85
+ Hi, I'm <span class="text-cyan-400">Alex</span>
86
+ </h1>
87
+ <h2 class="text-2xl md:text-3xl mb-8 text-cyan-300">
88
+ Quantum UI/UX Designer & 3D Developer
89
+ </h2>
90
+ <div class="flex space-x-4">
91
+ <a href="#projects" class="px-8 py-3 bg-cyan-600 hover:bg-cyan-700 rounded-full font-bold transition duration-300 glow-hover">
92
+ View Work
93
+ </a>
94
+ <a href="#contact" class="px-8 py-3 border-2 border-cyan-400 hover:bg-cyan-900 rounded-full font-bold transition duration-300 glow-hover">
95
+ Contact Me
96
+ </a>
97
+ </div>
98
+ </div>
99
+ <div class="md:w-1/2 relative">
100
+ <!-- Interactive 3D Model -->
101
+ <div class="w-full h-96 bg-transparent flex items-center justify-center">
102
+ <canvas id="3d-model" class="w-full h-full"></canvas>
103
+ </div>
104
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
105
+ <script>
106
+ document.addEventListener('DOMContentLoaded', () => {
107
+ // Scene setup
108
+ const scene = new THREE.Scene();
109
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
110
+ const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('3d-model'), alpha: true });
111
+ renderer.setSize(document.querySelector('#3d-model').parentElement.clientWidth, document.querySelector('#3d-model').parentElement.clientHeight);
112
+
113
+ // Lighting
114
+ const ambientLight = new THREE.AmbientLight(0x00ffff, 0.5);
115
+ scene.add(ambientLight);
116
+
117
+ const directionalLight = new THREE.DirectionalLight(0x00ffff, 0.8);
118
+ directionalLight.position.set(1, 1, 1);
119
+ scene.add(directionalLight);
120
+
121
+ const pointLight = new THREE.PointLight(0x00ffff, 1, 100);
122
+ pointLight.position.set(5, 5, 5);
123
+ scene.add(pointLight);
124
+
125
+ // Model loader
126
+ const loader = new THREE.GLTFLoader();
127
+ let model;
128
+
129
+ loader.load(
130
+ 'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/models/gltf/LittlestTokyo.glb',
131
+ (gltf) => {
132
+ model = gltf.scene;
133
+ model.scale.set(0.5, 0.5, 0.5);
134
+ model.position.y = -1;
135
+ scene.add(model);
136
+ },
137
+ undefined,
138
+ (error) => {
139
+ console.error('Error loading 3D model:', error);
140
+ // Fallback sphere
141
+ const geometry = new THREE.SphereGeometry(1, 32, 32);
142
+ const material = new THREE.MeshPhongMaterial({
143
+ color: 0x00ffff,
144
+ transparent: true,
145
+ opacity: 0.8,
146
+ shininess: 100
147
+ });
148
+ model = new THREE.Mesh(geometry, material);
149
+ scene.add(model);
150
+ }
151
+ );
152
+
153
+ camera.position.z = 5;
154
+
155
+ // Animation loop
156
+ function animate() {
157
+ requestAnimationFrame(animate);
158
+ if (model) {
159
+ model.rotation.y += 0.005;
160
+ }
161
+ renderer.render(scene, camera);
162
+ }
163
+
164
+ animate();
165
+
166
+ // Responsive resize
167
+ window.addEventListener('resize', () => {
168
+ camera.aspect = document.querySelector('#3d-model').parentElement.clientWidth / document.querySelector('#3d-model').parentElement.clientHeight;
169
+ camera.updateProjectionMatrix();
170
+ renderer.setSize(document.querySelector('#3d-model').parentElement.clientWidth, document.querySelector('#3d-model').parentElement.clientHeight);
171
+ });
172
+ });
173
+ </script>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Projects Section -->
179
+ <section id="projects" class="py-20 bg-gray-800 bg-opacity-50">
180
+ <div class="container mx-auto px-6">
181
+ <h2 class="text-3xl font-bold text-center mb-16 neon-text">
182
+ My <span class="text-cyan-400">Quantum</span> Projects
183
+ </h2>
184
+
185
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
186
+ <!-- Project 1 -->
187
+ <div class="card-3d bg-gray-800 rounded-xl overflow-hidden border border-cyan-500 border-opacity-20 transition duration-500 hover:border-opacity-50">
188
+ <div class="relative h-48 bg-gradient-to-br from-cyan-900 to-gray-900 flex items-center justify-center">
189
+ <div class="absolute inset-0 bg-[url('http://static.photos/technology/640x360/1')] bg-cover bg-center opacity-70"></div>
190
+ <div class="relative z-10 text-center p-4">
191
+ <h3 class="text-xl font-bold text-cyan-300">Neural Interface</h3>
192
+ <p class="text-sm text-cyan-100">3D Brain-Computer UI</p>
193
+ </div>
194
+ </div>
195
+ <div class="p-6">
196
+ <p class="text-gray-300 mb-4">A quantum-inspired neural interface that allows users to control devices with their thoughts.</p>
197
+ <div class="flex space-x-2">
198
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">3D</span>
199
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">AI</span>
200
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">React</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Project 2 -->
206
+ <div class="card-3d bg-gray-800 rounded-xl overflow-hidden border border-cyan-500 border-opacity-20 transition duration-500 hover:border-opacity-50">
207
+ <div class="relative h-48 bg-gradient-to-br from-cyan-900 to-gray-900 flex items-center justify-center">
208
+ <div class="absolute inset-0 bg-[url('http://static.photos/minimal/640x360/2')] bg-cover bg-center opacity-70"></div>
209
+ <div class="relative z-10 text-center p-4">
210
+ <h3 class="text-xl font-bold text-cyan-300">HoloSpace</h3>
211
+ <p class="text-sm text-cyan-100">AR Workspace</p>
212
+ </div>
213
+ </div>
214
+ <div class="p-6">
215
+ <p class="text-gray-300 mb-4">An augmented reality workspace that transforms any surface into an interactive 3D display.</p>
216
+ <div class="flex space-x-2">
217
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">AR</span>
218
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">Three.js</span>
219
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">WebXR</span>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Project 3 -->
225
+ <div class="card-3d bg-gray-800 rounded-xl overflow-hidden border border-cyan-500 border-opacity-20 transition duration-500 hover:border-opacity-50">
226
+ <div class="relative h-48 bg-gradient-to-br from-cyan-900 to-gray-900 flex items-center justify-center">
227
+ <div class="absolute inset-0 bg-[url('http://static.photos/abstract/640x360/3')] bg-cover bg-center opacity-70"></div>
228
+ <div class="relative z-10 text-center p-4">
229
+ <h3 class="text-xl font-bold text-cyan-300">Quantum Dashboard</h3>
230
+ <p class="text-sm text-cyan-100">Data Visualization</p>
231
+ </div>
232
+ </div>
233
+ <div class="p-6">
234
+ <p class="text-gray-300 mb-4">A futuristic dashboard that visualizes complex quantum data in an intuitive 3D interface.</p>
235
+ <div class="flex space-x-2">
236
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">D3.js</span>
237
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">WebGL</span>
238
+ <span class="px-2 py-1 bg-cyan-900 text-cyan-300 rounded-full text-xs">API</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Skills Section -->
247
+ <section id="skills" class="py-20">
248
+ <div class="container mx-auto px-6">
249
+ <h2 class="text-3xl font-bold text-center mb-16 neon-text">
250
+ My <span class="text-cyan-400">Quantum</span> Skills
251
+ </h2>
252
+
253
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
254
+ <!-- Skill 1 -->
255
+ <div class="card-3d bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-cyan-500 border-opacity-20 flex flex-col items-center">
256
+ <div class="w-16 h-16 mb-4 bg-cyan-900 rounded-full flex items-center justify-center glow-hover">
257
+ <i data-feather="cpu" class="text-cyan-400"></i>
258
+ </div>
259
+ <h3 class="text-xl font-bold text-cyan-300">3D Modeling</h3>
260
+ <p class="text-sm text-gray-300 text-center mt-2">Blender, Three.js, WebGL</p>
261
+ </div>
262
+
263
+ <!-- Skill 2 -->
264
+ <div class="card-3d bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-cyan-500 border-opacity-20 flex flex-col items-center">
265
+ <div class="w-16 h-16 mb-4 bg-cyan-900 rounded-full flex items-center justify-center glow-hover">
266
+ <i data-feather="code" class="text-cyan-400"></i>
267
+ </div>
268
+ <h3 class="text-xl font-bold text-cyan-300">Web Dev</h3>
269
+ <p class="text-sm text-gray-300 text-center mt-2">React, Vue, Node.js</p>
270
+ </div>
271
+
272
+ <!-- Skill 3 -->
273
+ <div class="card-3d bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-cyan-500 border-opacity-20 flex flex-col items-center">
274
+ <div class="w-16 h-16 mb-4 bg-cyan-900 rounded-full flex items-center justify-center glow-hover">
275
+ <i data-feather="eye" class="text-cyan-400"></i>
276
+ </div>
277
+ <h3 class="text-xl font-bold text-cyan-300">UI/UX</h3>
278
+ <p class="text-sm text-gray-300 text-center mt-2">Figma, Adobe XD, Framer</p>
279
+ </div>
280
+
281
+ <!-- Skill 4 -->
282
+ <div class="card-3d bg-gray-800 bg-opacity-50 rounded-xl p-6 border border-cyan-500 border-opacity-20 flex flex-col items-center">
283
+ <div class="w-16 h-16 mb-4 bg-cyan-900 rounded-full flex items-center justify-center glow-hover">
284
+ <i data-feather="globe" class="text-cyan-400"></i>
285
+ </div>
286
+ <h3 class="text-xl
287
+ </body>
288
+ </html>