CodeYourFuture · Luke-Manyamazi · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/Luke-Manyamazi-Portfolio/CS50P.png b/Luke-Manyamazi-Portfolio/CS50P.png
diff --git a/Luke-Manyamazi-Portfolio/Form-Control.png b/Luke-Manyamazi-Portfolio/Form-Control.png
diff --git a/Luke-Manyamazi-Portfolio/FreeCodeCamp.png b/Luke-Manyamazi-Portfolio/FreeCodeCamp.png
diff --git a/Luke-Manyamazi-Portfolio/Karel.png b/Luke-Manyamazi-Portfolio/Karel.png
diff --git a/Luke-Manyamazi-Portfolio/birthday.png b/Luke-Manyamazi-Portfolio/birthday.png
diff --git a/Luke-Manyamazi-Portfolio/cs50p1.png b/Luke-Manyamazi-Portfolio/cs50p1.png
diff --git a/Luke-Manyamazi-Portfolio/cs50p2.png b/Luke-Manyamazi-Portfolio/cs50p2.png
diff --git a/Luke-Manyamazi-Portfolio/freecodecamp1.png b/Luke-Manyamazi-Portfolio/freecodecamp1.png
diff --git a/Luke-Manyamazi-Portfolio/hero_img.jpg b/Luke-Manyamazi-Portfolio/hero_img.jpg
diff --git a/Luke-Manyamazi-Portfolio/hometown.png b/Luke-Manyamazi-Portfolio/hometown.png
diff --git a/Luke-Manyamazi-Portfolio/index.html b/Luke-Manyamazi-Portfolio/index.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
+  <title>My Portfolio</title>
+  <meta name="description" content="The technical portfolio of trainee name" >
+  <meta name="viewport" content="width=device-width, initial-scale=1" >
+  <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <div class="hero-image">
+    <div class="navbar">      
+      <a href="#contact">Contact</a>
+      <a href="#projects">Projects</a>
+      <a href="#about">About Me</a> 
+    <div class="hero-text">
+      <h1>I am Luke Manyamazi</h1>
+      <p>Aspiring Fullstack Developer</p>
+      <button>Explore</button>
+    </div>
+  </div>             
+    </div>
+
+  <main>
+    <section id="about">
+      <header>
+        <h2>About Me</h2>
+      </header>
+      <p>
+        Hi, my name Luke Manyamazi, an IT professional with a wealth of
+        experience in remote and onsite technical support. Over the years,
+        I've cultivated a deep passion for technology and programming,
+        continuously expanding my skill set. I have completed several key
+        courses, including the CS50P Python
+        Course, which strengthened my
+        understanding of problem-solving with Python, as well as
+        FreeCodeCamp
+          Responsive Web Design Certification, which helped me
+          master the basics of building accessible, user-friendly websites. I
+          also completed Cloud Computing 101 on
+          Coursera, broadening my knowledge
+          of cloud infrastructure and services. These experiences have provided
+          me with a solid foundation in both software development and web
+          technologies.
+        </p>
+
+        <p>
+          Currently, I am a trainee at CodeYourFuture, where I am sharpening my
+          coding skills through hands-on projects and collaborative learning. I
+          am passionate about exploring new programming languages and
+          technologies, and I look forward to applying my skills to build
+          real-world solutions. Through my GitHub, I aim to share my learning
+          journey and projects with the developer community, while continually
+          improving and taking on new challenges.
+        </p>
+
+        <p>
+          My ultimate goal is to become a full-stack software engineer, capable
+          of developing robust, end-to-end systems, websites and applications
+          that solve meaningful problems. I am committed to continuous learning
+          and growth as I work towards this objective.
+        </p>
+      </section>
+      <section id="projects">
+        <header>
+          <h2>Projects Showcase</h2>
+        </header>
+        <p>
+          This section showcases my journey through the CodeYourFuture program,
+          featuring exercises and projects from day one to completion.
+          Each module reflects my growth as a developer, highlighting the skills
+          and concepts I have mastered along the way. I will be updating this section
+          regularly to share my progress and the projects that demonstrate my
+          dedication to continuous learning and improvement in coding. Join me
+          as I transform challenges into opportunities for growth!
+        </p>
+        </section>
+        <section class="projects">
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./hometown.png" alt="a mountain with text overlay">
+              <div class="overlay">
+                <h4><a href="https://luke-hometown-homepage.netlify.app" target="_blank">Hometown Homepage</a></h4>
+                <p>This is a homepage for my hometown that showcases various things which tourist can do during their visit.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./birthday.png" alt="a red background image with a birthday message">
+              <div class="overlay">
+                <h4><a href="https://luke-birthday-gift.netlify.app" target="_blank">Birthday Card</a></h4>
+                <p>A beautiful and unique digital birthday card with birthday surprises hidden. Hove over to open the surprise gifts. </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./karel.png" alt="white background image with a karel that filled all the rows">
+              <div class="overlay">
+                <h4><a href="https://codeinplace.stanford.edu/public/ide/a/fillkarel" target="_blank">Fill Karel</a></h4>
+                <p>Fill Karel is a python projects that incorporates different functions to make Karel fill all the rows with a beeper. This is part of the Code in Place python course.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./cs50p1.png" alt="a picture with a python logo">
+              <div class="overlay">
+                <h4><a href="https://github.com/Luke-Manyamazi/My-CS50P-Projects" target="_blank">CS50P - Python Projects</a></h4>
+                <p>Checkout all the python projects I completed with Harvard's CS50P Intro to Python Course.</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./freecodecamp1.png" alt="freecodecamp logo">
+              <div class="overlay">
+                <h4><a href="https://www.freecodecamp.org/certification/iSirLuke/responsive-web-design" target="_blank">FreeCodeCamp</a></h4>
+                <p>Here you will get to view the projects and the code for my FreeCodeCamp Developer Certification - Responsive Web Design</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-item">
+            <div class="project-image">
+              <img src="./form-control.png" alt="a picture os a form designed with html and css">
+              <div class="overlay">
+                <h4>Product Pick Form</h4>
+                <p>This is a sample product pick-up form that I designed with html and css.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section id="contact">
+        <header>
+          <h2>Contact me</h2>
+        </header>
+        <p>
+          I would love to connect! Feel free to reach out through any of the following platforms:
+          <ul id="contact_links">
+            <li><a href="https://github.com/Luke-Manyamazi" target="_blank">Github:</a><br>
+              Explore my projects and contributions to open-source.</li>
+
+              <li><a href="https://www.linkedin.com/in/luke-manyamazi-5632b9331/" target="_blank">LinkedIn:</a><br>
+                Let us connect and network!</li>
+
+                <li><a href="https://wa.me/27621071140" target="_blank">WhatsApp:</a><br>
+                  For quick conversations and collaborations.</li>
+
+                  <li><a href="https://codeyourfutur-yov6609.slack.com/team/U07PGCD7ZST" target="_blank">Slack:</a><br>
+                    Reach out to me on Slack for project discussions or questions.</li>
+                  </ul>               
+        </p>
+              </section>
+            </main>
+            <footer>
+              <h3>
+                <a href="https://github.com/Luke-Manyamazi" target="_blank"><svg focusable="false" role="presentation"
+                  viewbox="0 0 98 96" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                  fill="currentColor" />
+                </svg>
+                Read me</a>
+              </h3>
+            </footer>
+          </body>
+
+          </html>
diff --git a/Luke-Manyamazi-Portfolio/style.css b/Luke-Manyamazi-Portfolio/style.css
@@ -0,0 +1,181 @@
+/* General Styles */
+body,
+html {
+    background-color: lightcyan;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    margin: 0;
+    height: 100%;
+    color: #414a4c;
+    font-weight: lighter;
+}
+
+main {
+    margin-left: 200px;
+    margin-right: 200px;
+}
+
+/* Hero Image and Text */
+.hero-image {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero_img.jpg");
+    height: 50vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+}
+
+.hero-text {
+    text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 2rem;
+}
+
+/* Navbar */
+.navbar {
+    text-align: right;
+}
+
+.navbar a {
+    color: white;
+    padding: 1em;
+    text-decoration: none;
+    display: inline-block;
+    margin: 0 0.5em;
+}
+
+/* Section */
+section {
+    padding: 1em 5vw;
+}
+
+.projects {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    max-width: 1200px;
+    margin: auto;
+}
+
+.project-item {
+    position: relative;
+    width: 90%;
+    max-width: 300px;
+    height: 300px;
+    overflow: hidden;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.project-item:hover .project-image img {
+    transform: scale(1.1);
+}
+
+.project-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+}
+
+.overlay {
+    position: absolute;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    color: #f1f1f1;
+    width: 100%;
+    transition: 0.5s ease;
+    opacity: 0;
+    text-align: left;
+    font-size: small;
+}
+
+.project-item:hover .overlay {
+    opacity: 1;
+}
+
+.overlay p,
+h4 {
+    padding: 1em;
+}
+
+/* Contact Section */
+#contact {
+    line-height: 1.5;
+    padding-bottom: 3em;
+}
+
+#contact_links a {
+    color: blue;
+    font-weight: bold;
+}
+
+a {
+    text-decoration: none;
+    color: white;
+}
+
+a:hover {
+    color: green;
+}
+
+footer {
+    text-align: center;
+    padding: 1em;
+    color: white;
+    background-color: #232b2b;
+
+}
+
+button {
+    width: 140px;
+    height: 40px;
+    font-size: large;
+    font-weight: bold;
+    background-color: lightcyan;
+    border: none;
+    border-radius: 5px;
+
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .hero-text {
+        font-size: 1.5rem;
+        padding: 0 1em;
+    }
+
+    .navbar a {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+
+    section {
+        padding: 1em;
+    }
+
+    .projects {
+        gap: 15px;
+    }
+
+    .project-item {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-text {
+        font-size: 1.2rem;
+    }
+
+    button {
+        width: 120px;
+        height: 35px;
+        font-size: medium;
+    }
+}