-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
265 lines (236 loc) · 9.48 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
<!DOCTYPE html>
<html>
<head>
<title>Prince Oduro's Portfolio</title>
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="./script.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav>
<div id="home">
<div class="profile_name">
Prince Oduro
<div class="contact_info">
<img id="email" src="/Pictures/envelope.png" alt="https://icons8.com/icon/124377/circled-envelope" />
</div>
<div style="clear:both;"></div>
<div class="contact_info">
<img id="phone" src="Pictures/phone.png" alt="https://icons8.com/icon/124377/circled-envelope" />
+447852708059
</div>
</div>
<div class="topdiv">
<a class="topmenu" href="#about-me">About Me</a>
<!-- Add the links for Skills, Projects and Recommendation here -->
<a class="topmenu" href="#skills">Skills</a>
<a class="topmenu" href="#projects">Projects</a>
<a class="topmenu" href="#recomendations">Recommendations</a>
</div>
</div>
</nav>
<!-- About Me -->
<section id="about-me" class="container">
<div>
<!-- <img src="https://miro.medium.com/max/1400/1*qdAW1TjCN57h1lbuuzvchg.gif" class="profile_image"/> -->
<img src="/Pictures/animated-dev.gif" class="profile_image" />
</div>
<div>
<h1>
Hi, I'm Prince Oduro! <img src="Pictures/wave.png" alt="Waving logo" width="60px" />
</h1>
<p>
I am a Full Stack Developer with 1 year of practical experience in both frontend and backend development, as
well as server management.
Having completed a Full Stack Bootcamp and supplemented it with self-taught skills, I’m highly adaptable and
motivated to keep growing in the field.
My work includes building and deploying applications and microservices on IBM Cloud, showcasing my ability to
deliver scalable, cloud-ready solutions.
My skill set covers: Frontend Development: Proficient in creating user-focused, responsive interfaces.
Backend Development: Experience in building and managing RESTful services and microservices.
Cloud & Server Management: Hands-on experience with IBM Cloud, including deployment, scaling, and maintenance of
applications.
I’m passionate about contributing to projects that require a versatile approach and am always looking to deepen
my expertise across the application and presentation layers.
</p>
</div>
</section>
<!-- Skills -->
<section id="skills">
<h2>Skills</h2>
<div style="clear:both;"></div>
<div class="all_skills">
<div class="skill">
<img src="Pictures/html5.png" alt="html logo" />
<h6>HTML</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="https://1000logos.net/wp-content/uploads/2020/09/CSS-Logo.jpg" alt="css logo" />
<h6>CSS</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="https://1000logos.net/wp-content/uploads/2020/09/JavaScript-Logo.png" alt="js logo" />
<h6>JavaScript</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png"
alt="react logo" />
<h6>React</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/2560px-Node.js_logo.svg.png"
alt="node logo" />
<h6>Nodejs</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/bootstrap.png" alt="bootstrap logo" />
<h6>Bootstrap</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/docker.png" alt="docker logo" />
<h6>docker</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/git.png" alt="git logo" />
<h6>Github</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/flask.png" alt="flask logo" />
<h6>Flask</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/mongo.png" alt="mongo logo" />
<h6>MongoDB</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/python.png" alt="python logo" />
<h6>Python</h6>
<p>1 year experience</p>
</div>
<div class="skill">
<img src="Pictures/sqlite.png" alt="sqlite logo" />
<h6>Sqlite</h6>
<p>SQLite</p>
</div>
<!-- Add more skills here -->
</div>
</section>
<!-- Projects -->
<section class="projects" id="projects">
<h2>
Projects
</h2>
<div style="clear:both;"></div>
<div id="projects-container" class="projects-container">
<div class="project-card">
<h3><a href="projects.html">Flexxit</a></h3>
<ul>
<li>Developed a secure movie website utilizing React for the frontend, Next.js for server-side rendering, and
Tailwind CSS for responsive styling.
Implemented Prisma as a data abstraction layer with MongoDB for database management and NextAuth for secure
user authentication. The site is deployed
on Vercel for reliable, scalable hosting.
</li>
</ul>
</div>
<hr>
<div class="project-card">
<h3>Car dealership Web</h3>
<ul>
<li>I developed a scalable car dealership application using React for the frontend and Python Django with
SQLite for the backend, along with Node.js,
Express, and MongoDB for review services. HTML/CSS and Bootstrap were used for page design, while a Flask
microservice with NLTK enabled sentiment
analysis on customer reviews. The application was containerized with Docker and managed with Kubernetes,
deploying seamlessly on IBM Code Engine
with GitHub Actions handling CI/CD.
</li>
</ul>
</div>
<hr>
<div class="project-card">
<h3>TravelBuddy website </h3>
<ul>
<li>I created a simple and responsive Travel Buddy website using HTML, CSS, and Bootstrap. This project
focused on clean design and user-friendly
navigation, showcasing essential travel features like destination highlights, trip planning options, and
contact information. Bootstrap ensured
the site was fully responsive across devices, providing a seamless experience for users exploring travel
connections and planning trips.</li>
</ul>
</div>
</div>
</section>
<div style="clear:both;"></div>
<!-- Recommendations -->
<section id="recommendations">
<h2>Recommendations</h2>
<div style="clear:both;"></div>
<div class="all_recommendations">
<div class="recommendation">
<span>“</span>
Prince is a very quick learner and quickly grasps key concepts of Web development.
She got a great attitude & she is an excellent team player.
She has a curious mind and asks the right question.
She takes initiative within a team and has potentials to lead the team.
<span>”</span>
</div>
<div class="recommendation">
<span>“</span>
Working with Prince has been an awesome experience.
She is highly knowledgable and always goes the extra step to make sure everything is right.
For any future projects that need her expertise I would definitely want to work with her again.
<span>”</span>
</div>
<div class="recommendation">
<span>“</span>
I had worked along with Prince during the initial phase of our venture which needed Web development.
She is a committed resource who has in depth knowledge about the domain.
She will be an asset for any organisation!
<span>”</span>
</div>
</div>
</section>
<!-- Recommendation Form -->
<section id="contact">
<div class="flex_center">
<fieldset>
<legend class="introduction">Leave a Recommendation</legend>
<label for="name">Name (Optional):</label>
<input type="text" id="name" placeholder="Name (Optional)"> <br />
<label for="new_recommendation">Message:</label>
<textarea id="new_recommendation" cols="500" rows="10" placeholder="Message"></textarea>
<button id="recommend_btn" onclick="addRecommendation()" aria-labelledby="Submit recommendation">Submit</button>
</div>
</fieldset>
</div>
</section>
<div class="iconbutton">
<a href="#home">
<!--Add the code here for the logo to appear and the icon to be actionable-->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white"
width="63px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</div>
<div class="popup" id="popup" class="flex_center">
<img src="html_finalprojimages/checkmark--outline.svg" />
<h3> Thanks for leaving a reccomendation!<!-- Add appropriate text here--></h3>
<button onclick="showPopup(false)" aria-labelledby="Close popup">Ok</button>
</div>
</body>
</html>