-
Notifications
You must be signed in to change notification settings - Fork 0
/
technical.html
95 lines (82 loc) · 4.38 KB
/
technical.html
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
<!doctype html>
<html lang="en" class="h-full bg-gray-100">
<head>
<meta charset="UTF-8">
<title>vivian xu | portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full">
<div class="min-h-full font-serif">
<nav class="flex justify-center">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<div class="flex items-center">
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href='index.html' class="text-gray-400 hover:bg-gray-400 hover:text-white px-3 py-1 rounded-md text-base font-normal">
home</a>
<a href='about.html' class="text-gray-400 hover:bg-gray-400 hover:text-white px-3 py-1 rounded-md text-base font-normal">
about</a>
<a href='' class="bg-gray-400 text-white hover:bg-gray-400 hover:text-white px-3 py-1 rounded-md text-base font-normal">
technical</a>
<a href='creative.html' class="text-gray-400 hover:bg-gray-400 hover:text-white px-3 py-1 rounded-md text-base font-normal">
creative</a>
<a href='contact.html' class="text-gray-400 hover:bg-gray-400 hover:text-white px-3 py-1 rounded-md text-base font-normal">
contact</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
<p class="pb-6 text-lg text-gray-600 font-medium">technical projects</p>
<div class="leading-loose text-base text-gray-600 font-normal space-y-4">
<li>
<a href='https://exhibition.international' target='_blank' rel='noopener noreferrer' class='font-bold bg-blue-100 underline decoration-wavy decoration-gray-400 hover:bg-blue-200 hover:decoration-gray-500'>
Exhibition</a>
<span class="text-gray-400 italic"> — CSS, Shopify Liquid</span>
<p class='pl-8'>clothing brand e-commerce website customized via Shopify template language files</p>
</li>
<li>
<span class='font-bold'>personal website (2024-04)</span>
<span class="text-gray-400 italic"> — HTML, Tailwind CSS</span>
<p class='pl-8'>you're here right now!</p>
</li>
<li>
<a href='https://cravie.netlify.app' target='_blank' rel='noopener noreferrer' class='font-bold bg-blue-100 underline decoration-wavy decoration-gray-400 hover:bg-blue-200 hover:decoration-gray-500'>
Cravie</a>
<span class="text-gray-400 italic"> — React, Vite, TypeScript, Mantine, HTML, CSS</span>
<p class='pl-8'>web application to help users decide what to eat</p>
</li>
<li>
<span class='font-bold'>Single-Image Haze Removal (2023-03)</span>
<span class="text-gray-400 italic"> — Python, Jupyter Notebook, Git</span>
<p class='pl-8'>implementation of two image haze removal algorithms from research papers</p>
</li>
<li>
<span class='font-bold'>Pixel Generators (2022-11)</span>
<span class="text-gray-400 italic"> — Python, Flask, Docker, Git</span>
<p class='pl-8'>microservices to generate pixelated images on a server in real time</p>
</li>
<br />
<a href='https://drive.google.com/file/d/1XcpoeeYm39DH2OgoBZS8mFYWPybDEjIN/view?usp=sharing' target='_blank'
rel='noopener noreferrer'
class='text-violet-400 hover:text-violet-500 pl-4 underline underline-offset-4 decoration-dotted rounded-md text-md font-bold'>
my
resume</a>
</div>
</main>
<nav class="flex justify-center flex-center pt-8">
<div class="hidden md:block">
<div class="flex items-baseline space-x-6">
<a href='https://github.com/vxu0' target='_blank' rel='noopener noreferrer' class='text-gray-400 underline hover:text-gray-500 rounded-md text-sm font-normal'>
github</a>
<a href='https://www.linkedin.com/in/vivianwxu/' target='_blank' rel='noopener noreferrer' class='text-gray-400 underline hover:text-gray-500 rounded-md text-sm font-normal'>
linkedin</a>
</div>
</div>
</nav>
</div>
</body>
</html>