-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
280 lines (229 loc) · 13.6 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="pagestyling.css">
<title>Nicole Pham</title>
<link rel="shortcut icon" type="image/png" href="personal-favicon.png"/>
</head>
<body>
<!-- Top of Page -->
<a id="top"></a>
<section>
<div class="title">
<h1>nicole pham</h1>
<img src="./splitters/undername-line.png" alt="decorative line">
</div>
<div class="nav-bar">
<a href="#about" style="color:#F96E46">about</a>
<a href="#involvements" style="color:#FFAD31">involvements</a>
<a href="#portfolio" style="color:#558C34">portfolio</a>
<a href="#socials" style="color:#00E8FC">socials</a>
</div>
<div class="bottom-of-top">
<img src="./face pictures/top-face-pic.png" alt="profile picture">
<div class="description">
<h3>
hi! i'm pham, an aspiring software engineer currently focusing on web development, specifically front-end UI/UX design. in my work,
i strive to design and develop applications that shape society to be more inclusive
and compassionate towards underrepresented groups.
</h3>
</div>
<a href="#about"><img src="./arrows/orange-arrow.png" alt="arrow button. when clicked, goes to about section" class="arrow-down"></a>
</div>
</section>
<!-- About Section -->
<a id="about"></a>
<section class="container reveal">
<div class="centering-about-image">
<img src="./face pictures/about-face-pic.png" alt="about section profile picture" class="about-image">
</div>
<div class="about-information">
<div class="about-title">
<h1>xin chào các bạn</h1>
<h2>(hello, friends)</h2>
<img src="./splitters/under-about-title-line.png" alt="decorative line" class="about-line">
</div>
<div class="about-description">
<p>i’m pham, and i’m a third year at UC irvine, pursuing a B.S. in Computer Science
with a specialization in information. i am currently active in campus organizations such as ICSSC,
Hack at UCI, and VenusHacks.</p>
<p>through hackathons and self-learning, i have developed an attachment with web development and
design which i aspire to pursue in my future career.</p>
</div>
<div class="about-skills">
<div class="programming-languages">
<h2>technical skills</h2>
<div class="languages">
<img src="./about bubbles/html.png" alt="html" class="html">
<img src="./about bubbles/python.png" alt="python" class="python">
<img src="./about bubbles/css.png" alt="css" class="css">
<img src="./about bubbles/cpp.png" alt="c++" class="cpp">
</div>
</div>
<img src="./splitters/skills-splitter.png" alt="decorative line" class="skills-splitter">
<div class="interests">
<h2>interests</h2>
<div class="interests-images">
<img src="./about bubbles/game.png" alt="game development" id="game">
<img src="./about bubbles/social.png" alt="social good" class="social-good">
<img src="./about bubbles/figma.png" alt="ui/ux design" class="figma">
</div>
</div>
</div>
<div class="bottom-arrow">
<a href="#involvements"><img src="./arrows/yellow-arrow.png" alt="arrow button. when clicked, goes to involvements section" class="involvements-down"></a>
</div>
</div>
</section>
<!-- Involvements Section -->
<a id="involvements"></a>
<section class="container reveal">
<div class="involvements-information">
<div class="involvements-titles">
<h1>involvements</h1>
<h2>(for more information, check out my resume <a href="https://drive.google.com/file/d/1iA8FHLRJ93nNx-HTRi7Z_bD7ewp2hu4r/view?usp=sharing" target="_blank">here</a>)</h2>
<img src="./splitters/involvements-splitter.png" alt="decorative line">
</div>
<div class="involvements">
<div class="meta">
<h3><strong>Meta</strong> - Software Engineer Intern</h3>
<h4>Jun. 2022 - Sep. 2022</h4>
<ul>
<li>Implemented a full-stack web application for the recruiting team utilizing GraphQL, React.js, and PHP</li>
<li>Worked with the team’s product designer to create mock-ups and prototypes for the project using Figma</li>
<li>Utilized version control tools including Mercurial and Jellyfish to collaborate with members on the team</li>
</ul>
</div>
<div class="venushacks">
<h3><a href="https://www.venushacks.com/" target="_blank"><strong>VenusHacks</strong></a> - President, Logistics Organizer</h3>
<h4>Feb. 2021 - May. 2022</h4>
<ul>
<li>Organized VenusHacks 2021 and 2021 (UC Irvine's first women-centric hackathon!)</li>
<li>Led a team of 30 consisting of logistics, corporate, and marketing organizers</li>
<li>Organized the schedule of events and communicated with catering and other external organizations to ensure
everything was on track
</li>
</ul>
</div>
<div class="hackuatci">
<h3><a href="https://hack.ics.uci.edu/" target="_blank"><strong>Hack at UCI</strong></a> - Logistics Co-Director, Logistics Organizer, Logistics Intern</h3>
<h4>Dec. 2020 - Present</h4>
<ul>
<li>Organized HackUCI 2021 and 2022 which each brought together 600+ hackers around the world in a virtual/hybrid
format to design and code projects in under 36 hours</li>
<li>Co-leads the logistics team which manages event venue, catering, workshops, etc.</li>
</ul>
</div>
<div class="icssc">
<h3><a href="https://studentcouncil.ics.uci.edu/" target="_blank"><strong>ICS Student Council</strong></a> - Co-President, Events Chair, Events Committee Member</h3>
<h4>Nov. 2020 - Present</h4>
<ul>
<li>Coordinate and host events for undergraduate students within the UCI School of Information & Computer Sciences</li>
<li>Spearhead the planning of WebJam and Jam for Change, a week-long team competition where teams of students create fully functional web applications with over 50 participants</li>
<li>Supervises the organization of around 40 committee members</li>
</ul>
</div>
</div>
</div>
<div class="centering-involvements-image">
<img src="./face pictures/involvements-face-pic.png" alt="involvements section profile picture" class="involvements-image">
</div>
<div class="bottom-arrow">
<a href="#portfolio"><img src="./arrows/green-arrow.png" alt="arrow button. when clicked, goes to portfolio section" class="portfolio-down"></a>
</div>
</section>
<!-- Portfolio Section -->
<a id="portfolio"></a>
<section class="container reveal">
<div class="portfolio-title">
<div class="words">
<h1>portfolio</h1>
<h2>(projects, graphic design, photography, etc.)</h2>
<img src="./splitters/portfolio-splitter.png" alt="decorative line">
</div>
</div>
<div class="portfolio-projects">
<div class="projects-right">
<div class="project">
<img src="./screenshots/covidulator.png" alt="covidulator screencap">
<h3><a href="https://nmpham2.github.io/covidulator/#/" target="_blank"><strong>Covidulator</strong></a> - 2nd Place Winner of Jam4Change 2021</h3>
<h4>Feb. 2021</h4>
<h5 class="tooltiptext">This project was completed in 5 days and done in collaboration with two of my friends as a submission to ICSSC's Jam4Change,
a webjam dedicated to creating projects which invoke social change. Covidulator utilizes React, HTML, and CSS. What the project does: taking
inspiration from the Carbon Footprint Calculator, the Covidulator allows for users to input their habits during the Covid-19 pandemic in order
to determine how much of an impact they are making on reducing rates, and what they can do to improve based on their results.
</h5>
</div>
<div class="project">
<img src="./screenshots/personal-website.png" alt="personal website screencap">
<h3>Personal Website - Personal Project</h3>
<h4>Jun. 2021</h4>
<h5 class="tooltiptext">A personal portfolio which I designed using Figma and implemented utilizing HTML and CSS. This project allowed for me to
learn HTML and CSS on my own and be able to apply my knowledge into a website which I could be proud of.
</h5>
</div>
</div>
<div class="projects-left">
<div class="project">
<img src="./screenshots/vending.png" alt="ghibli vending screencap">
<h3><a href="https://nmpham2.github.io/studio-ghibli-website/#/" target="_blank"><strong>Ghibli Vending Machine</strong></a> - Personal Project</h3>
<h4>Jan. 2021</h4>
<h5 class="tooltiptext">This is the first personal project that I've ever created! I used React, HTML, CSS, and the Studio Ghibli API in its development
which was a challenge as I had to basically learn React with little guidance. However, I am very proud of how the end result came about. It may seem
quite messy in terms of responsiveness as well as overall API usage, it was a good learning experience for me and it allowed for me to express creativity
in a way that I have not been allowed in my schoolwork.
</h5>
</div>
<div class="project">
<img src="./screenshots/slides.png" alt="google slides screencap">
<h3><a href="https://drive.google.com/drive/folders/1xLXsMicnFHvAR4Of2iASnIMIy6jD-kLj?usp=sharing" target="_blank"><strong>Google Slides Templates</strong></a> - Graphic Design</h3>
<h4>Jun. 2021</h4>
<h5 class="tooltiptext">Here you can find a folder of Google Slide templates that I have created in my free time! I really enjoy creating these templates as it is sometimes
exhausting to create presentations for my classes and start from scratch each time. Feel free to make a copy of the templates as a base for your own presentation! Created with:
Adobe Illustrator, Figma, and Google Slides.
</h5>
</div>
</div>
</div>
<div class="socials-arrow">
<a href="#socials"><img src="./arrows/blue-arrow.png" alt="arrow button. when clicked, goes to socials section" class="socials-down"></a>
</div>
</section>
<!-- Socials Section -->
<a id="socials"></a>
<section class="container reveal">
<div class="socials-image">
<img src="./face pictures/socials-face-pic.png" alt="socials face pic">
</div>
<div class="centering-socials">
<div class="socials-container">
<a href="https://www.linkedin.com/in/nicoleminhpham/" target="_blank" class="linkedin"><img src="./logos/linkedin.png" alt="linkedin logo"></a>
<a href="https://open.spotify.com/user/7qtnaph2ceqdxsw09vcyp7uz5?si=add5964021974da7" target="_blank" class="spotify"><img src="./logos/spotify.png" alt="spotify logo"></a>
<a href="https://github.com/nmpham2" target="_blank" class="github"><img src="./logos/github.png" alt="github logo"></a>
</div>
</div>
<div class="pink-arrow">
<a href="#top"><img src="./arrows/pink-arrow.png" alt="arrow button. when clicked, goes to top"></a>
</div>
</section>
<!-- Scripting for Scroll Reveal -->
<script type="text/javascript">
window.addEventListener('scroll', reveal);
function reveal(){
var reveals = document.querySelectorAll('.reveal');
for(var i = 0; i < reveals.length; i++){
var windowheight = window.innerHeight;
var revealtop = reveals[i].getBoundingClientRect().top;
var revealpoint = 150;
if(revealtop < windowheight - revealpoint){
reveals[i].classList.add('active');
}
else{
reveals[i].classList.remove('active');
}
}
}
</script>
<script src="./zenscroll-latest/zenscroll-min.js"></script>
</body>
</html>