-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
310 lines (266 loc) · 12.9 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
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viwport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./images/title-pic.png">
<title class="fs-1"> Portfolio </title>
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!-- Google Fonts -->
<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=Rubik:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- CSS Style Sheets -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--- Header ---->
<header>
<a href="#" class="logo"> Portfo<span>lio</span></a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home"> Home </a></li>
<li><a href="#about"> About </a></li>
<li><a href="#skills"> Skills </a></li>
<li><a href="#experiences"> Experiences </a></li>
<li><a href="#projects"> Projects </a></li>
<li><a href="#contact"> Contact Me </a></li>
</ul>
</header>
<!--- Header ---->
<section class="home" id="home">
<div class="home-text">
<h5> Hi there, I am </h5>
<h1> Mostaphe </h1>
<h6> a passionate technologist and a full-stack <span>developer.</span></h6>
<p> I am a software developer that designs and develops agile, user friendly websites and web applications! </p>
<a href="./Portfolio/Mostaphe's Resume." target="_blank" download class="btn" onclick=""> Download Resume </a>
</div>
<div class="home-img">
<img src="./images/Headshot-modified.png">
</div>
</section>
<!--- About ---->
<section class="about" id="about">
<div class="about-img">
<img src="./images/Headshot-modified.png">
</div>
<div class="about-text">
<h3> About Me </h2>
<h2> My name is Mostaphe Mohamud, and I am a Full-Stack Developer and a second year computer science student at Berea College. </h5>
<p> I have a stong passion for creating things! I get energy by developing ideas and bringing them to life.
I am currently working as a Software Developer as part of Berea College's Student Programmers team. I work with a group of
talented software developers building a service learning web application for the CELTS department at Berea College.
The application that we have built is used by over <b>1000</b> students, faculty and staff members everyday. </p>
<hr />
<p>
<b>Status: </b>Open to Software Engineering and Program Management Summer Internship Roles
</p>
<hr />
<div class="main-btn">
<a href="mailto:mostaphe.7@gmail.com" class="btn"> Conctact Me </a>
</div>
</div>
</section>
<!--- Skills ---->
<section class="skills" id="skills">
<div class="center">
<h3> Skills and Technologies </h3>
<p>I have worked with a myriad of technologies and frameworks for both front end and back end development.</p>
</div>
<div class="service-content">
<div class="row">
<i class='bx bxl-javascript'></i>
<h3> JavaScript </h3>
<p>I used JavaScript to build the front-end of the CELTS application I have worked on this summer!
</p>
</div>
<div class="row">
<i class='bx bxl-python' ></i>
<h3> Python </h3>
<p> Python is the language of my choosing and I use it for almost every project I build.
</p>
</div>
<div class="row">
<i class='bx bxl-bootstrap' ></i>
<h3> Bootstrap </h3>
<p> Bootstrap is the essential for all my projects and I use it everyday to build exceptional pages.</p>
</div>
<div class="row">
<i class='bx bxl-css3' ></i>
<h3> CSS </h3>
<p> I use CSS for advanced and specific web designes and I am very proficient at it.</p>
</div>
<div class="row">
<i class='bx bxl-flask' ></i>
<h3> Flask </h3>
<p> I used this framework while buidling the CELTS application every day and it is very convinent. </p>
</div>
<div class="row">
<i class='bx bx-cloud'></i>
<h3> MySQL </h3>
<p> I utilized MySQL as the database for CELTS to store data about the users and programs</p>
</div>
<div class="row">
<i class='bx bxl-git'></i>
<h3> Git </h3>
<p> I use git to help me push all the work I do on my mechine to push it to the cloud </p>
</div>
<div class="row">
<i class='bx bxl-github' ></i>
<h3> GitHub </h3>
<p> I use Github to store all my projects and it is also where we keep all our code for the Celts project</p>
</div>
</div>
</section>
<!-- Experiences -->
<section class="experiences" id="experiences">
<div class="experience-center">
<h3> Experience </h3>
<p> I have delved into the tech world from the very first day of my college career and I have acquired a ton of experiences ever since.</p>
</div>
<div class="experience-content">
<div class="box">
<h4> June-August 2022</h4>
<hr />
<table>
<tr>
<td>
<h6> Software Developer</h6>
</td>
<td>
<img class="experience-img" src="./images/Berea College Logo.png">
</td>
</tr>
</table>
<p>Develop and maintain a service-learning web apps that 1000+ students
and faculty members use on a daily basis.</p>
</div>
<div class="box">
<h4> June-August 2022</h4>
<hr />
<table>
<tr>
<td>
<h6> Pinterest Engage Scholar</h6>
</td>
<td>
<img class="experience-img" src="./images/Pinterest-Logo-.png" style="margin-left: 0px;padding-top: 0px;">
</td>
</tr>
</table>
<p>Attended weekly career development sessions with Pinterest engineers to learn more about software engineering.</p>
</div>
<div class="box">
<h4> March-May 2022</h4>
<hr />
<table>
<tr>
<td>
<h6> Tech Forward Fellow </h6>
</td>
<td>
<img class="experience-img" src="./images/HBCU 20X20.png">
</td>
</tr>
</table>
<p> Developed technical skills in Software Engineering, UI/UX Design & Product Management as well as engaged in technical
interview preparation sessions.</p>
</div>
<div class="box">
<h4> Jan-May 2022</h4>
<hr />
<table>
<tr>
<td>
<h6> IT Support Specialist </h6>
</td>
<td>
<img class="experience-img" src="./images/Berea College Logo.png">
</td>
</tr>
</table>
<p>I troubleshoot computer software and hardware issues for <b>1600+</b> college students and <b>130+</b>faculty/staff members.</p>
</div>
</div>
</section>
<!-- Projects -->
<section class="projects" id="projects">
<div class="projects-center">
<h2> Projects</h2>
<p> I have worked on a couple of projects since the beginning of my college career </p>
</div>
<div class="projects-content">
<div class="portfolio-box">
<img src="./images/After.PNG" alt="https://github.com/BCStudentSoftwareDevTeam/celts" />
<div class="projects-overlay">
<h2> CELTS </h2>
<p class="project-description">
CELTS is a service-learning web application designed
to be used by a 1000+ Berea College’s faculty, staff, and students </p>
<a href="https://github.com/BCStudentSoftwareDevTeam/celts"><i class='bx bx-link-alt' ></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="./images/bridge.png" alt="" />
<div class="projects-overlay">
<h2> Bridge </h2>
<p class="project-description">
A web application designed for past interns to share
their internship experience so that future interns can use it as a reference </p>
<a href="#"><i class='bx bx-link-alt' ></i></a>
<p>
Coming Soon
</p>
</div>
</div>
<div class="portfolio-box">
<img src="./images/travel-guide.PNG" alt="" />
<div class="projects-overlay">
<h2> Travel Guide </h2>
<p class="project-description">
A Python program that enables users to select a location on the world map and then suggests tourist attractions,
local cuisines, and tips for travel to those specific locations</p>
<a href="https://github.com/Berea-College-CSC-226/p01-mostaphe_daniel"><i class='bx bx-link-alt' ></i></a>
</div>
</div>
<div class="portfolio-box">
<img src="./images/Portfolio.PNG" alt="" />
<div class="projects-overlay">
<h2> Portfolio </h2>
<p class="project-description">
A full-stack website designed to show case my technical skills and projects </p>
<a href="file:///C:/Users/mohamudm/Desktop/My%20Portfolio/index.html?#home"><i class='bx bx-link-alt' ></i></a>
</div>
</div>
</div>
</section>
<!-- Contacts -->
<section class="contact" id="contact">
<div class="contact-center">
<h2> Contacts </h2>
<p> Hiring for Summer 2023 software engineer or program manager internships
and want to consider me for a position? Shoot me and email or a message on LinkedIn </p>
<div class="contacts">
<div class="container-left">
<p><i class='bx bx-location-plus'></i></i>101 Chestnut St, Berea, KY</p>
<p><i class='bx bxs-paper-plane'></i> mostaphe.7@gmail.com</p>
<p><i class='bx bx-phone'></i>614 592-6878</p>
<div class="social-icons">
<a href="https://www.linkedin.com/in/mostaphemohamud/"><i class='bx bxl-linkedin'></i></a>
<a href="https://github.com/mohamudm1"><i class='bx bxl-github'></i></a>
</div>
</div>
<div class="copyright">
<p> Copyright © 2022. All rights Reserved. <br /> Created by Mostaphe Mohamud </p>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/scrollreveal"></script>
<!--- Link to js---->
<script type="text/javascript" src="static.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>