CYF-ITP-South Africa | Serna Malala| Portfolio

README.md

@@ -1,61 +1,37 @@
-# Portfolio
+# Serna Malala - 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.
+Welcome to my portfolio! This is where I showcase my journey, projects, and skills as I grow as a Software Developer.
 
-_Keep your changes simple!_
+## About Me
 
-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.
+Hello, I'm Serna Malala, an aspiring Software Developer with a passion for creating clean, functional, and user-friendly websites. I am currently a student at Code Your Future (CYF), where I am learning the foundational tools needed to succeed in the tech industry. 
 
-## Learning Objectives
+At the moment, my skills revolve around **HTML**, **CSS**, and **Git** for version control. While I’m still growing as a developer, I am highly motivated to continue learning, exploring new technologies, and improving my coding abilities. I believe that each project I work on helps me sharpen my skills and brings me closer to mastering software development.
 
-- [ ] Branch from a branch in Git
-- [ ] PR from a branch to a branch in GitHub
-- [ ] Create a personal case study for a project
+## Purpose of this Portfolio
 
-## Requirements
+This portfolio serves as a collection of the projects I’ve created and the work I’m most proud of. It is an evolving space where you can see my progress, starting from simple HTML and CSS projects to more complex and interactive applications in the future.
 
-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.
+As I continue to learn and expand my skill set, I will keep updating this portfolio with new projects that highlight my growth as a developer. Stay tuned for more!
 
-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.
+## Projects
 
-## Git Ready: Putting our code in the right place
+Here are a few of the projects I’ve worked on so far:
 
-The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken.
+## Serna Hometown Page
+This project showcases a simple webpage dedicated to my hometown. It demonstrates my grasp of basic HTML and CSS structure, styling, and responsive design.
 
-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`
+## Serna Wireframe Page
+A wireframe project that focuses on layout and structure, showing my understanding of design and page composition.
 
-## Git Set: Making changes
+## Serna Forms Control Page
+A page with interactive form elements, illustrating my ability to create user input fields, buttons, and other controls.
 
-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"`
+## Contact
 
-## Git Go: Making a pull request
+I’d love to connect! If you have any questions, feedback, or would just like to say hello, feel free to reach out to me:
 
-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.
+- **Email:** [sm.sernamalala@gmail.com](mailto:sm.sernamalala@gmail.com)
+- **Cellphone Number:** +27 62 683 8542
 
-## 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/)
+Thank you for visiting my portfolio. I hope to share more exciting projects as I continue on my path to becoming a professional Software Developer!

index.html → serna-malala-portfolio/index.html

@@ -3,26 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My Portfolio</title>
+    <title>My Portfolio💻</title>
     <meta
       name="description"
       content="The technical portfolio of trainee name"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- suppress FOUC-->
-    <style>
-      html {
-        animation: fade-in 1s;
-      }
-      @keyframes fade-in {
-        0% {
-          opacity: 0;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-    </style>
     <link
       rel="stylesheet"
       href="style.css"
@@ -31,14 +17,16 @@
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <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"
+      href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Varela+Round&display=swap"
       rel="stylesheet"
     />
   </head>
   <body>
     <header>
-      <h1>My Name</h1>
+      <h1>Serna Malala</h1>
       <nav>
         <ul>
           <li><a href="#about">About Me</a></li>
@@ -49,36 +37,62 @@ <h1>My Name</h1>
     </header>
     <main tabindex="0">
       <section id="about">
-        <header><h2>About Me</h2></header>
+        <header>
+          <h2>
+            About Me
+            <img
+              src="./images/woman-icon.svg"
+              class="icon"
+              alt="An icon of a woman"
+            />
+          </h2>
+        </header>
         <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
+          Hi! I'm Serna and I am an aspiring Software Developer. I am currently
+          a CYF learner and a CPUT student, learning the tools needed to master
+          software development and electronics. My software skills right now are
+          limited to HTML, CSS and a bit of JavaScript with some ability in
+          using Git but I endeavour to learn more!
         </p>
       </section>
       <section id="projects">
         <header><h2>Projects Showcase</h2></header>
-        <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
-        </p>
+        <div class="project-one">
+          <a href="https://serna-malala-hometown-page.netlify.app/"
+            ><img src="./images/hometown.png" alt="Serna Hometown page"
+          /></a>
+          <h3>Hometown Page</h3>
+        </div>
+        <div class="project-two">
+          <a href=""
+            ><img src="./images/Wireframe.png" alt="Serna Wireframe page"
+          /></a>
+          <h3>Wireframe Page</h3>
+        </div>
+        <div class="project-three">
+          <a
+            href="https://deploy-preview-249--cyf-ufd.netlify.app/form-controls/"
+            ><img src="./images/forms.png" alt="Serna Forms Control Page"
+          /></a>
+          <h3>Forms Control Page</h3>
+        </div>
       </section>
       <section id="contact">
-        <header><h2>Contact me</h2></header>
-        <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla nisi
-          excepturi quidem, eum rem doloribus quam aspernatur hic enim eligendi
-          commodi minima ullam necessitatibus, cumque blanditiis, nihil magni
-          amet consectetur?
-        </p>
+        <header><h2 class="contact">Contact me ☎️</h2></header>
+
+        <address>
+          <h3>Email:</h3>
+          <a href="mailto:sm.sernamalala@gmail.com">sm.sernamalala@gmail.com</a>
+          <br />
+          <h3>Cellphone Number:</h3>
+          <a href="tel:+27626838542">+27 62 683 8542</a>
+        </address>
       </section>
     </main>
     <footer>
       <h3>
-        <a href="https://github.com/CodeYourFuture/Portfolio"
+        <a
+          href="https://github.com/sernamalala/Portfolio/tree/serna-malala-portfolio"
           ><svg
             focusable="false"
             role="presentation"
@@ -94,7 +108,7 @@ <h3>
               fill="currentColor"
             />
           </svg>
-          Read me</a
+          PORTFOLIO READ ME</a
         >
       </h3>
     </footer>

serna-malala-portfolio/style.css

@@ -0,0 +1,100 @@
+html {
+  font-family: "Varela Round", serif;
+  height: 100%;
+  margin: 0;
+}
+body {
+  background-color: #d6e41d6c;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+nav ul {
+  display: flex;
+  justify-content: right;
+}
+nav ul li {
+  padding: 0.8em;
+  list-style: none;
+}
+nav ul li a {
+  color: black;
+  text-decoration: none;
+}
+h1 {
+  padding-left: 1em;
+}
+h1:hover,
+nav ul li a:hover {
+  color: rgb(255, 170, 11);
+}
+h2 {
+  display: flex;
+}
+h2,
+.icon {
+  height: 3em;
+  justify-content: center;
+  align-items: center;
+}
+.icon {
+  padding: 2em;
+}
+
+p {
+  width: 80%;
+  margin: 0 auto;
+}
+
+#projects {
+  display: flex;
+  flex-direction: column;
+}
+
+.project-one,
+.project-two,
+.project-three {
+  justify-content: center;
+  align-self: center;
+  width: 90%;
+  text-align: center;
+}
+
+.project-one img,
+.project-two img,
+.project-three img {
+  max-width: 100%;
+}
+
+.project-one img:hover,
+.project-two img:hover,
+.project-three img:hover {
+  border: 5px solid orange;
+}
+address,
+.contact {
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+address h3 {
+  display: inline-block;
+  padding: 0.4em;
+}
+
+footer {
+  display: flex;
+  background-color: #616706;
+}
+svg {
+  color: white;
+  padding: 1em;
+}
+
+footer a,
+footer {
+  color: white;
+  text-decoration: none;
+}