-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
262 lines (243 loc) · 15.4 KB
/
index.html
File metadata and controls
262 lines (243 loc) · 15.4 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
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jiaping Huang - Developer Portfolio</title>
<link href="./assets/css/output.css" rel="stylesheet">
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-sans bg-paper text-text-light">
<!-- Header -->
<header class="sticky top-0 z-50 bg-paper-light shadow-sm">
<nav class="max-w-6xl mx-auto flex flex-col p-6 md:p-10">
<div class="flex justify-between items-center md:hidden">
<a class="text-xl font-semibold text-lavender" href="index.html">Hi!</a>
<button id="menu-btn" aria-label="Toggle menu" aria-expanded="false" class="flex flex-col space-y-1">
<span class="block w-6 h-[3px] bg-lavender-light transition-transform duration-300"></span>
<span class="block w-6 h-[3px] bg-lavender transition-transform duration-300"></span>
<span class="block w-6 h-[3px] bg-lavender transition-transform duration-300"></span>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden mt-2 bg-paper-light border border-lavender/20 text-text-light px-6 py-4 rounded-lg transition-all duration-300">
<a href="index.html" class="block py-2 hover:text-lavender">Home</a>
<a href="projects.html" class="block py-2 hover:text-lavender">Projects</a>
<a href="resume.html" class="block py-2 hover:text-lavender">Resume</a>
</div>
<!-- Desktop Menu -->
<ul class="hidden md:flex justify-center gap-8 text-lg font-semibold text-text-light mt-2">
<li><a class="hover:text-lavender transition-colors" href="index.html">Home</a></li>
<li><a class="hover:text-lavender transition-colors" href="projects.html">Projects</a></li>
<li><a class="hover:text-lavender transition-colors" href="resume.html">Resume</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<main class="px-6 md:px-12 lg:px-24 py-12 md:py-20 max-w-5xl mx-auto">
<!-- Hero Section -->
<section class="text-center mb-20">
<h1 class="text-4xl md:text-5xl font-bold text-text-light mb-6">
<span class="text-lavender">Jiaping Huang</span>
<br>
<br>
<p class="text-lg text-text-light leading-relaxed max-w-3xl mx-auto mb-10">
Software Developer | QA
</p>
</h1>
<p class="text-lg text-text-light leading-relaxed max-w-3xl mx-auto mb-10">
Based in Perth, Western Australia.
I build practical applications using C#, .NET, Python, SQL and REST APIs
</p>
<p class="text-lg text-text-light leading-relaxed max-w-3xl mx-auto mb-10">
Recently completed Certificate IV in Programming and currently seeking opportunities in Software Development or QA / Software Testing roles.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="projects.html"
class="px-6 py-3 bg-lavender text-paper rounded-lg font-semibold hover:bg-lavender-light transition-colors shadow-lg hover:shadow-lavender/20">
View My Projects
</a>
<a href="resume.html"
class="px-6 py-3 border border-lavender text-lavender rounded-lg font-semibold hover:bg-lavender/10 transition-colors">
Download Resume
</a>
</div>
</section>
<!-- About Me -->
<section class="mb-20">
<h2 class="text-3xl font-semibold text-center text-text-light mb-10">About Me</h2>
<div class="bg-paper-dark border border-lavender/10 rounded-xl p-8 max-w-3xl mx-auto">
<ul class="space-y-4 text-text-light">
<li class="flex items-start">
<span class="text-lavender mr-3">•</span>
<span>Building projects using C#, Python, JavaScript, SQL, and modern web technologies</span>
</li>
<li class="flex items-start">
<span class="text-lavender mr-3">•</span>
<span>Strong interest in .NET development, databases, and full-stack applications</span>
</li>
<li class="flex items-start">
<span class="text-lavender mr-3">•</span>
<span>Experience with Git workflows, version control, CI/CD, and collaborative development</span>
</li>
<li class="flex items-start">
<span class="text-lavender mr-3">•</span>
<span>Completed units in programming, databases, testing, mobile development, and web technologies</span>
</li>
<li class="flex items-start">
<span class="text-lavender mr-3">•</span>
<span>Currently exploring .NET MAUI, REST APIs, and advanced software architecture</span>
</li>
</ul>
</div>
</section>
<!-- Skills Section -->
<section class="mb-20">
<h2 class="text-3xl font-semibold text-center text-text-light mb-10">Skills & Technologies</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Programming Languages -->
<div class="bg-paper-dark border border-lavender/10 rounded-xl p-6">
<h3 class="text-xl font-semibold text-lavender mb-4">Programming Languages</h3>
<ul class="space-y-2">
<li class="text-text-light">C# (.NET)</li>
<li class="text-text-light">Python</li>
<li class="text-text-light">JavaScript</li>
<li class="text-text-light">HTML & CSS</li>
</ul>
</div>
<!-- Frameworks & Tools -->
<div class="bg-paper-dark border border-seafoam/10 rounded-xl p-6">
<h3 class="text-xl font-semibold text-seafoam-dark mb-4">Frameworks & Tools</h3>
<ul class="space-y-2">
<li class="text-text-light">.NET / .NET MAUI</li>
<li class="text-text-light">ASP.NET Core MVC</li>
<li class="text-text-light">WPF (Windows Presentation Foundation)</li>
<li class="text-text-light">TailwindCSS</li>
<li class="text-text-light">Git, GitHub, CI/CD</li>
</ul>
</div>
<!-- Development Practices -->
<div class="bg-paper-dark border border-blush/10 rounded-xl p-6">
<h3 class="text-xl font-semibold text-blush-dark mb-4">Development Practices</h3>
<ul class="space-y-2">
<li class="text-text-light">Object-Oriented Programming</li>
<li class="text-text-light">Unit Testing (MSTest, Python unittest)</li>
<li class="text-text-light">Version Control & Git Workflows</li>
<li class="text-text-light">Code Refactoring</li>
<li class="text-text-light">REST API Integration</li>
</ul>
</div>
<!-- Database & Other -->
<div class="bg-paper-dark border border-lavender/20 rounded-xl p-6">
<h3 class="text-xl font-semibold text-lavender mb-4">Database & Other</h3>
<ul class="space-y-2">
<li class="text-text-light">MySQL / SQL server</li>
<li class="text-text-light">Relational Database Design</li>
<li class="text-text-light">Data-Driven Applications</li>
<li class="text-text-light">Visual Studio / VS Code</li>
<li class="text-text-light">PyCharm IDE</li>
</ul>
</div>
</div>
</section>
<!-- Featured Projects -->
<section class="mb-20">
<h2 class="text-3xl font-semibold text-center text-text-light mb-10">Featured Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Project 1 -->
<div class="bg-paper-dark border border-lavender/20 rounded-xl p-6 hover:border-lavender/40 hover:shadow-lg transition-all">
<h3 class="text-xl font-semibold text-text-light mb-3">Contractor Management System (C# WPF)</h3>
<p class="text-text-light text-sm mb-4">
A WPF desktop application for managing contractors with database integration, built using C# .NET and SQL.
</p>
<div class="mb-6">
<span class="inline-block px-3 py-1 bg-lavender/10 text-lavender text-xs font-semibold rounded-full mr-2">C#</span>
<span class="inline-block px-3 py-1 bg-lavender/10 text-lavender text-xs font-semibold rounded-full mr-2">.NET</span>
<span class="inline-block px-3 py-1 bg-lavender/10 text-lavender text-xs font-semibold rounded-full">WPF</span>
<span class="inline-block px-3 py-1 bg-lavender/10 text-lavender text-xs font-semibold rounded-full">SQL</span>
</div>
<a href="projects.html#contractor-tracker"
class="block w-full text-center px-4 py-2 bg-lavender text-paper rounded-lg font-semibold hover:bg-lavender-light transition-colors">
View Project
</a>
</div>
<!-- Project 2 -->
<div class="bg-paper-dark border border-seafoam/20 rounded-xl p-6 hover:border-seafoam/40 hover:shadow-lg transition-all">
<h3 class="text-xl font-semibold text-text-light mb-3">Smart Car Park System (Python OOP)</h3>
<p class="text-text-light text-sm mb-4">
Python OOP project focusing on data structures and object-oriented design for parking management.
</p>
<div class="mb-6">
<span class="inline-block px-3 py-1 bg-seafoam/10 text-seafoam-dark text-xs font-semibold rounded-full mr-2">Python</span>
<span class="inline-block px-3 py-1 bg-seafoam/10 text-seafoam-dark text-xs font-semibold rounded-full mr-2">OOP</span>
<span class="inline-block px-3 py-1 bg-seafoam/10 text-seafoam-dark text-xs font-semibold rounded-full">Unit Testing</span>
</div>
<a href="projects.html#car-park-system"
class="block w-full text-center px-4 py-2 bg-seafoam-dark text-paper rounded-lg font-semibold hover:bg-seafoam transition-colors">
View Project
</a>
</div>
<!-- Project 3 -->
<div class="bg-paper-dark border border-blush/20 rounded-xl p-6 hover:border-blush/40 hover:shadow-lg transition-all">
<h3 class="text-xl font-semibold text-text-light mb-3">Movie Search App (.NET MAUI)</h3>
<p class="text-text-light text-sm mb-4">
Mobile application using .NET MAUI and MVC architecture to search movies via REST API.
</p>
<div class="mb-6">
<span class="inline-block px-3 py-1 bg-blush/10 text-blush-dark text-xs font-semibold rounded-full mr-2">C#</span>
<span class="inline-block px-3 py-1 bg-blush/10 text-blush-dark text-xs font-semibold rounded-full mr-2">.NET MAUI</span>
<span class="inline-block px-3 py-1 bg-blush/10 text-blush-dark text-xs font-semibold rounded-full">REST API</span>
</div>
<a href="projects.html#movie-maui-app"
class="block w-full text-center px-4 py-2 bg-blush-dark text-paper rounded-lg font-semibold hover:bg-blush transition-colors">
View Project
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="mb-5">
<h2 class="text-3xl font-semibold text-center text-text-light mb-10">Get In Touch</h2>
<div class="bg-paper-dark border border-lavender/10 rounded-xl p-8 max-w-2xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 text-center">
<div>
<a href="mailto:[email protected]" class="text-text-light hover:text-lavender transition-colors">
<h3 class="text-lg font-semibold text-lavender mb-1">Email</h3></a>
</div>
<div>
<a href="https://github.com/20055662" class="text-text-light hover:text-lavender transition-colors">
<h3 class="text-lg font-semibold text-lavender mb-1">GitHub</h3></a>
</div>
<div>
<a href="https://www.linkedin.com/in/jiaping-huang/"
class="text-text-light hover:text-lavender transition-colors">
<h3 class="text-lg font-semibold text-lavender mb-2">LinkedIn</h3>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-paper-light border-t border-lavender/10 py-10 mt-10">
<div class="text-center max-w-5xl mx-auto">
<p class="text-text-light font-bold">© 2026 Jiaping Huang. All rights reserved</p>
<div class="flex justify-center gap-6 text-sm mt-4">
<a href="index.html" class="text-text-light hover:text-lavender transition-colors">Home</a>
<a href="projects.html" class="text-text-light hover:text-lavender transition-colors">Projects</a>
<a href="resume.html" class="text-text-light hover:text-lavender transition-colors">Resume</a>
<a href="https://github.com/20055662" class="text-text-light hover:text-lavender transition-colors">GitHub</a>
<a href="mailto:[email protected]" class="text-text-light hover:text-lavender transition-colors">Email</a>
<a href="https://www.linkedin.com/in/jiaping-huang/" class="text-text-light hover:text-lavender transition-colors">LinkedIn</a>
</div>
<p class="mt-6 text-text-light text-sm opacity-80">
Built with <span class="text-lavender">TailwindCSS</span> • Hosted on GitHub Pages
</p>
</div>
</footer>
<script src="./assets/js/menu-btn.js" defer></script>
</body>
</html>