CodeYourFuture · Simphiwe-Mabuya · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/README.md b/README.md
diff --git a/.gitignore → Simphiwe-Mabuya-Portfolio/.gitignore b/.gitignore → Simphiwe-Mabuya-Portfolio/.gitignore
diff --git a/HOW-TO-GET-HELP.md → Simphiwe-Mabuya-Portfolio/HOW-TO-GET-HELP.md b/HOW-TO-GET-HELP.md → Simphiwe-Mabuya-Portfolio/HOW-TO-GET-HELP.md
diff --git a/HOW-TO-SUBMIT.md → Simphiwe-Mabuya-Portfolio/HOW-TO-SUBMIT.md b/HOW-TO-SUBMIT.md → Simphiwe-Mabuya-Portfolio/HOW-TO-SUBMIT.md
diff --git a/HOW_TO_REVIEW.md → Simphiwe-Mabuya-Portfolio/HOW_TO_REVIEW.md b/HOW_TO_REVIEW.md → Simphiwe-Mabuya-Portfolio/HOW_TO_REVIEW.md
diff --git a/Simphiwe-Mabuya-Portfolio/README.md b/Simphiwe-Mabuya-Portfolio/README.md
@@ -0,0 +1,61 @@
+# Portfolio
+
+Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help.
+
+_Keep your changes simple!_
+
+We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous cohorts, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn real branching and merging. So let's practice a different workflow now.
+
+## Learning Objectives
+
+- [ ] Branch from a branch in Git
+- [ ] PR from a branch to a branch in GitHub
+- [ ] Create a personal case study for a project
+
+## Requirements
+
+Your case study should be a short description of the project, including: the problem it solves, the technologies used, the approach taken, a link to the deployed project, and a link to the code on GitHub.
+
+Explain the problem and your solution in your own words, and don't just copy and paste the project brief. The point of a portfolio is to make _you stand out_, so write in your own voice. It's fine to choose something that you didn't work on all by yourself, but make sure you explain what part you did.
+
+## Git Ready: Putting our code in the right place
+
+The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken.
+
+1. Switch into the branch called `git checkout Module-HTML-CSS` to access this Readme
+1. From `Module-HTML-CSS`, create a new branch `git checkout -b your-name-portfolio`
+1. Make a new directory `mkdir your-name-portfolio`
+1. Move your starter files into this directory `mv index.html style.css your-name-portfolio`
+1. Change into the new directory `cd your-name-portfolio`
+1. Check you are in the right branch `git branch --show-current`
+
+## Git Set: Making changes
+
+1. Open the project in your code editor
+1. Make your changes
+1. Check your changes with `git status`
+1. Add your files to the staging area `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._
+1. Commit your changes often `git commit -m "YOUR COMMIT MESSAGE"`
+
+## Git Go: Making a pull request
+
+1. Stage your files: `git add index.html style.css` . _Remember, don't `git add .` or you could add files you don't mean to._
+1. Commit your changes `git commit -m "YOUR COMMIT MESSAGE"`
+1. Push your changes to GitHub `git push origin your-name-portfolio`
+1. Open a pull request to merge your branch into `Module-HTML-CSS` . If you have the [GitHub CLI](https://cli.github.com/manual/gh_pr_create) installed, you can do this with `gh pr create --base Module-HTML-CSS --head your-name-portfolio`. Otherwise do it in the GitHub UI or your Git client.
+
+## Acceptance Criteria
+
+- [ ] My portfolio introduces me and my work
+- [ ] The design and code is my own, not a template or tutorial (you can use this code as a starting point)
+- [ ] Each project is linked to my code on Github and the deployed project
+- [ ] I have published my professional contact information on my portfolio
+- [ ] My Accessibility and SEO scores are 100 on Lighthouse
+- [ ] My portfolio is deployed
+- [ ] I have replaced this README with one that describes my own portfolio
+
+## Resources
+
+- [Powerful Git Completion with ohmyzsh](https://github.com/ohmyzsh/ohmyzsh)
+- [GitKraken](https://www.gitkraken.com/)
+- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/)
diff --git a/Simphiwe-Mabuya-Portfolio/images/SQL-DataQuery.png b/Simphiwe-Mabuya-Portfolio/images/SQL-DataQuery.png
diff --git a/Simphiwe-Mabuya-Portfolio/images/form-controls.png b/Simphiwe-Mabuya-Portfolio/images/form-controls.png
diff --git a/Simphiwe-Mabuya-Portfolio/images/headshot.jpg b/Simphiwe-Mabuya-Portfolio/images/headshot.jpg
diff --git a/Simphiwe-Mabuya-Portfolio/images/my-city.png b/Simphiwe-Mabuya-Portfolio/images/my-city.png
diff --git a/Simphiwe-Mabuya-Portfolio/index.html b/Simphiwe-Mabuya-Portfolio/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en-gb">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Portfolio</title>
+    <meta name="description" content="The technical portfolio of trainee name"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/5869741bc8.js" crossorigin="anonymous"></script>
+
+    <style>
+      html {
+        animation: fade-in 1s;
+      }
+      @keyframes fade-in {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="style.css"
+      media="print"
+      onload="this.media='all'"
+    />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <div class="left">
+          <a href="/">Simphiwe Mabuya</a>
+        </div>
+        <div class="right">
+          <a href="https://github.com/Simphiwe-Mabuya" target="_blank">
+            <i class="fa-brands fa-github"></i>
+            <span>Github</span>
+          </a>
+
+          <a href="https://www.linkedin.com/feed/?trk=guest_homepage-basic_nav-header-signin" target="_blank">
+            <i class="fa-brands fa-linkedin"></i>
+            <span>Linkedin</span>
+          </a>
+
+          <a href="mailto: [email protected]">
+            <i class="fa-regular fa-envelope"></i>
+            <span>Email</span>
+          </a>
+        </div>
+      </nav>
+    </header>
+    <main tabindex="0">
+      <section id="about" class="hero-section">
+        <div class="text">
+        <header><h2>Hi, I'm Simphiwe</h2></header>
+        <p>
+           I am a Developer in training with CodeYourFuture and I'm an aspiring Software Developer / Data Analyst. I have recently acquired a Responsive Web Design Certificate from FreeCodeCamp, meaning I have experience with HTML and CSS. I am presently learning JavaScript plus an introduction to Python. I have a curious mind, passionate about books / reading, I enjoy playing chess and problem solving. 
+        </p>
+        <div class="links">
+          <a href="#projects">
+            <i class="fa-solid fa-code"></i>
+          <span>Projects</span> 
+          </a>
+
+          <a href="#contacts">
+            <i class="fa-solid fa-envelope"></i>
+            <span>Contacts</span>
+          </a>
+        </div>    
+      </div>
+       <div class="headshot">
+        <img src="./images/headshot.jpg" alt="Simphiwe's head-shot">
+       </div>
+      </section>
+      <section id="projects" class="proj-section">
+        <header><h2>Projects Showcase</h2></header>
+        <div class="text"><p>
+          Here are a few projects I created using HTML, CSS and some JavaScript. 
+          I also created a Data Query spreadsheet with SQL.</p></div>
+          <div class="cards">
+            <div class="card">
+              <img src="./images/my-city.png" alt="A screengrab of webpage: my city">
+              <div class="card-content">
+                <h3>My City Project</h3>
+                <p>
+                  This is a page about my city.
+                  <span>Languages Used:</span> HTML, CSS and JavaScript. </p>
+              </div>
+              <div class="btn">
+                <a href="https://simphiwe-my-city.netlify.app">View Page</a>
+              </div>
+            </div>
+
+            <div class="card">
+              <img src="./images/form-controls.png" alt="A screengrab of webpage: form-controls">
+              <div class="card-content">
+                <h3>Form Controls</h3>
+                <p>This is form controls project used for data input and validation. <br>
+                  <span>Languages Used:</span> HTML and CSS.
+                </p>
+              </div>
+              <div class="btn">
+                <a href="https://simphiwe-form-controls.netlify.app/form-controls/">View Page</a>
+              </div> 
+            </div>
+
+            <div class="card">
+              <img src="./images/SQL-DataQuery.png" alt="A screengrab for data query spreadsheet">
+              <div class="card-content">
+                <h3>SQL-Data-Query</h3>
+                <p>This a Google Sheets project, querying data with SQL. <br>
+                  <span>Languages Used:</span> SQL
+                </p>
+              </div>
+              <div class="btn">
+                <a href="https://docs.google.com/spreadsheets/d/1Tq9j9a0c1V24BsTrwvP-yGEue1Vhf1dpTw9AdteysQE/edit?usp=sharing">View Page</a>
+              </div>
+            </div>
+
+
+          </div>
+      </section>
+      <section id="contacts" class="contact-section">
+        <h2>Contact</h2>
+        <div class="group">
+          <div class="text">
+            <p>
+              If you need help building a website or you have questions, contact me.
+            </p>
+          </div>
+          <form action="#" method="post">
+            <label for="name">Name</label>
+            <input type="name" id="name" required>
+
+            <label for="email">Email</label>
+            <input type="name" id="email" required>
+
+            <label for="message">Message</label>
+            <textarea id="message" cols="30" rows="10" placeholder="Your message"></textarea>
+
+            <button type="submit">Send Message</button>
+          </form>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <p>&COPY; 2024 Webpage by Simphiwe Mabuya </p>
+    </footer>
+  </body>
+</html>