-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
187 lines (180 loc) · 7.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio</title>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./all.min.css" />
</head>
<body>
<nav>
<h2 id="logo">Jerry Shi</h2>
<ul class="navigation-items">
<li class="navigation-item"><a href="#about-me">About Me</a></li>
<li class="navigation-item"><a href="#portfolio">Portfolio</a></li>
<li class="navigation-item"><a href="#current-projects">Current Projects</a></li>
<li class="navigation-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="about-me">
<div class="about-me-container">
<div class="about-me-text-container">
<h2>About Me</h2>
<p>
Hi! I'm Jerry and I'm a second degree Computer Science student.
I completed a bachelor's of economics at the University of Chicago
and am currently pursuing a second bachelor's in computer science
online at Oregon State University.
</p>
<p>
I am passionate about applying technology to environmental problems, including
reducing food waste and increasing use of secondhand clothing.
</p>
<p>
In my free time I like to take photographs and listen to k-pop. My favorite
k-pop groups at the moment are aespa, TWICE, and (G)-IDLE.
</p>
<p>
Fun fact! I've been programing for
<span id="time-container">0</span> seconds!
</p>
</div>
<img
src="image.jpg"
alt="A photo of me"
class="portrait"
/>
</div>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<details class="project">
<summary class="project-title">
<h3>Creatorverse</h3>
</summary>
<img
src="walkthrough - creatorverse.gif"
alt="GIF showing walkthrough of creatorverse"
class="project-image"
/>
<p><a href="https://github.com/jerrashi/creatorverse">Repo link</a></p>
<p class="project-description">
A CRUD app for you to keep track of your favorite creators. Built using Supabase, Express, React, and
Node.js. Practiced using React Router and learned how to use Supabase, a backend as a service, for API calls.
</p>
<div id="skills-container">
<i class="fab fa-html5" alt="HTML 5"></i>
<i class="fab fa-css3-alt" alt = "CSS3"></i>
<i class="fab fa-js" alt = "Javascript"></i>
<i class="fab fa-react" alt = "React"></i>
<i class="fab fa-node" alt = "node.js"></i>
<i class="fab fa-npm" alt = "npm"></i>
<i class="fab fa-github" alt = "github"></i>
</div>
</details>
<details class="project">
<summary class="project-title">
<h3>Schelling's Model of Housing Segregation</h3>
</summary>
<img
src="walkthrough - schelling.gif"
alt="GIF showing individual movement across time in Schellings Model"
class="project-image"
/>
<p><a href="https://github.com/jerrashi/schelling_simulation">Repo link</a></p>
<p class="project-description">
One of the first models in the social sciences to show how individual agent choices and weak preferences for
homogeneity can lead to segregation. Built using HTML, CSS, and Javascript. Practiced using HTML forms and
manipulating the DOM with Javascript.
</p>
<div id="skills-container">
<i class="fab fa-html5" alt="HTML 5"></i>
<i class="fab fa-css3-alt" alt = "CSS3"></i>
<i class="fab fa-js" alt = "Javascript"></i>
<i class="fab fa-github" alt = "github"></i>
</div>
</details>
<details class="project">
<summary class="project-title">
<h3>Hello World - Android</h3>
</summary>
<img
src="walkthrough - android.gif"
alt="GIF showing walkthrough of Hello World app"
class="project-image"
/>
<p><a href="https://github.com/jerrashi/Android-Hello-World">Repo link</a></p>
<p class="project-description">
A simple "Hello World" app built with Android Studio using Kotlin to explore android. Practiced using Android
Studio and Kotlin.
</p>
<div id="skills-container">
<i class="fab fa-android" alt="Android"></i>
<i class="fab fa-github" alt = "github"></i>
</div>
</details>
<details class="project">
<summary class="project-title">
<h3>Investments Jupyter Notebook</h3>
</summary>
<img
src="walkthrough - investments notebook.gif"
alt="GIF showing walkthrough of investments notebook"
class="project-image"
/>
<p><a href="https://github.com/jerrashi/Investments-CoLab-Notebooks">Repo link</a></p>
<p class="project-description">
A Jupyter Notebook that uses the pandas and matplotlib libraries to perform mathematical analysis of assets for an
Investments course. Built using Python. Practiced using LaTeX and Python libraries. Learned how to use Google CoLabs,
a cloud-based Jupyter Notebook service.
</p>
<div id="skills-container">
<i class="fab fa-google" alt="Google CoLab"></i>
<i class="fab fa-python" alt = "Python"></i>
</div>
</details>
</section>
<section id="current-projects">
<h2>Current Projects</h2>
<details class="project">
<summary class="project-title">
<h3>Diversity in Silicon Valley</h3>
</summary>
<img
src="https://www.tibco.com/sites/tibco/files/media_entity/2022-01/TreemapChart-01.svg"
alt="An unlabeled example of a treemap"
class="project-image"
/>
<p class="project-description">
I want to create an online visualization of diversity in Silicon Valley with an area map. In particular, I am using a trees structed data source to practice my data structures and React/React Router to cement learnings.
</p>
</details>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Have an interesting project? I would love to hear about it! I have linkedin, github, and email</p>
<div>
<a href="https://www.linkedin.com/in/jerry-lee-shi"><i class="fab fa-linkedin icon"></i></a>
<a href="https://github.com/jerrashi"><i class="fab fa-github icon"></i></a>
<a href="mailto:[email protected]"><i class="fas fa-envelope-square icon"></i></a>
</div>
</section>
</main>
<footer>Made with <span class="heart">♥</span> in RVA</footer>
</body>
<script>
const timeContainer = document.getElementById("time-container");
const BIRTH_DAY = "09-01-2017";
const BIRTH_DAY_DATE = new Date(BIRTH_DAY);
const intlNumberFormatter = new Intl.NumberFormat("en-US");
setInterval(() => {
const now = new Date();
const difference = Math.floor(
(now.getTime() - BIRTH_DAY_DATE.getTime()) / 1000
);
timeContainer.innerText = intlNumberFormatter.format(difference);
}, 1000);
</script>
</html>