Hugging Face's logo

Spaces:
NGOC1712
/
API_portfolio
Sleeping

App Files Community
NGOC1712 commited on
Commit
c194a25
·
verified ·
1 Parent(s): cd318ec

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +338 -0
templates/index.html ADDED
@@ -0,0 +1,338 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>{{ data.name }} - Portfolio</title>
8
+ <link rel="stylesheet" href="/static/style.css?v=2.2">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
13
+ </head>
14
+ <body>
15
+ <!-- Navigation -->
16
+ <nav class="navbar">
17
+ <div class="nav-container">
18
+ <div class="nav-brand">bngoc</div>
19
+ <ul class="nav-menu">
20
+ <li><a href="#home" class="nav-link">Home</a></li>
21
+ <li><a href="#about" class="nav-link">About</a></li>
22
+ <li><a href="#skills" class="nav-link">Skills</a></li>
23
+ <li><a href="#experience" class="nav-link">Experience</a></li>
24
+ <li><a href="#projects" class="nav-link">Projects</a></li>
25
+ <li><a href="#contact" class="nav-link">Contact</a></li>
26
+ </ul>
27
+ <div class="hamburger">
28
+ <span></span>
29
+ <span></span>
30
+ <span></span>
31
+ </div>
32
+ </div>
33
+ </nav>
34
+
35
+ <!-- Hero Section -->
36
+ <section id="home" class="hero">
37
+ <div class="hero-content">
38
+ <div class="typing-container">
39
+ <div id="streaming-text" class="streaming-text"></div>
40
+ <span class="cursor">|</span>
41
+ </div>
42
+ <h2 class="hero-title fade-in-element">{{ data.title }}</h2>
43
+ <div class="hero-buttons fade-in-element">
44
+ <a href="#projects" class="btn btn-primary">View Projects</a>
45
+ <a href="#contact" class="btn btn-outline">Get In Touch</a>
46
+ </div>
47
+ <div class="social-links fade-in-element">
48
+ <a href="{{ data.github }}" target="_blank"><i class="fab fa-github"></i></a>
49
+ <a href="{{ data.huggingface }}" target="_blank"><i class="fas fa-robot"></i></a>
50
+ <a href="mailto:{{ data.email }}"><i class="fas fa-envelope"></i></a>
51
+ </div>
52
+ </div>
53
+ <div class="hero-animation">
54
+ <div class="floating-shapes">
55
+ <div class="shape"></div>
56
+ <div class="shape"></div>
57
+ <div class="shape"></div>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <!-- About Section -->
63
+ <section id="about" class="about">
64
+ <div class="about-background">
65
+ <img src="/static/more_img/a2.png" alt="AI Team Collaboration" class="about-bg-image">
66
+ </div>
67
+ <div class="container">
68
+ <h2 class="section-title">About Me</h2>
69
+ <div class="about-content">
70
+ <div class="about-profile">
71
+ <div class="profile-image">
72
+ <img src="/static/image/image.png" alt="{{ data.name }}" class="profile-photo">
73
+ <div class="profile-overlay">
74
+ <i class="fas fa-user"></i>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ <div class="about-info">
79
+ <div class="about-text">
80
+ <p>{{ data.about }}</p>
81
+ <div class="about-highlights">
82
+ <div class="highlight-item">
83
+ <i class="fas fa-graduation-cap"></i>
84
+ <span>Continuous learner passionate about AI/ML</span>
85
+ </div>
86
+ <div class="highlight-item">
87
+ <i class="fas fa-rocket"></i>
88
+ <span>Building innovative solutions with cutting-edge tech</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+ <div class="about-stats">
93
+ <div class="stat-card">
94
+ <i class="fas fa-code"></i>
95
+ <h3>2</h3>
96
+ <p>Years Experience</p>
97
+ </div>
98
+ <div class="stat-card">
99
+ <i class="fas fa-project-diagram"></i>
100
+ <h3>10+</h3>
101
+ <p>Projects Completed</p>
102
+ </div>
103
+ <div class="stat-card">
104
+ <i class="fas fa-brain"></i>
105
+ <h3>5+</h3>
106
+ <p>AI Models Deployed</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Skills Section -->
115
+ <section id="skills" class="skills">
116
+ <div class="container">
117
+ <h2 class="section-title">Tech Stack & Skills</h2>
118
+ <div class="tech-stack-grid">
119
+ <div class="tech-category">
120
+ <h3><i class="fas fa-brain"></i> AI Engines</h3>
121
+ <div class="tech-icons">
122
+ {% for tech in data.tech_stack.ai_engines %}
123
+ <div class="tech-icon" data-skill="{{ tech.level }}">
124
+ <div class="icon-container">
125
+ {% if tech.icon == "custom-icon" %}
126
+ <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon">
127
+ {% else %}
128
+ <i class="{{ tech.icon }}"></i>
129
+ {% endif %}
130
+ <span class="tech-name">{{ tech.name }}</span>
131
+ </div>
132
+ <div class="skill-circle">
133
+ <svg class="progress-ring" width="100" height="100">
134
+ <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle>
135
+ </svg>
136
+ <span class="percentage">{{ tech.level }}%</span>
137
+ </div>
138
+ </div>
139
+ {% endfor %}
140
+ </div>
141
+ </div>
142
+
143
+ <div class="tech-category">
144
+ <h3><i class="fas fa-code"></i> Programming Languages</h3>
145
+ <div class="tech-icons">
146
+ {% for tech in data.tech_stack.programming_languages %}
147
+ <div class="tech-icon" data-skill="{{ tech.level }}">
148
+ <div class="icon-container">
149
+ {% if tech.icon == "custom-icon" %}
150
+ <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon">
151
+ {% else %}
152
+ <i class="{{ tech.icon }}"></i>
153
+ {% endif %}
154
+ <span class="tech-name">{{ tech.name }}</span>
155
+ </div>
156
+ <div class="skill-circle">
157
+ <svg class="progress-ring" width="100" height="100">
158
+ <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle>
159
+ </svg>
160
+ <span class="percentage">{{ tech.level }}%</span>
161
+ </div>
162
+ </div>
163
+ {% endfor %}
164
+ </div>
165
+ </div>
166
+
167
+ <div class="tech-category">
168
+ <h3><i class="fas fa-database"></i> Databases</h3>
169
+ <div class="tech-icons">
170
+ {% for tech in data.tech_stack.databases %}
171
+ <div class="tech-icon" data-skill="{{ tech.level }}">
172
+ <div class="icon-container">
173
+ {% if tech.icon == "custom-icon" %}
174
+ <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon">
175
+ {% else %}
176
+ <i class="{{ tech.icon }}"></i>
177
+ {% endif %}
178
+ <span class="tech-name">{{ tech.name }}</span>
179
+ </div>
180
+ <div class="skill-circle">
181
+ <svg class="progress-ring" width="100" height="100">
182
+ <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle>
183
+ </svg>
184
+ <span class="percentage">{{ tech.level }}%</span>
185
+ </div>
186
+ </div>
187
+ {% endfor %}
188
+ </div>
189
+ </div>
190
+
191
+ <div class="tech-category">
192
+ <h3><i class="fas fa-server"></i> DevOps & Tools</h3>
193
+ <div class="tech-icons">
194
+ {% for tech in data.tech_stack.devops_tools %}
195
+ <div class="tech-icon" data-skill="{{ tech.level }}">
196
+ <div class="icon-container">
197
+ {% if tech.icon == "custom-icon" %}
198
+ <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon">
199
+ {% else %}
200
+ <i class="{{ tech.icon }}"></i>
201
+ {% endif %}
202
+ <span class="tech-name">{{ tech.name }}</span>
203
+ </div>
204
+ <div class="skill-circle">
205
+ <svg class="progress-ring" width="100" height="100">
206
+ <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle>
207
+ </svg>
208
+ <span class="percentage">{{ tech.level }}%</span>
209
+ </div>
210
+ </div>
211
+ {% endfor %}
212
+ </div>
213
+ </div>
214
+ <div class="tech-category">
215
+ <h3><i class="fas fa-layer-group"></i> Frameworks</h3>
216
+ <div class="tech-icons">
217
+ {% for tech in data.tech_stack.frameworks %}
218
+ <div class="tech-icon" data-skill="{{ tech.level }}">
219
+ <div class="icon-container">
220
+ {% if tech.icon == "custom-icon" %}
221
+ <img src="{{ tech.icon_src }}" alt="{{ tech.name }}" class="custom-tech-icon">
222
+ {% else %}
223
+ <i class="{{ tech.icon }}"></i>
224
+ {% endif %}
225
+ <span class="tech-name">{{ tech.name }}</span>
226
+ </div>
227
+ <div class="skill-circle">
228
+ <svg class="progress-ring" width="100" height="100">
229
+ <circle class="progress-ring-circle" cx="50" cy="50" r="40"></circle>
230
+ </svg>
231
+ <span class="percentage">{{ tech.level }}%</span>
232
+ </div>
233
+ </div>
234
+ {% endfor %}
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Experience Section -->
242
+ <section id="experience" class="experience">
243
+ <div class="experience-background">
244
+ <img src="/static/more_img/a3.png" alt="AI Brain Technology" class="experience-bg-image">
245
+ </div>
246
+ <div class="container">
247
+ <h2 class="section-title">Experience</h2>
248
+ <div class="timeline">
249
+ {% for exp in data.experience %}
250
+ <div class="timeline-item">
251
+ <div class="timeline-marker"></div>
252
+ <div class="timeline-content">
253
+ <h3>{{ exp.title }}</h3>
254
+ <h4>{{ exp.company }}</h4>
255
+ <span class="period">{{ exp.period }}</span>
256
+ <ul>
257
+ {% for item in exp.description %}
258
+ <li>{{ item }}</li>
259
+ {% endfor %}
260
+ </ul>
261
+ </div>
262
+ </div>
263
+ {% endfor %}
264
+ </div>
265
+ </div>
266
+ </section>
267
+
268
+ <!-- Projects Section -->
269
+ <section id="projects" class="projects">
270
+ <div class="container">
271
+ <h2 class="section-title">Featured Projects</h2>
272
+ <div class="projects-grid">
273
+ {% for project in data.projects %}
274
+ <div class="project-card">
275
+ <div class="project-header">
276
+ <i class="fas fa-folder-open"></i>
277
+ <span class="project-role">{{ project.role }}</span>
278
+ </div>
279
+ <h3>{{ project.name }}</h3>
280
+ <p>{{ project.description }}</p>
281
+ <div class="project-tech">
282
+ {% for tech in project.technologies %}
283
+ <span class="tech-tag">{{ tech }}</span>
284
+ {% endfor %}
285
+ </div>
286
+ <ul class="project-highlights">
287
+ {% for highlight in project.highlights %}
288
+ <li>{{ highlight }}</li>
289
+ {% endfor %}
290
+ </ul>
291
+ </div>
292
+ {% endfor %}
293
+ </div>
294
+ </div>
295
+ </section>
296
+
297
+ <!-- Contact Section -->
298
+ <section id="contact" class="contact">
299
+ <div class="contact-background">
300
+ <img src="/static/more_img/a1.png" alt="AI Technology" class="contact-bg-image">
301
+ </div>
302
+ <div class="container">
303
+ <h2 class="section-title">Get In Touch</h2>
304
+ <div class="contact-content">
305
+ <div class="contact-text">
306
+ <p>I'm always interested in hearing about new opportunities and exciting projects in AI and technology.</p>
307
+ <p>Let's build the future together with innovative solutions!</p>
308
+ </div>
309
+ <div class="contact-info">
310
+ <a href="mailto:{{ data.email }}" class="contact-item">
311
+ <i class="fas fa-envelope"></i>
312
+ <span>{{ data.email }}</span>
313
+ </a>
314
+ <a href="{{ data.github }}" target="_blank" class="contact-item">
315
+ <i class="fab fa-github"></i>
316
+ <span>GitHub</span>
317
+ </a>
318
+ <a href="{{ data.huggingface }}" target="_blank" class="contact-item">
319
+ <i class="fas fa-robot"></i>
320
+ <span>Hugging Face</span>
321
+ </a>
322
+ <div class="contact-item">
323
+ <i class="fas fa-map-marker-alt"></i>
324
+ <span>{{ data.location }}</span>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </section>
330
+
331
+ <!-- Footer -->
332
+ <footer class="footer">
333
+ <p>&copy; 2025 {{ data.name }}. Built with FastAPI & ❤️</p>
334
+ </footer>
335
+
336
+ <script src="/static/script.js"></script>
337
+ </body>
338
+ </html>