diff --git a/README.md b/README.md index 98549832..6a5e194f 100644 --- a/README.md +++ b/README.md @@ -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. \ No newline at end of file diff --git a/index.html b/example-name-portfolio/index.html similarity index 64% rename from index.html rename to example-name-portfolio/index.html index 7b0d8b5a..b76f5bbc 100644 --- a/index.html +++ b/example-name-portfolio/index.html @@ -59,12 +59,37 @@

My Name

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

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/matthewlaw-portfolio/background.jpg b/matthewlaw-portfolio/background.jpg new file mode 100644 index 00000000..8b911beb Binary files /dev/null and b/matthewlaw-portfolio/background.jpg differ diff --git a/matthewlaw-portfolio/index.html b/matthewlaw-portfolio/index.html new file mode 100644 index 00000000..fd429b42 --- /dev/null +++ b/matthewlaw-portfolio/index.html @@ -0,0 +1,115 @@ + + + + + + My Portfolio + + + + + + + + + + + + + + +
+

+ +
+
+
+ background image of a book, cup, coffee maker, tablet and magazines scatters around a table +
+ Hello; + I'm Matthew. I am Learner Developer. + + + +
+
+ +
+
+

About Me

+

+ I craft seamless digital experiences that connect with users by combining design and technology. +

+
+
+

Projects Showcase

+
+

+ Welcome to London +

+

+ A simple travel guide to showcase the highlights of my hometown london. +

+
+ +
+

+ T-shirt order form +

+

+ A form for created for used to order their T-shirt color, T-shirt size and delivery date. +

+ +
+
+ +
+
+

Contact Me

+
+ +
+ + + + +
+ +
+
+
+
+ + + diff --git a/matthewlaw-portfolio/style.css b/matthewlaw-portfolio/style.css new file mode 100644 index 00000000..173a2132 --- /dev/null +++ b/matthewlaw-portfolio/style.css @@ -0,0 +1,218 @@ +/* Design tokens */ +:root { + --paper: hsla(251, 28%, 88%, 0.99); + --ink: hsla(244, 16%, 17%, 0.95); + --brand: orangered; + --font: "Raleway", system-ui, sans-serif; + --titleFont: "EB Garamond", serif; + --gap: 20px; + --container: clamp(280px, calc(100vw - calc(var(--gap) * 2)), 1180px); + --backgroundColor: rgba(0, 0, 0, 0.8); +} +/* General Styles */ +html, +body { + scroll-behavior: smooth; + background: #F8EDED; + color: var(--ink); + font-family: var(--font); +} + +body { + display: grid; + margin: auto; + min-height : 100vh; +} + +.container .title { + text-align: center; + font-size: 24px; + position: relative; + font-family: var(--font); +} + +.container .sections { + padding: 0px 12%; +} + +.title .text span:first-child { + font-family: var(--titleFont); + font-size: 210px; + line-height: 1.1em; + text-shadow: 3px 3px 7px white; +} + +.title img { + width: 100%; + filter: blur(6px); + -webkit-filter: blur(6px); +} + +.title .text { + display: flex; + flex-flow: column; + position: absolute; + top: 0; + left: 0; + text-align: center; + width: 100%; + margin-top: 10%; +} + +section { + margin-top: 60px; + scroll-margin-top: 130px; + text-align: center; +} + +a#down-arrow { + color: var(--backgroundColor); + margin-top: 20px; +} +a:not(#down-arrow) { + color: white; + text-decoration: none; +} + +a:not(#down-arrow):hover, +a:focus { + color: var(--brand); + transform: scale(1.2)translateY(-10px); +} + +.project-container { + margin-bottom: 30px; +} + +/* Site header and navigation */ +/* This means, all header children within a body tag */ +body > header { + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + left: 0; + padding: 15px 12%; + color: white; + background: var(--backgroundColor); + backdrop-filter: blur(10px); + z-index: 100; + box-shadow: 6px 8px 14px 7px rgb(0 0 0 / 21%); +} + +.logo span { + color: var(--brand); +} + +.logo { + font-size: 25px; + color: white; + font-weight: 600; + transition: 0.3s ease; +} + +.logo:hover { + color: orangered; + text-shadow: 0 0 25px orangered, + 0 0 50px orangered; + transform: scale(1.1); +} + +nav ul { + display: flex; + list-style: none; + gap: var(--gap); +} + +::-webkit-scrollbar { + width: 15px; +} +::-webkit-scrollbar-thumb { + background-color: orangered; +} +::-webkit-scrollbar-track { + background-color: rgba(0, 0, 0, 0.606); + width: 50px; +} + +/* Text readability */ +section p { + line-height: 1.5; + font-size: 18px; +} + +/* Form */ +.contact-form h2 { + text-align: center; + margin-top: 3em; + margin-bottom: 1em; + font-size: 36px; +} +.contact-form form { + max-width: 50em; + margin: 1rem auto; + text-align: center; + margin-bottom: 3em; +} +.contact-form form .input-box { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.contact-form form .input-box input, +.contact-form form textarea { + width: 100%; + padding: 1.5em; + font-size: 14px; + color: black; + background: white; + border-radius: .8rem; + margin: 1rem 0; + resize: none; +} +.contact-form form .btn{ + margin-top: 2em; +} + +/* Buttons */ +button { + width: 150px; + background: var(--backgroundColor); + color: white; + height: 40px; + border: 0px; +} + +button:hover { + cursor: pointer; + background: var(--brand); + transform: scale(1.2); + transition: transform 0.2s ease-out; +} + +.btn { + padding: 15px 28px; + background-color: black; + color: white; + border: 2px solid transparent; + border-radius: 8px; + font-size: 14px; + letter-spacing: 1px; + font-weight: 600; + transition: 0.3s ease; + cursor: pointer; +} +.btn:hover { + background-color: white; + color: black; + border: 2px solid black; +} + +footer { + background: var(--backgroundColor); + color: white; + text-align: center; + padding: 2rem; +} \ No newline at end of file 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; -}