CodeYourFuture · Joemwa · Jan 17, 2023
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Joseph Mwanza (https://codepen.io/Joe79/pen/poaKJjp)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,26 +1,4 @@
-# My-Codepen-Website
-An empty repository for Git learners to fork
+# Personal Portfolio
 
-## Fork and Clone our Repository
-Make a fork of the repository to your Github Profile and clone it to your computer.
+A Pen created on CodePen.io. Original URL: [https://codepen.io/Joe79/pen/poaKJjp](https://codepen.io/Joe79/pen/poaKJjp).
 
-https://github.com/CodeYourFuture/My-CodePen-Website
-
-You'll be using this forked version to host your website.
-
-## Add your files
-Copy the files that you've unzipped to the repository folder for your website.
-
-Find this folder by clicking Show in Explorer in Github Desktop.
-
-## Upload to Github
-Next, use Github and Github Desktop to upload your website to your Github Profile.
-
-If you get stuck, make sure to check this week's lesson to see what we covered.
-
-## Done!
-Your completed repository should look something like this:
-
-https://github.com/CodeYourFuture/My-CodePen-Website-Example-Solution
-
-Stuck? Any Questions? Ask on Slack. Remember to update this README
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - Personal Portfolio</title>
+  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<nav id="navbar">
+  <a href="#welcome-section">welcome section</a>
+  <a href="#projects">Projects</a>
+  <a href="#social">Social</a>
+</nav>
+
+<header id="welcome-section">
+
+  <h1>Hello!</h1>
+
+  <p>My name is Joseph Mwanza</p>-
+  <p>And I am a Web Developer</p>
+  </div>
+</header>
+
+<section id="projects">
+  <h2>Projects</h2>
+  <div class="projects-container">
+
+    <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.darkstar-digital.com/wp-content/uploads/2017/03/Browser_Screenshot.png" alt="Random Picture"><p>Random color generator</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://cdn.apartmenttherapy.info/image/upload/f_auto,q_auto:eco,c_fill,g_auto,w_1500/k/archive/3bfb8335b48315a549e33e798393e3c3e84fa52c" alt="Delicious dish"><p>Delicious dish</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="http://ih1.redbubble.net/image.5554298.3475/flat,1000x1000,075,f.jpg" alt="Junk car"><p>Junk car</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.gamersdecide.com/sites/default/files/authors/u12476/2015_04_13_0203.jpg" alt="Racing game"><p>Racing game</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.tcu360.com/wp-content/uploads/2019/01/Molly-1-1920x1302.jpg" alt="Volleyball competition"><p>Volleyball competition</p></a>
+
+    <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.autoguide.com/blog/wp-content/gallery/supercars-at-the-2016-chicago-auto-show/Supercars-of-Chicago-Auto-Show-16.jpg" alt="Car show"><p>Car show</p></a>
+  </div>
+
+</section>
+
+<section id="social" class="bg-pinkish">
+  <h2>Social Media</h2>
+  <p>You can find me on</p>
+  <ul class="social-ul">
+    <li><a id="profile-link" href="https://github.com/florinpop1705" target="_blank"><i class="fab fa-github"></i></a></li>
+    <li><a href="https://www.youtube.com/channel/UCyvleHu3ysiHR7VwZdfL4xw" target="_blank"><i class="fab fa-youtube"></i></a></li>
+    <li><a href="https://www.linkedin.com/in/joseph-mwanza-50079754/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
+    <li><a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a></li>
+    <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a></li>
+  </ul>
+</section>
+
+<footer>Made with <i class="fas fa-heart"></i> by Joseph Mwanza
+</footer>
+
+
+
+<script
+        src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+<!-- partial -->
+
+</body>
+</html>
diff --git a/dist/style.css b/dist/style.css
@@ -0,0 +1,151 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Raleway:wght@200;400&display=swap');
+
+*{
+  box-sizing: border-box;
+}
+body {
+  background-color: #94958B;
+  font-family: 'lato', sans-serif;
+  margin: 0;
+}
+
+nav{
+  background-color: #80475E;
+  color: #94958B;
+  display: flex;
+  justify-content: flex-end;
+  padding: 15px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+nav a {
+  color: #fff;
+  margin-left: 20px;
+  text-decoration: none;
+}
+
+nav a:hover {
+  text-decoration: underline;
+}
+
+header {
+  background-image: url(https://miro.medium.com/max/5764/1*_Cu-p0mXOlRvZ3YiDrJBEQ.jpeg);
+  background-size: cover;
+  background-position: center center;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+}
+
+header::after {
+  content: '';
+  background-color: #000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.8;
+}
+
+header * {
+  position: relative; 
+  z-index: 1; 
+}
+
+header h1 {
+  font-size: 60px;
+  margin-bottom: 5px;
+  margin-top: 0;
+}
+
+header p {
+  font-size: 30px;
+  margin: 0;
+}
+
+section {
+  padding: 40px;
+  text-align: center;
+}
+
+section h2 {
+  margin: 0;
+}
+
+section p {
+  margin-top: 0;
+}
+
+.projects-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  max-width: 810px;
+  margin: 20px auto 0;
+}
+.project-tile {
+  margin: 10px;
+  max-width: 250px;
+}
+
+.project-tile img {
+  max-width: 100%;
+}
+
+.project-tile p {
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+.bg-pinkish {
+  background-color: #A64253;
+  color: #fff;
+}
+
+.social-ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.social-ul a {
+  border-radius: 50%;
+  border: 3px solid #fff;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  margin: 5px 10px;
+  height: 50px;
+  width: 50px;
+}
+footer {
+  background-color: #80475E;
+  color: #94958B;
+  padding: 10px;
+  text-align: center;
+}
+
+footer .fa-heart {
+  color: #fff;
+}
+
+@media (max-width: 440px) {
+  section {
+   padding: 20px; 
+  } 
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+<nav id="navbar">
+  <a href="#welcome-section">welcome section</a>
+  <a href="#projects">Projects</a>
+  <a href="#social">Social</a>
+</nav>
+
+<header id="welcome-section">
+
+  <h1>Hello!</h1>
+
+  <p>My name is Joseph Mwanza</p>-
+  <p>And I am a Web Developer</p>
+  </div>
+</header>
+
+<section id="projects">
+  <h2>Projects</h2>
+  <div class="projects-container">
+
+    <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.darkstar-digital.com/wp-content/uploads/2017/03/Browser_Screenshot.png" alt="Random Picture"><p>Random color generator</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://cdn.apartmenttherapy.info/image/upload/f_auto,q_auto:eco,c_fill,g_auto,w_1500/k/archive/3bfb8335b48315a549e33e798393e3c3e84fa52c" alt="Delicious dish"><p>Delicious dish</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="http://ih1.redbubble.net/image.5554298.3475/flat,1000x1000,075,f.jpg" alt="Junk car"><p>Junk car</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.gamersdecide.com/sites/default/files/authors/u12476/2015_04_13_0203.jpg" alt="Racing game"><p>Racing game</p></a>
+
+  <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.tcu360.com/wp-content/uploads/2019/01/Molly-1-1920x1302.jpg" alt="Volleyball competition"><p>Volleyball competition</p></a>
+
+    <a href="https://codepen.io/Joe79/pen/poaKJjp" target="_blank" class="project-tile"><img src="https://www.autoguide.com/blog/wp-content/gallery/supercars-at-the-2016-chicago-auto-show/Supercars-of-Chicago-Auto-Show-16.jpg" alt="Car show"><p>Car show</p></a>
+  </div>
+
+</section>
+
+<section id="social" class="bg-pinkish">
+  <h2>Social Media</h2>
+  <p>You can find me on</p>
+  <ul class="social-ul">
+    <li><a id="profile-link" href="https://github.com/florinpop1705" target="_blank"><i class="fab fa-github"></i></a></li>
+    <li><a href="https://www.youtube.com/channel/UCyvleHu3ysiHR7VwZdfL4xw" target="_blank"><i class="fab fa-youtube"></i></a></li>
+    <li><a href="https://www.linkedin.com/in/joseph-mwanza-50079754/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
+    <li><a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a></li>
+    <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a></li>
+  </ul>
+</section>
+
+<footer>Made with <i class="fas fa-heart"></i> by Joseph Mwanza
+</footer>
+
+
+
+<script
+        src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+