diff --git a/README.md b/README.md
index 98549832..130a61fe 100644
--- a/README.md
+++ b/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/)
diff --git a/ameneh-portfolio2/index.html b/ameneh-portfolio2/index.html
new file mode 100644
index 00000000..62ef7983
--- /dev/null
+++ b/ameneh-portfolio2/index.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
Ameneh Keshavarz
+
+
+
+
+
About Me
+
+ 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.
+
+
The project was straightforward: creating a webpage to explain Git concepts using only HTML and CSS.
+
+ 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.
+
+
+ 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.
+
The project was precisely as described: a t-shirt order form, built using HTML and CSS.
+
+ 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.
+
+
+ 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.
+
+
+
+
+
+
diff --git a/ameneh-portfolio2/style.css b/ameneh-portfolio2/style.css
new file mode 100644
index 00000000..ec5097cb
--- /dev/null
+++ b/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;
+}
diff --git a/example-name-portfolio/index.html b/example-name-portfolio/index.html
new file mode 100644
index 00000000..954433c4
--- /dev/null
+++ b/example-name-portfolio/index.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+
+
+
+
+
+
+
My Name
+
+
+
+
+
About Me
+
+ 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?
+
This was exactly as it says: a t-shirt order form, in HTML and CSS. This text is copy-pasted.
+
+ In this project I learned a whole bunch of foundational principles
+ for front end: I learned how to structure data formally with
+ modern native form inputs, and how to validate that data client-side with HTML5
+ attributes. The brief was fairly open - the design is all mine,
+ but the Acceptance Criteria was strict: I had to deliver a perfect
+ score in Lighthouse, and meet some other validation constraints.
+
+
+ I spent a lot of time testing my code with Devtools and thinking
+ carefully about the semantics of the copy pasted DOM. I also explored the
+ Coverage evaluator and used it to improve my CSS: only delivering
+ precisely what my design needed and no excess code.
+
This was exactly as it says: a t-shirt order form, in HTML and CSS. This text is copy-pasted.
+
+ In this project I learned a whole bunch of foundational principles
+ for front end: I learned how to structure data formally with
+ modern native form inputs, and how to validate that data client-side with HTML5
+ attributes. The brief was fairly open - the design is all mine,
+ but the Acceptance Criteria was strict: I had to deliver a perfect
+ score in Lighthouse, and meet some other validation constraints.
+
+
+ I spent a lot of time testing my code with Devtools and thinking
+ carefully about the semantics of the copy pasted DOM. I also explored the
+ Coverage evaluator and used it to improve my CSS: only delivering
+ precisely what my design needed and no excess code.
+
+
+
+
+
+
+
+
+
+
Contact me
+
+ 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?
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example-name-portfolio/style.css b/example-name-portfolio/style.css
new file mode 100644
index 00000000..ec5097cb
--- /dev/null
+++ b/example-name-portfolio/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;
+}
diff --git a/index.html b/index.html
deleted file mode 100644
index 7b0d8b5a..00000000
--- a/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
-
-
-
-
-
- My Portfolio
-
-
-
-
-
-
-
-
-
-
-
-
My Name
-
-
-
-
-
About Me
-
- 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?
-
-
-
-
Projects Showcase
-
- 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?
-
-
-
-
Contact me
-
- 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?
-
+
+ +
+