-
-
Notifications
You must be signed in to change notification settings - Fork 130
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
West-Midlands-Community | Matthew Law | Module-User-Focused-Data | WEEK 3 #108
Open
matthewlawpixel
wants to merge
10
commits into
CodeYourFuture:main
Choose a base branch
from
matthewlawpixel:matthewlaw-portfolio
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+516
−94
Open
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
03171c5
add an example project
SallyMcGrath 2b589e7
annotated styles for example page
SallyMcGrath 23da459
A new challenge for module 1
SallyMcGrath 413820e
move files into dir as per readme
SallyMcGrath 15d60bf
clarify they may use THIS code
SallyMcGrath 5876e29
Adding starter files
moneyinthesky 699bdd8
Initial Commit
rawrnoodles fd76bb4
Changed to fit SEO and Accessibility standards
rawrnoodles a144aad
Added meta descriptions back
rawrnoodles 6c5c613
Changed the readme to a short description for my portfolio
rawrnoodles File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1 @@ | ||
| # Portfolio | ||
|
|
||
| Your starting portfolio, to iterate on. | ||
|
|
||
| ## Learning Objectives | ||
|
|
||
| - Customise the starting portfolio with your professional details | ||
| - Iterate on your portfolio every module | ||
| - Review your colleague's portfolio | ||
|
|
||
| ## 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. | ||
|
|
||
| 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. | ||
|
|
||
| ## 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/) | ||
| This is my professional portfolio used showcase my web projects and is a platform for clients to contact me. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| <!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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;800&display=swap"/> | ||
| <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=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <h1><a href="#name" class="logo"><span>Matt</span>hew</a></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 class="container" tabindex="0"> | ||
| <div class="title"> | ||
| <img src="background.jpg" alt="background image of a book, cup, coffee maker, tablet and magazines scatters around a table"/> | ||
| <div class="text"> | ||
| <span>Hello;</span> | ||
| <span>I'm Matthew. I am Learner Developer.</span> | ||
| <a id="down-arrow" href="#about" aria-label="continue"> | ||
| <i class="fa-solid fa-chevron-down" style="font-size:80px"></i> | ||
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="sections"> | ||
| <section id="about"> | ||
| <header><h1>About Me</h1></header> | ||
| <p> | ||
| I craft seamless digital experiences that connect with users by combining design and technology. | ||
| </p> | ||
| </section> | ||
| <section id="projects"> | ||
| <header><h2>Projects Showcase</h2></header> | ||
| <div class="project-container"> | ||
| <h2> | ||
| Welcome to London | ||
| </h2> | ||
| <p> | ||
| A simple travel guide to showcase the highlights of my hometown london. | ||
| </p> | ||
| <button onclick="location.href = 'https://matthewlawhometown.netlify.app/'">View Project</a> | ||
| </div> | ||
|
|
||
| <div class="project-container"> | ||
| <h2> | ||
| T-shirt order form | ||
| </h2> | ||
| <p> | ||
| A form for created for used to order their T-shirt color, T-shirt size and delivery date. | ||
| </p> | ||
| <button onclick="location.href = 'https://deploy-preview-256--cyf-ufd.netlify.app/form-controls/'">View Project</button> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section id="contact"> | ||
| <section class="contact-form" id="contact"> | ||
| <h2 class="contact-me">Contact Me</h2> | ||
| <form action="#"> | ||
|
|
||
| <div class="input-box"> | ||
| <input type="text" placeholder="Full Name" /> | ||
| <input type="email" placeholder="Email" /> | ||
| <input type="text" placeholder="Subject" /> | ||
| <textarea name="" id="" cols="30" rows="10" placeholder="Your Message"></textarea> | ||
| </div> | ||
| <input type="submit" value="Send Message" class="btn" /> | ||
| </form> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <h3>Get in touch with me!</h3> | ||
| <a href="[email protected]">E-mail</a> | ||
| <a href="https://hk.linkedin.com/in/matthew-law-01185a182">Linkedin</a> | ||
| </footer> | ||
| </body> | ||
| </html> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi Matthew! Your code looks great to me. However, I noticed that the README file is not very descriptive. Maybe you could add a description of each part of your portfolio there.