-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
160 lines (153 loc) · 8.5 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
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="side-bar">
<nav class="navigation">
<ul class="ul">
<li>
<a class="about" href="#about">About</a>
<a class="mystory" href="#mystory">My Story</a>
<a class="projects" href="#projects">Projects</a>
<a class="resources" href="#resources">Resources</a>
<a class="contact" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<section id="about">
<h1 class="title">Hello, I'm Renee!</h1>
<div class="boxes">
<p class="abouttext">I study Computer Science and African American
studies at Harvard College. I am an aspiring software engineer
interested in how we can use data and software to advance
social justice. In addition to all things tech, I am passionate
about activism, creating music, and traveling!
</p>
<img class="pic" src="headshot.jpg" alt="headshot" width="300">
</div>
</section>
<section id="mystory">
<h1>My story</h1>
<!-- prob make this longer -->
<div>
I was born on a military base in Key West. As a military kid, I got
a lot of opportunities to travel and see different walks of life around
the country. It also came with its tribulations though, as I had to learn
how to leave friends and family and pick up in a completely new environment.
Packing all my belongings, going house hunting, and learning how to say goodbyes
became a normal part of my life and taught me
how to be adaptable and friendly with everyone. I grew up in obscure suburbs
outside the cities of Boston, D.C., Minneapolis, and Cincinnati, and I have met
a range of different people and picked up different hobbies and interests along
the way. Although difficult at times, I will be grateful for the
experiences and opportunities that military life gave me, as it has shaped
me into who I am.
</div>
<br/>
<div>
In elementary school, I was introduced to Scratch, where I learned
block coding. I feel lucky to have gone to a primary school that was really
focused on engineering. From programming a little orange cat in Scratch to
building the highest tower out of spaghetti and marshmallows, I knew I had a
passion for STEM from a young age. This passion grew with me as I learned in
high school that despite the opportunities this country has given me, there are
injustices being upheld in the United States. I quickly realized
that if I wanted to see change happen, I had to make it happen myself because
no one else would fight for me. Leaving high school, I knew exactly
what I wanted to do: perform data science research in order to eliminate
racial disparities in the healthcare, education, and criminal justice systems.
</div>
<br/>
<div>
I have many ideas for combining my two passions, but currently I am
working on organizing coding workshops to teach introductory coding
to students in underserved and overlooked communities. I would like
to travel to different schools and make sure that every student at
least has the opportunity to try technology and explore careers
within the vast field of computer science. I just finished running
<a href="index.html#resources" onclick="resources()">my first workshop back at my own high school</a>, as they
don't have web development as a part of their curriculum, and seeing students' faces
light up at the websites they created inspires me to keep going.
</div>
</section>
<section id="projects">
<h1>Projects</h1>
<div>
Updates coming soon!
</div>
</section>
<section id="resources">
<h1>Resources</h1>
<!-- how do i transfer what i had in my last website for resources here -->
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Learn to Code</label>
<div class="tab">
<h1>Teach Yourself How to Code!</h1>
<p class="tabcontent">Learning how to code does not need to be limited to the classroom! There are so many resources I wish I knew about to teach yourself how to code for free! I have included some helpful websites and links that I have enjoyed using! The links have all different kinds of resources for learning how to code, and you will have access to information about learning different coding languages, web development, data structures and algorithms, data science, and so much more!</p>
<p class="tabcontent">Click <a href="res.html">here</a> to access learning resources</p>
</div>
<input type="radio" name="tabs" id="tabtwo" >
<label for="tabtwo">Summer '23 Workshop</label>
<div class="tab" >
<h1>Web Development workshop (Summer 2023)</h1>
<p class="tabcontent">Kicked off my workshop back at my own high school
teaching students and parents how to create their own websites using HTML,
Javascript, and CSS.
</p>
<div>
<img src="summer23.jpg" width="260px">
<img src="img3.jpg" width="305px">
<img src="img6.jpg" width="260px">
</div>
<div >
<img src="img4.jpg" width="350px">
<img src="img5.jpg" width="260px">
</div>
</div>
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Winter '23 Workshop</label>
<div class="tab">
<h1>Winter '23 coding Workshop (Cincinnati area)</h1>
<h3>I would love to come to your school! More information to come!</h3>
<p>Click <a href="">here</a> to register.</p>
</div>
</div>
</section>
<section id="contact">
<h1>Contact</h1>
<!-- linked in, email ? use icons to make it cute and hyperlink-->
<h1 class="contactsss">Let's keep in touch! Feel free to message me using the following
links! (Last link is email)
</h1>
<br/>
<br/>
<br/>
<br/>
<div class="social-buttons">
<a href="https://www.facebook.com/renee.perpignan" class="social-button social-button--facebook" aria-label="Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.linkedin.com/in/renee-perpignan-475858258/" class="social-button social-button--linkedin" aria-label="LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://github.com/reneeperpignan" class="social-button social-button--github" aria-label="GitHub">
<i class="fab fa-github"></i>
</a>
<a href="mailto:rperpignan@college.harvard.edu" class="social-button social-button--codepen" aria-label="Google">
<i class="fab fa-google"></i>
</a>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>