-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (174 loc) · 7.83 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Portfolio" />
<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=Poppins:wght@400;500;700&display=swap" rel="stylesheet" />
<script src="https://kit.fontawesome.com/fa62c117c7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<title>Sydney Tsai</title>
</head>
<body class="light" id="top">
<header class="header center">
<h3>
<a class="link">ST</a>
</h3>
<nav class="nav center">
<ul class="nav__list center">
<li class="nav__list-item">
<a class="link link--nav" href="#projects">Projects</a>
</li>
<li class="nav__list-item">
<a class="link link--nav" href="#skills">Skills</a>
</li>
<li class="nav__list-item">
<a class="link link--nav" href="#contact">Contact</a>
</li>
</ul>
<button type="button" aria-label="toggle theme" class="btn btn--icon">
<i id="btn-theme" class="fas fa-moon"></i>
</button>
<button type="button" aria-label="toggle navigation" class="btn btn--icon nav__hamburger">
<i class="fas fa-bars"></i>
</button>
</nav>
</header>
<main>
<div class="about center">
<h1 class="about__name">Hi, I'm Sydney Tsai</h1>
<h2 class="about__role">Electrical Engineering and Computer Science at UC Berkeley</h2>
<p class="about__desc">I am a student at UC Berkeley studying Electrical Engineering and Computer Science (EECS). I am also pursuing the
Berkeley Certificate in Design Innovation (BCDI) and the SCET Certificate in Entrepreneurship & Technology. I am passionate about becoming
a software engineer, as it allows me to blend my love for problem-solving with my fascination for technology, enabling me to create
innovative solutions that have a positive impact on the world. The endless possibilities for learning and the thrill of turning ideas
into functional software drive my interests toward this dynamic field.
</p>
<div class="about__contact center">
<a href="resume.html">
<span class="btn btn--outline">Resume</span>
</a>
<a href="https://github.com/sydneytsai" aria-label="github" class="link link--icon">
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a href="https://linkedin.com/in/sydneyctsai/" aria-label="linkedin" class="link link--icon">
<i aria-hidden="true" class="fab fa-linkedin"></i>
</a>
</div>
</div>
<section id="projects" class="section projects">
<h2 class="section__title">Projects</h2>
<div class="projects__grid">
<div class="project">
<h3>Berkeley Mobile</h3>
<p class="project__description">
Berkeley Mobile is a campus resource and information aggregation platform.
</p>
<ul class="project__stack">
<li class="project__stack-item">Swift</li>
<li class="project__stack-item">Firebase</li>
</ul>
<a href="https://github.com" aria-label="source code" class="link link--icon">
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a href="https://octo.asuc.org/projects/berkeleymobile.html" aria-label="live preview" class="link link--icon">
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>
<div class="project">
<h3>Chabot Space and Science Center App</h3>
<p class="project__description">
An app utilized by thousands for museum goers of the Chabot Space and Science Center in Oakland, California.
</p>
<ul class="project__stack">
<li class="project__stack-item">TypeScript</li>
<li class="project__stack-item">JavaScript</li>
<li class="project__stack-item">React Native</li>
</ul>
<a href="https://github.com/Codify-Club-Berkeley/cssc-mobile-app" aria-label="source code" class="link link--icon">
<i aria-hidden="true" class="fab fa-github"></i>
</a>
<a href="https://chabotspace.org/" aria-label="live preview" class="link link--icon">
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>
<div class="project">
<h3>PintOS</h3>
<p class="project__description">
An educational operating system for the x86 architecture. The OS supports multithreading, loading and running user programs, and a file system.
</p>
<ul class="project__stack">
<li class="project__stack-item">C</li>
</ul>
</div>
<div class="project">
<h3>Gitlet</h3>
<p class="project__description">
My own implementation of the popular version-control system Git. Functionality includes saving contents of directories, restoring commits, viewing history, maintaining branches, and merging changes.
</p>
<ul class="project__stack">
<li class="project__stack-item">Java</li>
</ul>
<a href="https://github.com/sydneytsai/CS-61B/tree/main/proj3" aria-label="source code" class="link link--icon">
<i aria-hidden="true" class="fab fa-github"></i>
</a>
</div>
<div class="project">
<h3>SWiiFT</h3>
<p class="project__description">
A social media travel app that connects travelers and locals, creating an international community.
</p>
<ul class="project__stack">
<li class="project__stack-item">React Native</li>
</ul>
<a href="https://www.swiiftapp.com/" aria-label="live preview" class="link link--icon">
<i aria-hidden="true" class="fas fa-external-link-alt"></i>
</a>
</div>
</div>
</section>
<section class="section skills" id="skills">
<h2 class="section__title">Skills</h2>
<h6 class="section__title">Technical</h6>
<ul class="skills__list">
<li class="skills__list-item btn btn--plain">Python</li>
<li class="skills__list-item btn btn--plain">Java</li>
<li class="skills__list-item btn btn--plain">C</li>
<li class="skills__list-item btn btn--plain">MATLAB</li>
<li class="skills__list-item btn btn--plain">HTML</li>
<li class="skills__list-item btn btn--plain">Javascript</li>
<li class="skills__list-item btn btn--plain">CSS</li>
<li class="skills__list-item btn btn--plain">React/React Native</li>
<li class="skills__list-item btn btn--plain">Swift</li>
<li class="skills__list-item btn btn--plain">Git</li>
<li class="skills__list-item btn btn--plain">GoLang</li>
</ul>
<h6 class="section__title">General</h6>
<ul class="skills__list">
<li class="skills__list-item btn btn--plain">Agile Methodology</li>
</ul>
</section>
<section class="section contact center" id="contact">
<h2 class="section__title">Contact</h2>
<a href="mailto:[email protected]">
<span class="btn btn--outline">Email me</span>
</a>
</section>
</main>
<footer class="footer">
<a href="/" class="link footer__link">
Created By Sydney Tsai
</a>
</footer>
<div class="scroll-container">
<div class="scroll-top">
<a aria-label="Scroll up" href="#top">
<i aria-hidden="true" class="fas fa-arrow-up"></i>
</a>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>