CodeYourFuture · AFatmaa · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023 · Mar 27, 2023
diff --git a/README.md b/README.md
@@ -1,31 +1,30 @@
-# Portfolio
+# Fatma Arslantas - Portfolio
 
-Your starting portfolio, to iterate on.
+📜 Overview
 
-## Learning Objectives
+The portfolio showcases my journey as a developer, my projects, and a bit about me.
 
-- Customise the starting portfolio with your professional details
-- Iterate on your portfolio every module
-- Review your colleague's portfolio
+🖥️ Project Structure
 
-## Requirements
+The portfolio is divided into the following sections:
 
-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.
+About Me - A brief introduction to my background, interests, and skills.
+Projects Showcase - A collection of projects I’ve worked on, including descriptions and links to live demos.
+Contact Information - Details on how to reach me, including my email and LinkedIn profile.
 
-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.
+🛠️ Technologies Used
 
-## Acceptance Criteria
+HTML
+CSS
+Git
 
-- [ ] 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
+🚀 How to Run Locally
 
-## Resources
+Clone the repository:
+git clone https://github.com/AFatmaa/Portfolio
 
-- [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/)
+Open index.html in your web browser to view the portfolio locally.
+
+🤝 Contributing
+
+Feedback and contributions are welcome! If you’d like to suggest improvements or report issues, feel free to open an issue or submit a pull request.
diff --git a/example-name-portfolio/index.html b/example-name-portfolio/index.html
@@ -0,0 +1,127 @@
+<!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>My Name</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>
+          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>
+      </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">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>
+        <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>
+      </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>
diff --git a/example-name-portfolio/style.css 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;
+}