-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (175 loc) · 6.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:image" content="https://github.com/halqasem1/Portfolio-Site/blob/main/Portfolio%20Thumbnail.png?raw=true">
<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=Merriweather&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/54887b0e6b.js"
crossorigin="anonymous"
></script>
<title>Hana Alqasem</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div id="linksContainer">
<ul id="nav" class="fixedNav">
<li><a href="#contact" class="link">Contact</a></li>
<li><a href="#projectSection" class="link">Projects</a></li>
<li><a href="#aboutSection" class="link">About</a></li>
<li><a href="#home" class="link">Home</a></li>
</ul>
</div>
</nav>
<!-- Beginning of intro section -->
<div id="home">
<h2 id="openingLine">Hi there,</h2>
<h1 id="introLine">I'm Hana Alqasem.</h1>
<h2 id="descriptionLine">
I'm passionate about creating great webpages.
</h2>
</div>
<!-- End of intro section -->
<!-- Beginning of about section -->
<div id="aboutSection">
<h2 id="aboutMe">About me</h2>
<p>
I'm a web developer using React and JavaScript. My love for web development began when
I started teaching myself HTML at age nine in order to make websites for
my Neopets. Later on, I made web pages for my middle school bandmates,
and eventually I began studying JavaScript in order to make apps for
myself and my friends. When I'm not coding, I like to read, cook and
hang out in nature.
</p>
</div>
<!-- End of about section-->
<!-- Beginning of project section -->
<div id="projectSection">
<h2 id="projects">Projects</h2>
<div id="projectsContainer">
<div id="project1" class="project">
<div id="project1Container" class="container">
<a href="https://halqasem1.github.io/93-Ipsum/main/">
<img
src="https://github.com/halqasem1/93-Ipsum/blob/gh-pages/93ipsum.png?raw=true"
alt="93 Ipsum thumbnail"
class="image"
/>
<div class="overlay">
<div id="93IpsumDescription" class="projectDescription">
Custom lorem ipsum generator and oracle
</div>
</div>
</a>
</div>
<p class="projectTitle">93 Ipsum</p>
</div>
<div id="project2" class="project">
<div id="project2Container" class="container">
<a href="https://halqasem1.github.io/Lucid-Dream-Alarm/">
<img
src="https://github.com/halqasem1/Lucid-Dream-Alarm/blob/gh-pages/luciddreamalarm.png?raw=true"
alt="Lucid Dream Alarm thumbnail"
class="image"
/>
<div class="overlay">
<div id="lucidDreamDescription" class="projectDescription">
Preset alarm interval timer made to give the best chance of
having a lucid dream
</div>
</div>
</a>
</div>
<p class="projectTitle">Lucid Dream Alarm</p>
</div>
<div id="project3" class="project">
<div id="project3Container" class="container">
<a href="https://halqasem1.github.io/Digital-Dreamachine/">
<img
src="https://github.com/halqasem1/Digital-Dreamachine/blob/gh-pages/digitaldreammachine.png?raw=true"
alt="Digital Dreamachine thumbnail"
class="image"
/>
<div class="overlay">
<div
id="digitalDreamachineDescription"
class="projectDescription"
class="image"
>
Stroboscopic web experience for inducing altered brain states
</div>
</div>
</a>
</div>
<p class="projectTitle">Digital Dreamachine</p>
</div>
<div id="project4" class="project">
<div id="project4Container" class="container">
<img
src="https://github.com/halqasem1/Portfolio-Site/blob/main/projecttemplate.png?raw=true"
alt="Blank template thumbnail"
class="image"
/>
<div class="overlay">
<div id="beefheadBFFDescription" class="projectDescription">
Location-based app that informs the user if their local Buffalo
Wild Wings has a sports event on so they don't have to wait in
line to get wings
</div>
</div>
</div>
<p class="projectTitle">Beefhead BFF - Under Construction!</p>
</div>
<div id="project5" class="project">
<div id="project5Container" class="container">
<img
src="https://github.com/halqasem1/Portfolio-Site/blob/main/projecttemplate.png?raw=true"
alt="Blank template thumbnail"
class="image"
/>
<div class="overlay">
<div id="DHMDescription" class="projectDescription">
Location-based app that assesses the astrological placements of
the user's gut microbiome to determine where the microbiota
would like their querent eat
</div>
</div>
</div>
<p class="projectTitle">Microbiota Horoscope - Under Construction!</p>
</div>
</div>
</div>
<!-- Beginning of contact section -->
<div id="contactSection">
<h2 id="contact">Contact</h2>
<div id="contactLinksContainer">
<div id="contactGroup1" class="contact">
<a href="mailto:[email protected]"
><i id="emailIcon" class="fa-regular fa-envelope"></i> Email</a
>
<a href="https://github.com/halqasem1"
><i id="githubIcon" class="fa-brands fa-github"></i> GitHub</a
>
</div>
<div id="contactGroup2" class="contact">
<a href="http://www.linkedin.com/in/hana-alqasem"
><i id="linkedinIcon" class="fa-brands fa-linkedin"></i> LinkedIn</a
>
<a href="https://halqasem1.github.io/Resume/Hana-Alqasem-Resume.pdf"
><i id="resumeIcon" class="fa-solid fa-file"></i> Resume</a
>
</div>
</div>
<p id="githubTag">Source code for this website available on GitHub.</p>
</div>
<!-- End of contact section -->
<script src="script.js"></script>
</body>
</html>