CYF_LONDON | DONARA BLANC | PORTFOLIO

README.md

@@ -1,23 +1,53 @@
 # Portfolio
 
-Your starting portfolio, to iterate on.
+Module 1 iteration of your portfolio. We've got a lot of new concepts here so you might want to work through this in your study group, or bring to class for help.
+
+_Keep your changes simple!_
+
+We are using a different type of pull request workflow from your main coursework. We're doing this because we need lots of practice with Git to be ready to contribute to shared repos like professional developers. In previous cohorts, we only opened PRs to main all the way through the course, and then in Final Projects it was really hard to learn real branching and merging. So let's practice a different workflow now.
 
 ## 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
+- [ ] PR from a branch to a branch in GitHub
+- [ ] Create a 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: Putting our code in the right place
+
+The instructions here are given for the command line, but you could just as easily do this in GitHub Desktop or GitKraken.
+
+1. Switch into the branch called `git checkout Module-HTML-CSS` to access this Readme
+1. From `Module-HTML-CSS`, create a new branch `git checkout -b your-name-portfolio`
+1. Make a new directory `mkdir your-name-portfolio`
+1. Move your starter files into this directory `mv index.html style.css your-name-portfolio`
+1. Change into the new directory `cd your-name-portfolio`
+1. Check you are in the right branch `git branch --show-current`
+
+## 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"`
+
+## 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`
+1. Open a pull request to merge your branch into `Module-HTML-CSS` . If you have the [GitHub CLI](https://cli.github.com/manual/gh_pr_create) installed, you can do this with `gh pr create --base Module-HTML-CSS --head your-name-portfolio`. Otherwise do it in the GitHub UI or your Git client.
 
 ## 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
@@ -26,6 +56,6 @@ Every module, you will _iterate_ on your portfolio, adding a new project and imp
 
 ## 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/)
+- [Powerful Git Completion with ohmyzsh](https://github.com/ohmyzsh/ohmyzsh)
+- [GitKraken](https://www.gitkraken.com/)
+- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens/)

donara-blanc-portfolio/index.html

@@ -0,0 +1,123 @@
+<!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>Donara BLANC</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>
+          Hello, I'm Donara Blanc, a learner at CYF introductory course to programming, studying HTML, CSS, Python basics and Javascript.
+        </p>
+      </section>
+      <section id="projects">
+        <header><h2>Projects Showcase</h2></header>
+        <p>
+          So far, I have worked on projects involving static html such as:
+          <ul>
+            <li>
+                <a href="https://donara-hometownweb.netlify.app/" target="_blank">Hometown Page</a>
+                <p>I worked on this project to showcase my current hometown London and what you can do during weekend</p>
+            </li>
+            <li>
+              <a href="http://127.0.0.1:5501/Form-Controls/index.html" target="_blank">Form Controls</a>
+              <p>In this project, I created a form for T-Shirts with dropdown lists, name and surname inputs, color selection and dates</p>
+            </li>
+            <li>
+              <a href="https://wireframe-donara.netlify.app/" target="_blank">Git intoduction</a>
+              <p>In this project, I used wireframe to build a webpage on Git essentials.</p>
+            </li>
+            <li>
+              <a href="https://businesscarddonara.netlify.app/Business Card" target="_blank">Business Card</a>
+              <p> This project was one of the first I built using scrimba instructions to introduce myself.</p>
+              </li>
+        </ul>
+
+          </ul>
+
+          <a href="https://github.com/donarbl" target ="_blank">Projects are available on github</a>
+        </p>
+      </section>
+      <section id="contact">
+        <header><h2>Contact me</h2></header>
+        <ul class="contact-me">
+          <li>
+            <a href="mailto:[email protected]">Email</a>
+          </li>
+          <li>
+            <a href="tel:+33642164217">Phone</a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com/in/donarablanc">LinkedIn</a>
+          </li>
+        </ul>
+      </section>
+    </main>
+    <footer>
+      <h3>
+        <a href="https://github.com/donarbl"></a>
+          ><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>
+          Follow me</a
+        >
+      </h3>
+    </footer>
+  </body>
+</html>

donara-blanc-portfolio/style.css

@@ -0,0 +1,58 @@
+/* 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;
+}
+a {font-weight: bold;}

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>