CodeYourFuture · EmmanuelSiziba · Nov 2, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/Hometown page - Display 2.png b/Hometown page - Display 2.png
diff --git a/Portfolio/README.md b/Portfolio/README.md
@@ -0,0 +1,23 @@
+ I'm Emmanuel , a  code your future trainee currently enrolled in a sofware enginnering  course and I am particularly interested in  webdevelopemnt 
+**My Skills:**
+* **Programming Languages: HTML,CSS , Javascript
+* 
+*
+
+**Featured Projects:**
+* **Form control Site
+* **Hometown page Website
+* 
+
+**Let's Connect!**
+* **Email:** [[email protected]]
+* **LinkedIn:** [https://www.linkedin.com/in/emmanuel-siziba-29464a1b7/]
+* **GitHub:** [https://github.com/EmmanuelSiziba]
+
+Feel free to explore my projects or reach out for a chat!
+
+## Resources
+
+- [Josh Comeau on building your early career profile](https://www.youtube.com/watch?v=OXiaEXfkAec)
+- [How to Build an Effective Dev Portfolio](https://www.joshwcomeau.com/effective-portfolio/)
+- [CYF Graduate Module](https://module-graduates.codeyourfuture.io/)
diff --git a/Portfolio/index.html b/Portfolio/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en-gb">
+
+<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 Emmanuel Siziba" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="style.css" />
+  <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=Raleway:wght@300;800&display=swap" rel="stylesheet" />
+</head>
+
+<body>
+  <header>
+    <h1>Emmanuel</h1>
+    <nav>
+      <ul>
+        <li><a href="#about">About Me</a></li>
+        <li><a href="#projects">Projects</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main tabindex="0">
+    <section id="about">
+      <header>
+        <h2>About Me</h2>
+      </header>
+      <p>
+        I'm a dedicated software engineering student at Code Your Future,
+        passionate about turning creative ideas into reality.
+        I've honed my skills in HTML, CSS, JavaScript, Python, and SQL
+        through hands-on projects.
+        When I'm not coding, I enjoy staying active on the soccer field
+        and fueling my mind with good books.
+        I thrive on collaboration and continuous learning.
+        Let's connect on LinkedIn to discuss your next project!
+      </p>
+    </section>
+    <section id="projects">
+      <header>
+        <h2>Projects Showcase</h2>
+      </header>
+      <div class="card-container">
+        <div class="card hometown-card">
+          <img src="https://media.istockphoto.com/id/1232750345/photo/colorful-bo-kaap-neighborhood-cape-town-south-africa.jpg?s=612x612&w=is&k=20&c=4GsmMORG_25e1gi23Mx87glXC0fJ8alfpb1AXUhU0sM=" alt="Hometown Page Image">
+          <div class="container">
+            <h4><b><a href="https://emmanuelsimprovedhometownpage.netlify.app/" target="_blank">Home town page</a></b></h4>
+            <p>Introduction to my hometown</p>
+            <p>Programming languages: HTML, CSS, and JavaScript</p>
+          </div>
+        </div>
+        <div class="card form-control-card">
+          <img src="https://media.istockphoto.com/id/1347632685/photo/beautiful-caucasian-female-is-using-smartphone-with-clothing-online-web-store-to-choose-and.jpg?s=1024x1024&w=is&k=20&c=ziaPOTUh1QkpmoW8yDWGTmcZ-ywqUxKWHjRW4DL9wnc=" alt="Form Control Page Image">
+          <div class="container">
+            <h4><b>Form Control</b></h4>
+            <p>Dynamic site you can use to collect and gather data from customers</p>
+            <p>Programming languages: HTML and CSS</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="contact">
+      <header>
+        <h2>Contact me on Social Media</h2>
+      </header>
+      <p>
+        <br />
+        <a href="https://www.linkedin.com/in/emmanuel-siziba-29464a1b7/" target="_blank">LinkedIn</a> |
+        <a href="https://github.com/EmmanuelSiziba" target="_blank">GitHub</a> |
+        <a href="https://www.codewars.com/users/38KODE" target="_blank">Codewars</a>
+      </p>
+    </section>
+  </main>
+  <footer>
+    <h3>
+      <a href="https://github.com/CodeYourFuture/Portfolio"><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/Portfolio/style.css b/Portfolio/style.css
@@ -0,0 +1,152 @@
+
+:root {
+  --paper: hsla(251, 28%, 88%, 0.99);
+  --ink: hsla(244, 16%, 17%, 0.95);
+  --brand: hsla(0, 79%, 63%, 0.9);
+  --font: "Raleway", system-ui, sans-serif;
+  --gap: 20px;
+  --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px);
+}
+
+
+html,
+body {
+  scroll-behavior: smooth;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font);
+}
+body {
+  display: grid;
+  margin: auto;
+  min-height: 100vh;
+  gap: var(--gap);
+  max-width: var(--container);
+}
+a,
+a:any-link {
+  color: currentColor;
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: border-color ease-in-out 0.3s;
+}
+a:hover,
+a:focus {
+  color: var(--brand);
+  border-color: currentColor;
+}
+
+
+body > header {
+  background: var(--paper);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+body > header h1 {
+  font-size: 2rem;
+  margin: 0;
+}
+body > header nav ul {
+  display: flex;
+  gap: 15px;
+}
+body > header nav ul li {
+  list-style: none;
+}
+body > header nav ul li a {
+  font-weight: bold;
+}
+
+
+#about {
+  padding: var(--gap);
+}
+#about h2 {
+  font-size: 2rem;
+}
+#about p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-top: 10px;
+}
+
+
+#projects {
+  padding: var(--gap);
+}
+#projects h2 {
+  font-size: 2rem;
+  text-align: center;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--gap);
+  flex-wrap: wrap;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 48%;  
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;   
+}
+
+.card img {
+  width: 100%;
+  height: 200px;   
+  object-fit: cover;   
+
+.container {
+  padding: 20px;
+  flex-grow: 1;   
+}
+
+.container h4 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.container p {
+  margin-top: 5px;
+  font-size: 1rem;
+  color: #666;
+}
+
+.container a {
+  color: var(--brand);
+  text-decoration: none;
+}
+
+.container a:hover {
+  text-decoration: underline;
+}
+
+
+footer {
+  text-align: center;
+  padding: 20px;
+  background: var(--paper);
+}
+
+footer h3 {
+  font-size: 1rem;
+}
+
+footer a {
+  font-weight: bold;
+}
+
+
+@media (max-width: 768px) {
+  .card {
+    width: 100%;  
+  }
+}
diff --git a/Product Pick- Display 2.png b/Product Pick- Display 2.png
diff --git a/README.md b/README.md