London| Saba Farjamfard|Module-Structuring-and-Testing-Data | Sprint 3 |week 3| portfolio

README.md

@@ -1,31 +1,61 @@
 # Portfolio
 
-Your starting portfolio, to iterate on.
+Module 2 iteration of your portfolio. We're adding a new case study for another project you've worked on. You can choose anything.
+
+_Keep your changes simple!_
+
+We are going to use the same Git workflow as Module 1, which you can read by checking out the `Module-HTML-CSS` branch or by going to the [tree view on Github](https://github.com/CodeYourFuture/Portfolio/tree/Module-HTML-CSS).
 
 ## Learning Objectives
 
-- Customise the starting portfolio with your professional details
-- Iterate on your portfolio every module
-- Review your colleague's portfolio
+- [ ] Branch from a branch in Git
+- [ ] Merge a branch into another branch in Git
+- [ ] Create a second personal case study for a project
 
 ## Requirements
 
-At Code Your Future, we expect everyone to graduate with a unique professional portfolio. Begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP.
+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: Getting our code together
+
+Our changes have disappeared! That's because we made them on another branch. We're going to grab those changes and put them on our new branch.
+
+1. Checkout the `Module-JS-1` branch `git checkout Module-JS-1`
+1. Make a new branch `git checkout -b your-name-portfolio-js-1`
+1. Merge your changes from your last branch `git merge your-name-portfolio`
+
+Whoa! Did your README disappear? That's because you overwrote it. But you can access specific files in the terminal any time you like, like this: `git checkout Module-HTML-CSS README.md`. Or you can do this in your Git GUI.
+
+## 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"` Do not wait until your PR is done to commit. Commit early and often.
+
+## Git Go: Making a pull request
 
-Every module, you will _iterate_ on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a Final Projects team.
+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-js1`
+1. Open a pull request to merge your branch into `Module-JS-1`. _Add a link to your deployed project in the description._
 
 ## Acceptance Criteria
 
 - [ ] My portfolio introduces me and my work
-- [ ] The design and code is my own, not a template or tutorial
+- [ ] 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
+- [ ] My portfolio is deployed and I have included the link in my pull request
 - [ ] I have replaced this README with one that describes my own portfolio
 
 ## 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/)
+- [GitHub Desktop Merge](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/keeping-your-local-repository-in-sync-with-github/syncing-your-branch#merging-another-branch-into-your-project-branch)
+- [GitKraken Merge](https://www.youtube.com/watch?v=mS8oUqqc2G8)
+- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/)
+  change html and css

example-name-portfolio/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Portfolio of Saba Farjamfard">
+  <title>Saba Farjamfard - Portfolio page</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header>
+    <div class="navbar">
+      <h1>Welcome to Saba's coding journey</h1>
+      <nav>
+        <ul>
+          <li><a href="#about-me">About Me</a></li>
+          <li><a href="#projects">Projects</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section class="hero-section">
+    <h2>Welcome to My Coding World</h2>
+    <p>Explore my work, projects, and passion for coding</p>
+    <a href="#projects" class="button">View My Work</a>
+  </section>
+
+  <main>
+    <!-- About Me Section -->
+    <section id="about-me" class="content-section">
+      <h2>About Me</h2>
+      <p>
+        Hi, I'm Saba Farjamfard, a passionate IT enthusiast and aspiring full-stack developer. With a solid foundation in web design and programming, I have completed various projects that showcase my skills and dedication. 
+      </p>
+      <p>
+        Currently, I am honing my skills at CodeYourFuture, where I work on real-world projects and collaborate with other developers. I enjoy learning new technologies and applying them to solve meaningful problems.
+      </p>
+    </section>
+
+    <!-- Projects Section -->
+    <section id="projects" class="content-section">
+      <h2>Projects</h2>
+      <div class="project-list">
+        <div class="project-item">
+          <img src="https://i.postimg.cc/ZK25tBx6/temp-Image-Mq-WVv-J.avif" alt="Birthday card">
+          <h3><a href="https://github.com/sabafarjamfard/digital-birthday-cart.git" target="_blank">Birthday Card</a></h3>
+          <h4>Birthday card</h4>
+          <p>This is a beautiful and digital birthday card with birthday surprises hidden.</p>
+        </div>
+
+        <div class="project-item">
+          <img src="https://i.postimg.cc/P5nnQmMV/temp-Image39v-LRe.avif" alt="Hometown page">
+          <h3><a href="https://github.com/sabafarjamfard/hometownwebsite.git" target="_blank">Hometown Homepage</a></h3>
+          <h4>Hometown Homepage</h4>
+          <p>This is the Homepage of my city, featuring beautiful photo with description about one of the provinces of Tehran.</p>
+        </div>
+
+        <div class="project-item">
+          <img src="https://i.postimg.cc/3RRsx9KN/temp-Image0-Vjw-Mw.avif" alt="Form control">
+          <h3><a href="https://github.com/sabafarjamfard/Module-User-Focused-Data.git" target="_blank">Form Control</a></h3>
+          <p4>Form Control</p4>
+          <p>This is a project I designed with html and css.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="content-section">
+      <h5>Contact Me</h5>
+      <ul>
+        <li><strong>Email:</strong> <a href="mailto:[email protected]">Email</a></li>
+        <li><strong>GitHub:</strong> <a href="https://github.com/sabafarjamfard" target="_blank">GitHub</a></li>
+        <li><strong>LinkedIn:</strong> <a href="www.linkedin.com/in/saba-sabaei-2a1077327" target="_blank">LINKEDIN</a></li>
+      </ul>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 Saba Farjamfard. All rights reserved.</p>
+  </footer>
+</body>
+
+</html>

example-name-portfolio/style.css

@@ -0,0 +1,148 @@
+body {
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+header {
+  text-align: center;
+  padding: 20px;
+  background-color: #4CAF50;
+  color: white;
+  border-bottom: 4px solid #388E3C;
+}
+.hero-section {
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+.hero-section h2{
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+.hero-section p {
+  font-size: 1.2em ;
+  margin-bottom: 10px;
+}
+
+.navbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #333; 
+  padding: 10px;
+}
+
+.navbar ul {
+  display: flex;
+  justify-content: center;
+  gap: 20px; 
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.navbar li {
+  display: inline; 
+}
+
+.navbar a {
+  text-decoration: none;
+  color: white;
+  font-weight: bold;
+  padding: 5px 10px;
+  transition: color 0.3s;
+}
+
+.navbar a:hover {
+  color: #00ff00; 
+}
+
+.navbar a:hover {
+  color: #00ff00;
+}
+main {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+h5{
+  text-align: left;
+  margin-bottom: 40px;
+  padding: 20px;
+   font-family: Arial, sans-serif;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+
+
+}
+
+.project-list {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 20px auto;
+}
+
+.project-item {
+  width: 300px;
+  text-align: center;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.project-item img {
+  width: 23%;
+  height: auto;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 10px;
+}
+
+.project-item h3 {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+.project-item p {
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+footer {
+  text-align: center;
+  padding: 10px;
+  background-color: #333;
+  color: white;
+  margin-top: 20px;
+}
+
+footer a {
+  color: #4CAF50;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}