-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (180 loc) · 8.06 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
<!DOCTYPE HTML>
<!--
Solid State by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Catherine Pham 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" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header" class="alt">
<h1><a href="index.html">Catherine Pham</a></h1>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="#projects_section">Projects</a></li>
<li><a href="#contact_info">Find me at</a></li>
</ul>
<a href="#" class="close">Close</a>
</div>
</nav>
<!-- Banner -->
<section id="banner">
<div class="inner">
<!-- <div class="logo"><span class="icon fa-gem"></span></div> -->
<h2>Catherine Pham</h2>
<p>personal website
</p>
</div>
</section>
<!-- Wrapper -->
<a id="about_section"></a>
<section id="wrapper">
<section id="one" class="wrapper spotlight style1">
<div class="inner">
<a href="#" class="image"><img src="images/headshot.png" alt="" /></a>
<div class="content">
<h2 class="major">About me</h2>
<p>Hello! My name is Catherine Pham and I am a senior studying Computer
Science at the University of Florida. I love learning new things and
I am extremely passionate about coding. Whether it be learning Python
to automate a process to make my life easier or teaching myself HTML and CSS
to create a website like this, I am always trying to learn and do more.
In my free time, I love exploring new places to eat in Gainesville (especially
sushi), DIY-ing or sewing cool thrift finds, building lego sets, and
going to the beach. </p>
<a href="about.html" class="special">Learn more</a>
</div>
</div>
</section>
<!-- Two -->
<!-- <section id="two" class="wrapper alt spotlight style2">
<div class="inner">
<a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>
<div class="content">
<h2 class="major">Tempus adipiscing</h2>
<p>Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras turpis ante, nullam sit amet turpis non, sollicitudin posuere urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla cursus.</p>
<a href="#" class="special">Learn more</a>
</div>
</div>
</section> -->
<!-- Three -->
<!-- <section id="three" class="wrapper spotlight style3">
<div class="inner">
<a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>
<div class="content">
<h2 class="major">Nullam dignissim</h2>
<p>Lorem ipsum dolor sit amet, etiam lorem adipiscing elit. Cras turpis ante, nullam sit amet turpis non, sollicitudin posuere urna. Mauris id tellus arcu. Nunc vehicula id nulla dignissim dapibus. Nullam ultrices, neque et faucibus viverra, ex nulla cursus.</p>
<a href="#" class="special">Learn more</a>
</div>
</div>
</section> -->
<!-- Four -->
<a id="projects_section"></a>
<section id="four" class="wrapper alt style1">
<div class="inner">
<h2 class="major">Projects</h2>
<p>You can find my most recent projects below. Click on each card to view a demo or learn more.</p>
<section class="features">
<article>
<a href="project1.html" class="image"><img src="card_imgs/points_tracker_img.png" alt="" /></a>
<h3 class="major">Point Tracker Automation</h3>
<p>Automated the process of tracking SWE members’ attendance at events on a consolidated Google Sheets document using Google Apps Script and JavaScript.</p>
<a href="project1.html" class="special">Learn more</a>
</article>
<article>
<a href="project2.html" class="image"><img src="card_imgs/helping_hand_img.png" alt="" /></a>
<h3 class="major">Helping Hand Web App</h3>
<p>Developed a web application called Helping Hand and a Google Chrome Extension using JavaScript, HTML,
CSS, NodeJS, MongoDB, Express, and React.</p>
<a href="project2.html" class="special">Learn more</a>
</article>
<article>
<a href="project3.html" class="image"><img src="card_imgs/linkedin_img.png" alt="" /></a>
<h3 class="major">LinkedIn Project</h3>
<p>Developed a user interface using SMFL to find the shortest distance of connections of a LinkedIn user to an employee at a
desired company.</p>
<a href="project3.html" class="special">Learn more</a>
</article>
<article>
<a href="project4.html" class="image"><img src="card_imgs/minesweeper_img.png" alt="" /></a>
<h3 class="major">Minesweeper Game</h3>
<p>Replicated the game Minesweeper in C++ using SFML to implement sprite images and receive input.</p>
<a href="project4.html" class="special">Learn more</a>
</article>
</section>
<!-- <ul class="actions">
<li><a href="#" class="button">Browse All</a></li>
</ul> -->
</div>
</section>
</section>
<!-- Footer -->
<a id="contact_info"></a>
<section id="footer">
<div class="inner">
<h2 class="major">Find me at</h2>
<!-- <p>Cras mattis ante fermentum, malesuada neque vitae, eleifend erat. Phasellus non pulvinar erat. Fusce tincidunt, nisl eget mattis egestas, purus ipsum consequat orci, sit amet lobortis lorem lacus in tellus. Sed ac elementum arcu. Quisque placerat auctor laoreet.</p>
<form method="post" action="#">
<div class="fields">
<div class="field">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
</ul>
</form> -->
<div class="row">
<div class="col-6 col-12-medium">
<ul class="contact">
<li class="icon brands fa-linkedin"><a href="https://www.linkedin.com/in/catherinepham2/">LinkedIn</a></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<ul class="contact">
<li class="icon brands fa-github"><a href="https://github.com/catherinepham">GitHub</a></li>
</ul>
</div>
</div>
<ul class="copyright">
<li>© Untitled Inc. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.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>