CYF London 11 | Nadika Zavodovska | Structuring-and-Testing-Data | Week 3

README.md

@@ -1,31 +1,28 @@
-# Portfolio
+# Nadika Zavodovska's Portfolio
 
-Your starting portfolio, to iterate on.
+Welcome to my portfolio! This repository showcases my web development projects and skills.
 
-## Learning Objectives
+## Live Demo
+[Visit the Live Portfolio](https://nadika-zavodovska-portfolio.netlify.app/)
 
-- Customise the starting portfolio with your professional details
-- Iterate on your portfolio every module
-- Review your colleague's portfolio
+## Features
+- Project showcase with images and descriptions
+- Responsive design
+- User-friendly navigation
+- Integration with GitHub for version control
 
-## Requirements
+## Technologies Used
+- HTML
+- CSS
+- Web design
+- GitHub Pages or Netlify for deployment
 
-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.
+## Installation
+To view the project locally, clone the repository:
+git clone https://github.com/nadika-zavodovska/Portfolio.git
 
-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.
+## Usage
+Open index.html in your web browser to see the portfolio.
 
-## Acceptance Criteria
-
-- [ ] My portfolio introduces me and my work
-- [ ] The design and code is my own, not a template or tutorial
-- [ ] 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
-
-- [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/)
+## Contribution
+Feel free to fork this repository and submit pull requests.

index.html → example-name-portfolio/index.html

@@ -59,12 +59,37 @@ <h1>My Name</h1>
       </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>
+        <ul class="showcase">
+          <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>This was exactly as it says: a t-shirt order form, in HTML and CSS. This text is copy-pasted.</p>
+            <p>
+              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 <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validate that data client-side</a> 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 <a href="https://developer.chrome.com/docs/lighthouse/overview/">Lighthouse</a>, and meet some other validation constraints.
+            </p>
+            <p>
+              I spent a lot of time testing my code with <a href="https://developer.chrome.com/docs/devtools/">Devtools</a> and thinking
+              carefully about the semantics of the copy pasted DOM. I also explored the <a href="https://developer.chrome.com/docs/devtools/coverage/">
+              Coverage</a> evaluator and used it to improve my CSS: only delivering
+              precisely what my design needed and no excess code.
+            </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>
+        </ul>
       </section>
       <section id="contact">
         <header><h2>Contact me</h2></header>

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