-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
134 lines (117 loc) · 5.35 KB
/
index.html
File metadata and controls
134 lines (117 loc) · 5.35 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
<!DOCTYPE HTML>
<html>
<head>
<title>Winnie Yu Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<div class="inner">
<a href="#" class="image avatar"><img src="images/avatar.jpg" alt="" /></a>
<h1><strong>My name is Winnie</strong>,<br />a Software engineer</h1>
</div>
</header>
<!-- Main -->
<div id="main">
<!-- One -->
<div class="animated-background">
<h1>Welcome to My Portfolio</h1>
<p>Discover my projects and get in touch!</p>
</div>
<section id="one">
<header class="major">
<h2>About Me</h2>
</header>
<p>I'm Winnie — a full-stack software engineer with a background in food science and technology. I blend technical depth with strong communication, shaped by my experience in fast-paced startups and scientific research. I build scalable, user-focused web applications and front-end websites with smooth user experiences. Let’s create solutions that make an impact!</p>
</ul>
</section>
<!-- Two -->
<section id="two">
<h2>Recent Work</h2>
<p>Here are a few projects I've worked on recently. Want to see more? <a href="mailto:winnieyu.pro@gmail.com">Email me</a> or visit my <a href="https://github.com/WinnieYuDev">GitHub</a>.</p>
<div class="row">
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/01.jpg" class="image fit thumb"><img src="images/thumbs/01.jpg" alt="" /></a>
<h3>Car Repair Service Center</h3>
<p>Website made for family owned auto care business</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/02.jpg" class="image fit thumb"><img src="images/thumbs/02.jpg" alt="" /></a>
<h3>Dental Services</h3>
<p>Patient-facing platform with dentist and hygienist services.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/03.jpg" class="image fit thumb"><img src="images/thumbs/03.jpg" alt="" /></a>
<h3>Urban Gardening and Landscaping</h3>
<p>Website for a local urban gardening and landscaping services.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/04.jpg" class="image fit thumb"><img src="images/thumbs/04.jpg" alt="" /></a>
<h3>Personal travel blog</h3>
<p>Online branding for social media presence and blog posts.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/05.jpg" class="image fit thumb"><img src="images/thumbs/05.jpg" alt="" /></a>
<h3>Commercial Renewable Energy and Solar Installation</h3>
<p>Corporate website for renewable energy and solar installation industry.</p>
</article>
<article class="col-6 col-12-xsmall work-item">
<a href="images/fulls/06.jpg" class="image fit thumb"><img src="images/thumbs/06.jpg" alt="" /></a>
<h3>Dairy Farm Business</h3>
<p>Commercial website to sell perishable goods across the country.</p>
</article>
</div>
<ul class="actions">
<li><a href="https://github.com/WinnieYuDev" class="button">Full Portfolio</a></li>
</ul>
</section>
<!-- Three -->
<section id="three">
<h2>Top Skills</h2>
<ul>
<li>→ Programming Languages: JavaScript </li>
<li>→ Front End: React, HTML, CSS/SCSS</li>
<li>→ Back End: Node.js, Express.js, REST APIs</li>
<li>→ Databases: MongoDB</li>
<li>→ DevOps: Git</li>
</ul>
</section>
<!-- Four -->
<section id="four">
<h2>Get In Touch</h2>
<p>If you'd like to get in touch, feel free to reach out via email or connect with me on social media.</p>
<ul class="actions">
<li><a href="mailto:winnieyu.pro@gmail.com" class="button">Contact Me</a></li>
</ul>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://x.com/WinnieYu_SWE" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://github.com/WinnieYuDev" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="https://www.linkedin.com/in/winnie-y-67422b141/" class="icon brands fa-linkedin"><span class="label">LinkedIn</span></a></li>
<li><a href="mailto:winnieyu.pro@gmail.com" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Winnie Yu</li><li>
</ul>
</div>
</footer>
<!-- Back to Top -->
<a href="#" class="back-to-top"><img src="images/backtop.png" alt="Arrow pointing up" /></a>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
<!--
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->