London| Ameneh Keshavarz |Module-Structuring-and-Testing-Data | Sprint 3| portfolio

README.md

@@ -1,31 +1,60 @@
 # 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/)

ameneh-portfolio2/index.html

@@ -0,0 +1,148 @@
+<!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 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"
+      media="print"
+      onload="this.media='all'"
+    />
+    <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>Ameneh Keshavarz</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 am currently a learner in Code Your Future (CYF) and I'm really enjoying the experience. 
+          So far, we've worked on HTML, CSS, and GitHub, learning how to commit, clone, and create branches. 
+          I am excited to start learning React and can't wait to apply my skills to create exciting projects. 
+          It's been a great journey so far, and I'm looking forward to continuing to grow as a developer.
+
+        </p>
+      </section>
+      <section id="projects">
+        <header><h2>Projects Showcase</h2></header>
+        <ul class="showcase">
+          <li class="showcase__item project">
+            <h3 class="project__heading"><a href="https://github.com/CodeYourFuture/HTML-CSS-Challenges-Solution">Wireframe</a></h3>
+            <div class="project__blurb">
+              <p>The project was straightforward: creating a webpage to explain Git concepts using only HTML and CSS.</p>
+            <p>
+              In this project, I built a webpage that introduces key Git concepts, such as "What is Git?", "Why do developers need Git?", and "What is a branch in Git?". 
+              The design and layout were created from scratch using only HTML and CSS, without relying on frameworks like Bootstrap.
+            </p>
+            <p>
+              Throughout the development, I followed best practices for version control, regularly committing and pushing updates to GitHub. 
+              This project helped me improve my ability to structure webpages effectively, style them using pure CSS, and manage my codebase with version control.           
+             </p>
+            </div>
+            <picture class="project__picture">
+              <source
+                srcset="https://picsum.photos/seed/picsum/600/600"
+                type="image/webp"
+              />
+              <img
+                src="https://picsum.photos/seed/picsum/600/600"
+                alt="Screenshot of my page showing a form for ordering t-shirts"
+              />
+          </li>
+          <li class="showcase__item project">
+            <h3 class="project__heading"><a href="https://github.com/CodeYourFuture/HTML-CSS-Challenges-Solution">T-Shirt Order Form</a></h3>
+            <div class="project__blurb">
+              <p>The project was precisely as described: a t-shirt order form, built using HTML and CSS.</p>
+            <p>
+              In this project, I learned key front-end development concepts, 
+              including how to properly structure form data using modern HTML5 inputs and validate it client-side with attributes. 
+              The brief allowed for creative freedom in design, but there were strict Acceptance Criteria: 
+              I had to achieve a perfect Lighthouse score and meet various validation requirements.
+          </p>
+            <p>
+              I spent time refining my code using DevTools, carefully considering the semantics of the DOM. 
+              I also explored the Coverage tool to optimize my CSS, 
+              ensuring the code was efficient and only included what was necessary for the design, without any excess.
+            </p>
+            </div>
+            <picture class="project__picture">
+              <source
+                srcset="https://picsum.photos/600/600"
+                type="image/webp"
+              />
+              <img
+                src="https://picsum.photos/600/600"
+                alt="Screenshot of my page showing a form for ordering t-shirts"
+              />
+          </li>
+        </ul>
+
+      </section>
+      <section id="contact">
+        <header><h2>Contact me</h2></header>
+        <ul>
+          <li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
+          <li>LinkedIn: <a href="https://www.linkedin.com/in/ameneh-keshavarz/" target="_blank">linkedin.com/in/ameneh-keshavarz</a></li>
+          <li>GitHub: <a href="https://github.com/Ameneh-Keshavarz" target="_blank">github.com/Ameneh-Keshavarz</a></li>
+        </ul>
+      </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>

ameneh-portfolio2/style.css

@@ -0,0 +1,151 @@
+/* Design tokens. 
+With tokens, stick to communicating the PURPOSE not the VALUE.
+Code should explain, not mystify, your design.
+*/
+: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);
+  /* https://web.dev/accessible-tap-targets/ */
+  --tap-target: 48px;
+  --box: clamp(280px, 50vw + 2px, 530px);
+}
+
+/* Hey look, dark mode is
+so easy with design tokens done this way
+*/
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ink: hsla(252, 38%, 92%, 0.99);
+    --paper: hsla(244, 16%, 17%, 1);
+  }
+}
+
+/* General styles */
+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;
+}
+p a:any-link {
+  border-color: var(--brand);
+}
+/* Site header and navigation 
+https://elad.medium.com/css-position-sticky-how-it-really-works-54cd01dc2d46
+*/
+body > header {
+  background: var(--paper);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+nav ul {
+  display: flex;
+  list-style: none;
+  gap: var(--gap);
+}
+
+/* Text readability 
+https://baymard.com/blog/line-length-readability 
+*/
+section p {
+  line-height: 1.5;
+  max-width: 55ch;
+}
+/* targeted resets 
+We're resetting elements with a class - ANY class 
+- on the grounds that if you added a class, 
+you added your own styles
+*/
+h3[class] {
+  margin: 0 auto 0 0;
+}
+ul[class],
+li[class] {
+  margin: 0;
+  padding: 0;
+}
+
+/* Basic image rules 
+Don't size images in css, size their containers
+Just make images take up the entire space you give them
+in every context
+*/
+svg {
+  height: 100%;
+  width: auto;
+  min-width: var(--tap-target);
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+picture {
+  height: auto;
+  overflow: hidden;
+}
+/* 
+I would start breaking this up into component files now btw! 
+*/
+.showcase {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--gap);
+}
+/*
+Here's an example of a grid layout. Notice there's no margin, padding, or sizes given on elements
+All the spacing and sizing is set on the template, and the elements
+are just slotted in.
+The little dots are how we precisely place and size white-space
+https://www.interaction-design.org/literature/article/the-power-of-white-space
+*/
+
+.project {
+  display: grid;
+  grid-template:
+    "picture picture picture" var(--box)
+    "....... ....... ......." calc(var(--gap) / 2)
+    "....... heading ......." min-content
+    "....... blurb   ......." auto /
+    var(--gap) var(--box) var(--gap);
+}
+.project__picture {
+  grid-area: picture;
+}
+.project__heading {
+  grid-area: heading;
+}
+.project__blurb {
+  grid-area: blurb;
+}