-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (141 loc) · 7.45 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanessa Vun</title>
<link rel="stylesheet" href="style.css">
<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=Nunito&family=Raleway&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f568e6fcf4.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="grid-container">
<!-- Header -->
<header>
<nav>
<div class="nav-logo">
<img src="./photos/logo.png" alt="Vanessa Vun logo" width="150" class="logoPic">
</div>
<div class="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Main content -->
<main>
<!-- About me -->
<div id="about">
<div class="about">
<div class="about-text">
<p>In the 8+ years as a Clinical Lab Scientist (CLS) in healthcare/biotech, I notice inefficient
workflows due to manual data entry. I used to be a computer science nerd in middle school
but I veered off to pursue medicine in hopes of becoming a doctor. I became a CLS to help
people in healthcare but I still have interest in automation, robotics, and development.</p>
<p>I re-discovered the drive to learn development after using an automated dashboard and
interacting with robotics at a biotech laboratory. I strive to develop applications and
tools to improve processes with a LEAN mindset in any workspace.</p>
<p>I am an avid rock climber, an enthusiast weightlifter, a casual kpop dancer, and a Korean
drama marathoner during my time for hobbies.</p>
</div>
<div class="about-text">
<div class="picture">
<img src="./photos/vanessa.jpg" alt="Vanessa profile picture" class="vanessaPic">
</div>
</div>
</div>
</div>
<!-- Projects -->
<div id="projects">
<div class="projects">
<div class="project-title">
<h2><i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i> PROJECTS</h2>
</div>
<div class="project-text">
<div class="project">
<div class="screenshot">
<a href="project1.html"><img src="./photos/Feline Charms.png"
alt="Screenshot of Feline Charms company landing page"></a>
</div>
<div class="project-info">
<h3><a href="project1.html">Company Home Page</a></h3>
<p>Feline Charms, a fictional company landing page made for cats by cats.</p>
<p>Skills: HTML, CSS</p>
<p><a href="https://github.com/vanessavun/feline-charms">GitHub</a> / <a href="https://vanessavun.github.io/feline-charms/">Live Website</a></p>
</div>
</div>
<div class="project">
<div class="screenshot">
<a href="project2.html"><img src="./photos/Lady Crush Crew.png"
alt="Screenshot of Lady Crush Crew community group page"></a>
</div>
<div class="project-info">
<h3><a href="project2.html">Community Group</a></h3>
<p>Lady Crush Crew, a real climbing community group for women and non-binary folks.</p>
<p>Skills: HTML, CSS</p>
<p><a href="https://github.com/vanessavun/ladycrushcrew">GitHub</a> / <a href="https://vanessavun.github.io/ladycrushcrew/">Live Website</a></p>
</div>
</div>
<div class="project">
<div class="screenshot">
<a href="project3.html"><img src="./photos/Bad Jokes Generator.png"
alt="Screenshot of Javascript project Bad Jokes Generator"></a>
</div>
<div class="project-info">
<h3><a href="project3.html">Bad Jokes Generator</a></h3>
<p>Skills: HTML, CSS, JavaScript</p>
<p><a href="https://github.com/vanessavun/mixed-messages-project">GitHub</a> / <a href="https://vanessavun.github.io/mixed-messages-project/">Live Website</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Resume -->
<div id="resume">
<div class="resume-title">
<h2><i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i> RESUME</h2>
</div>
<div class="resume-context">
<div class="role">
<h3>Web Developer</h3>
<p>Apr 2022 - </p>
<p>"Full-Stack Engineer" career path through Codecademy and Colt Steele's Web Development
Bootcamp through Udemy.</p>
</div>
<div class="role">
<h3>Lead Clinical Laboratory Scientist at Guardant Health</h3>
<p>Jul 2021 - Mar 2022</p>
<p>Transferable skills: project management, supervisory skills, LEAN six sigma.</p>
</div>
<div class="role">
<h3>Education Coordinator at Myriad Genetics</h3>
<p>Sep 2020 - Jul 2021</p>
<p>Transferable skills: content creation, auditing, education, regulatory compliance.</p>
</div>
</div>
</div>
</main>
</div>
<!-- Footer Contact Information -->
<footer>
<div id="contact">
<div class="contact-info">
<h3>CONTACT</h2>
<ul>
<li>Email: vanessavun at gmail dot com</li>
<li><a href="https://www.linkedin.com/in/vanessavun/">LinkedIn</a></li>
<li><a href="https://github.com/vanessavun">GitHub</a></li>
</ul>
</div>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>