From 1f081b719770655be23c2e197a4888d7e8f7e002 Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 12:47:30 +0100 Subject: [PATCH 1/3] JS1 merge branch from branch New task, this time pulling changes from previous module branch. I haven't tested this yet -- am pushing up to pull down and follow the step by step. --- README.md | 51 ++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 40 insertions(+), 11 deletions(-) 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/) From 76fa8d4b568544b287441b6b458b6cd8403d626e Mon Sep 17 00:00:00 2001 From: Sally McGrath Date: Mon, 27 Mar 2023 12:48:00 +0100 Subject: [PATCH 2/3] changes from HTML-CSS no further changes, just a second project added --- example-name-portfolio/index.html | 156 ++++++++++++++++++++++++++++++ example-name-portfolio/style.css | 151 +++++++++++++++++++++++++++++ index.html | 102 ------------------- style.css | 57 ----------- 4 files changed, 307 insertions(+), 159 deletions(-) create mode 100644 example-name-portfolio/index.html create mode 100644 example-name-portfolio/style.css delete mode 100644 index.html delete mode 100644 style.css 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? +

+
+
+

Projects Showcase

+
    +
  • +

    T-Shirt Order Form

    +
    +

    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. +

    +
    + + + Screenshot of my page showing a form for ordering t-shirts +
    • +
  • +

    T-Shirt Order Form

    +
    +

    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. +

    +
    + + + Screenshot of my page showing a form for ordering t-shirts +
    • +
+
+
+

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? -

-
-
- - - diff --git a/style.css b/style.css deleted file mode 100644 index c911f90c..00000000 --- a/style.css +++ /dev/null @@ -1,57 +0,0 @@ -/* Design tokens */ -: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); -} -/* 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; -} -/* Site header and navigation */ -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 */ -section p { - line-height: 1.5; - max-width: 55ch; -} From 21e2bccb076e714b3d7d4e1b3a463dce50116cf7 Mon Sep 17 00:00:00 2001 From: Ameneh-KM Date: Tue, 19 Nov 2024 18:39:58 +0000 Subject: [PATCH 3/3] Updated Showcase Projects --- ameneh-portfolio2/index.html | 148 ++++++++++++++++++++++++++++++++++ ameneh-portfolio2/style.css | 151 +++++++++++++++++++++++++++++++++++ 2 files changed, 299 insertions(+) create mode 100644 ameneh-portfolio2/index.html create mode 100644 ameneh-portfolio2/style.css 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. + +

+
+
+

Projects Showcase

+
    +
  • +

    Wireframe

    +
    +

    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. +

    +
    + + + Screenshot of my page showing a form for ordering t-shirts +
    • +
  • +

    T-Shirt Order Form

    +
    +

    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. +

    +
    + + + Screenshot of my page showing a form for ordering t-shirts +
    • +
+ +
+
+

Contact me

+ +
+
+ + + 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; +}