Skip to content

Commit b6f2c85

Browse files
palesamapekapalesamapeka
committedJun 19, 2024·
updated
1 parent 4cc96c5 commit b6f2c85

File tree

3 files changed

+71
-41
lines changed

3 files changed

+71
-41
lines changed
 

‎assets/random-quote.jpg

31.8 KB
Loading

‎index.html

+66-38
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,13 @@ <h1 class="title">About Me</h1>
8282
many playlists.
8383
</p>
8484
<div style="display: flex; justify-content: center;">
85-
<iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/2eQU54GK7uXqWSSDasINWi?utm_source=generator" width="80%" height="400" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
86-
</div>
87-
85+
<iframe style="border-radius:12px"
86+
src="https://open.spotify.com/embed/playlist/2eQU54GK7uXqWSSDasINWi?utm_source=generator" width="80%"
87+
height="400" frameBorder="0" allowfullscreen=""
88+
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
89+
loading="lazy"></iframe>
90+
</div>
91+
8892
</div>
8993

9094
<div id="tech-stack" class="projects-container">
@@ -149,50 +153,71 @@ <h1>Work Experience</h1>
149153
</div>
150154

151155
<div id="projects" class="projects-container hidden">
152-
<h1>Projects</h1>
156+
<h1>30 Days of JavaScript</h1>
153157
<div class="project">
154-
<p>Simple Calculator Web App</p>
155-
<a href="/projects/simple-calculator-updated/simple-calculator.html">
156-
<img src="assets/simple-calc-app.jpg">
157-
</a>
158-
<p>Project Summary: <br>
159-
This project is a simple calculator application built using HTML, CSS, and JavaScript.
160-
It provides basic arithmetic functionality (addition, subtraction, multiplication, division)
161-
and includes a clear button to reset the input. <br><a href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/simple-calculator-updated">Project Repo</a></p>
158+
<p>Simple Calculator Web App</p>
159+
<a href="/projects/simple-calculator-updated/simple-calculator.html">
160+
<img src="assets/simple-calc-app.jpg">
161+
</a>
162+
<p>Project Summary: <br>
163+
This project is a simple calculator application built using HTML, CSS, and JavaScript.
164+
It provides basic arithmetic functionality (addition, subtraction, multiplication, division)
165+
and includes a clear button to reset the input. <br><a
166+
href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/simple-calculator-updated">Project
167+
Repo</a></p>
162168
</div>
163-
169+
164170
<div class="project">
165-
<p>Weather Web App</p>
166-
<a href="/projects/weather-app/weather-web-app.html">
167-
<img src="assets/weather-app.jpg">
168-
</a>
169-
<p>Project Summary: <br>
170-
This project is a Weather Web App built using HTML, CSS, and JavaScript.
171-
It allows users to input a city name, fetch weather data from the OpenWeatherMap API,
172-
and display relevant weather information dynamically on the webpage. <br><a href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/weather-app">Project Repo</a></p>
171+
<p>Weather Web App</p>
172+
<a href="/projects/weather-app/weather-web-app.html">
173+
<img src="assets/weather-app.jpg">
174+
</a>
175+
<p>Project Summary: <br>
176+
This project is a Weather Web App built using HTML, CSS, and JavaScript.
177+
It allows users to input a city name, fetch weather data from the OpenWeatherMap API,
178+
and display relevant weather information dynamically on the webpage. <br><a
179+
href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/weather-app">Project
180+
Repo</a></p>
173181
</div>
174182

175183
<div class="project">
176184
<p>To-do List Web App</p>
177185
<a href="/projects/to-do-list/to-do-list-app.html">
178-
<img src="assets/to-do-app.jpg">
186+
<img src="assets/to-do-app.jpg">
179187
</a>
180188
<p>Project Summary: <br>
181-
This project is a To-do List Web App developed using HTML, CSS, and JavaScript.
182-
It allows users to add tasks, mark them as completed, and delete tasks. The application also
183-
features local storage integration to persist tasks even after refreshing or closing the browser. <br><a href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/to-do-list">Project Repo</a></p>
184-
</div>
189+
This project is a To-do List Web App developed using HTML, CSS, and JavaScript.
190+
It allows users to add tasks, mark them as completed, and delete tasks. The application also
191+
features local storage integration to persist tasks even after refreshing or closing the browser. <br><a
192+
href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/to-do-list">Project
193+
Repo</a></p>
194+
</div>
185195

186-
<div class="project">
187-
<p>Random Password Generator Web App</p>
188-
<a href="/projects/random-password/random-password-generator.html">
196+
<div class="project">
197+
<p>Random Password Generator Web App</p>
198+
<a href="/projects/random-password/random-password-generator.html">
189199
<img src="assets/password-gen.jpg">
190-
</a>
191-
<p>Project Summary: <br>
192-
This project is a Random Password Generator developed using HTML, CSS, and JavaScript.
193-
It generates random passwords and allows users to copy them to the clipboard. <br><a href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/random-password">Project Repo</a></p>
194-
</div>
195-
</div>
200+
</a>
201+
<p>Project Summary: <br>
202+
This project is a Random Password Generator developed using HTML, CSS, and JavaScript.
203+
It generates random passwords and allows users to copy them to the clipboard. <br><a
204+
href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/random-password">Project
205+
Repo</a></p>
206+
</div>
207+
208+
<div class="project">
209+
<p>Random Quote Web App</p>
210+
<a href="/projects/random-quote-generator/random-quote.html">
211+
<img src="assets/random-quote.jpg">
212+
</a>
213+
<p>Project Summary: <br>
214+
This project is a Random Quote Generator built using HTML, CSS, and JavaScript.
215+
It fetches random quotes from the Quotable API and displays them dynamically on the webpage.
216+
Users can generate new quotes and tweet the current quote directly from the app. <br><a
217+
href="https://github.com/palesamapeka/palesamapeka.github.io/tree/main/projects/random-quote-generator">Project
218+
Repo</a></p>
219+
</div>
220+
</div>
196221

197222
<div class="details-container hidden">
198223
<h1 id="contact">Contact Me</h1>
@@ -231,9 +256,12 @@ <h1 id="contact">Contact Me</h1>
231256
<nav>
232257
<div id="contact" class="nav-links-container">
233258
<div id="socials-container">
234-
<img src="assets/linkedin.png" alt="My LinkedIn Profile" class="icon" onclick="window.open('https://www.linkedin.com/in/palesa-mapeka/', '_blank')">
235-
<img src="assets/IG.png" alt="My Instagram Profile" class="icon" onclick="window.open('https://www.instagram.com/sieg.fried_/', '_blank')">
236-
<img src="assets/github.png" alt="My Github Profile" class="icon" onclick="window.open('https://github.com/palesamapeka', '_blank')">
259+
<img src="assets/linkedin.png" alt="My LinkedIn Profile" class="icon"
260+
onclick="window.open('https://www.linkedin.com/in/palesa-mapeka/', '_blank')">
261+
<img src="assets/IG.png" alt="My Instagram Profile" class="icon"
262+
onclick="window.open('https://www.instagram.com/sieg.fried_/', '_blank')">
263+
<img src="assets/github.png" alt="My Github Profile" class="icon"
264+
onclick="window.open('https://github.com/palesamapeka', '_blank')">
237265
</div>
238266
</div>
239267
</nav>

‎styles.css

+5-3
Original file line numberDiff line numberDiff line change
@@ -316,10 +316,12 @@ section {
316316
justify-content: center;
317317
align-items: center;
318318
}
319-
img{
319+
320+
321+
#projects img{
320322
height: 160px;
321-
width: 120px;
322-
border-radius: 5px;
323+
min-width: 100px;
324+
border-radius: 10px;
323325
}
324326

325327
.details-container h3{

0 commit comments

Comments
 (0)
Please sign in to comment.