From 4c8dcee66fc7865b65cbcbf54ce9ae9b5da39cf3 Mon Sep 17 00:00:00 2001 From: Angus Townsley Date: Mon, 11 Mar 2024 14:48:41 +0000 Subject: [PATCH 1/2] core and extension completed --- index.html | 148 +++++++++++++++++++++++++++-- styles.css | 273 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 411 insertions(+), 10 deletions(-) create mode 100644 styles.css diff --git a/index.html b/index.html index dc73fbe..49b18ab 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,141 @@ - - - - - - Full Stack Portfolio - - - - + + + + + + + Full Stack Portfolio + + + +
+
+
+ +
+

Hiring A Full-Stack Developer?

+

+ I have experience with React, + NodeJS and Typescript. I would love + to work at an innovative and eco-friendly start-up + in the sustainable energy sector. +

+
+
+

ABOUT ME

+

Introduction

+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, ipsam + deleniti nesciunt vel, necessitatibus minus earum est amet voluptatem + itaque fugiat impedit similique saepe quisquam? Dolores consequatur + reprehenderit doloremque dignissimos. +
+

Technical Skills

+
    +
  • Html and CSS
    • +
  • Javascript
    • +
  • Typescript
    • +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+
+

PORTFOLIO

+
    +
  • +
    +

    Title

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores non consequatur consectetur ratione sunt sint totam + error ipsam provident voluptatum possimus commodi iste + voluptatibus perspiciatis, laudantium tenetur veniam doloremque. + Magnam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, officiis amet optio quia quae sit + maiores nisi dolore corrupti neque ipsa aliquam ea soluta quisquam pariatur! Eos sed iure quidem? Lorem + ipsum dolor sit amet consectetur adipisicing elit. Laborum, quasi. Reprehenderit debitis pariatur tempore + laudantium explicabo dolore dolorem dolores aspernatur dicta porro quidem hic eveniet, sunt quia velit! + Dolores, excepturi. +

    + READ MORE + Github Repo +
    +
    • +
  • +
    +

    Title

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores non consequatur consectetur ratione sunt sint totam + error ipsam provident voluptatum possimus commodi iste + voluptatibus perspiciatis, laudantium tenetur veniam doloremque. + Magnam. +

    + READ MORE + Github Repo +
    +
    • +
  • +
    +

    Title

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Asperiores non consequatur consectetur ratione sunt sint totam + error ipsam provident voluptatum possimus commodi iste + voluptatibus perspiciatis, laudantium tenetur veniam doloremque. + Magnam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores non consequatur consectetur + ratione sunt sint totam error ipsam provident voluptatum possimus commodi iste voluptatibus perspiciatis, + laudantium tenetur veniam doloremque. Magnam. +

    + READ MORE + Github Repo +
    +
    • +
+
+ +
+

Experience

+

Job Title

+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, ipsam + deleniti nesciunt vel, necessitatibus minus earum est amet voluptatem + itaque fugiat impedit similique saepe quisquam? Dolores consequatur + reprehenderit doloremque dignissimos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quos libero + magnam porro, placeat officia recusandae non commodi totam omnis dolorem adipisci earum, suscipit est nulla! + Alias ipsa culpa earum? Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, nam omnis quibusdam + rem porro deleniti veniam nisi, consequatur pariatur, at neque dolorem perspiciatis ex itaque ratione nihil ab. + Numquam, reiciendis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, perspiciatis nemo aspernatur + aliquid praesentium rem esse corporis odio inventore impedit autem architecto illo, maiores error animi natus? + Animi, sit non. +
+

Job Title

+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, ipsam + deleniti nesciunt vel, necessitatibus minus earum est amet voluptatem + itaque fugiat impedit similique saepe quisquam? Dolores consequatur + reprehenderit doloremque dignissimos. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est repudiandae + mollitia minus dolorum deserunt consequatur cumque! Culpa eaque pariatur in vitae odio explicabo nisi, aperiam, + quidem veniam error fugit eum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit velit quaerat in + dolores ipsa nam consectetur esse quam repellendus alias, corporis nihil maxime distinctio, iusto a minus at qui + aut? +
+
+ +
© Angus Townsley
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..eaf2df6 --- /dev/null +++ b/styles.css @@ -0,0 +1,273 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; + scroll-behavior: smooth; + } + main { + width: 100vw; + height: 100vw; + } + a { + text-decoration: none; + } + em{ + font-style: italic; + text-decoration: underline; + } + + .top_page { + background-color: #4eb6ac; + display: grid; + grid-template-rows: 2fr 1fr; + align-content: left; + color: White; + width: 100vw; + height: 100%; + border-bottom: 10px solid black; + text-align: center; + align-items: center; + justify-items: center; + line-height: 1.5; + } + .top_bar { + grid-area: nav_bar; + color: White; + background-color: #4eb6ac00; + display: grid; + align-content: center; + grid-template: "name navigation" / 1.5fr 1fr; + grid-gap: 30vw; + width: 100vw; + height: 10vw; + padding: 20px; + border-top: 10px solid black; + position: fixed; + } + .page_links { + grid-area: navigation; + grid-gap: 20px; + text-align: center; + align-items: center; + align-content: right; + padding: 10px; + width: auto; + display: inline-block; + display: grid; + list-style-type: none; + grid-template: "About Portfolio Experience" /90px 90px 90px; + } + .page_links .nav { + background-color: #e5ffff; + border-radius: 10px; + color: #4eb6ac; + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; + } + .page_links a { + color: #4eb6ac; + } + .top_bar h1 { + grid-area: name; + text-align: left; + font-size: 2.5rem; + padding: 10px; + display: inline-block; + width: auto; + background-color:#4eb6ac4f ; + width: fit-content; + border-radius: 40px; + } + + .top_page h1 { + font-size: 7rem; + text-align: left; + padding: 20px; + width: auto; + max-width: 11ch; + } + .top_page p { + max-width: 55ch; + text-align: left; + padding: 15px; + } + .top_page strong{ + color:#1d313a; + } + + .top_page em{ + text-decoration: none; + } + .aboutme { + height: auto; + display: grid; + grid-gap: 10px 0; + align-items: center; + justify-content: center; + text-align: left; + line-height: 1.5; + background-color: white; + border-bottom: 10px solid black; + } + .aboutme article { + max-width: 55ch; + } + + .aboutme, .experience{ + padding: 10px; + } + + .aboutme h1 { + text-align: center; + } + .technical_skills { + display: grid; + align-items: center; + margin: 30px; + grid-gap: 5px 20px; + grid-template-columns: repeat(2, 1fr); + width: auto; + justify-items: left; + } + .portfolio { + height: auto; + background-color: #ffebee; + border-bottom: 10px solid black; + display: grid; + } + + .portfolio h1 { + text-align: center; + padding: 5px; + margin: 20px; + font-size: 2.5rem; + display: inline-block; + width: auto; + } + + .portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + padding: 0 50px; + grid-gap: .5rem; + list-style-type: none; + line-height: 1.5; + margin-bottom: 20px; + justify-items: center; + } + .portfolio-grid li{ + max-width: 300px; + min-width: 200px; + + } + .portfolio-item { + background-color: white; + padding: 20px; + border: 7px solid #ae1457; + border-radius: 5px; + display: grid; + grid-template-rows: 30px 1fr 30px 20px; + text-align: left; + gap: 1rem; + max-width: 55ch; + height: 100%; + } + .portfolio-item .read_more { + color: white; + background-color: #ae1457; + display: grid; + justify-self: center; + place-items: center; + width: 100px; + border-radius: 5px; + } + + .portfolio-item .github { + text-align: center; + text-decoration: underline; + color: #ae1457; + } + .portfolio-item .read_more a { + text-decoration: none; + } + .experience { + height: auto; + display: grid; + grid-gap: 10px 0; + align-items: center; + justify-content: center; + text-align: left; + line-height: 1.5; + background-color: white; + border-bottom: 10px solid black; + } + .experience h1 { + text-transform: uppercase; + text-align: center; + } + .experience article { + max-width: 55ch; + } + footer { + background-color: #1d313a; + color: white; + height: fit-content; + text-align: left; + padding: 1rem 2rem; + font-weight: 500; + } + @media screen and (max-width: 980px) { + .top_bar .page_links { + display: none; + } + } + + @media screen and (max-width: 820px) { + .top_bar h1{ + font-size:1.6rem; + } + } + + @media screen and (max-width: 640px) { + .top_page h1 { + font-size: 5rem; + padding: 2px; + } + } + @media screen and (max-width: 584px) { + .top_bar h1 { + font-size: 1.5rem; + padding: 1px; + } + } + @media screen and (max-width: 511px) { + .top_bar h1 { + font-size: 1rem; + padding: 1px; + } + + .top_page h1 { + font-size: 4rem; + padding: 1px; + } + } + + @media screen and (max-width: 383px) { + .top_page h1 { + font-size: 3rem; + padding: 1px; + } + } + + @media screen and (max-width: 280px) { + .top_page h1 { + font-size: 2rem; + padding: 1px; + } + .portfolio h1 { + font-size: 2rem; + padding: 1px; + } +} \ No newline at end of file From 676df35c75e4717eca5849890104bb71a9c17385 Mon Sep 17 00:00:00 2001 From: Angus Townsley Date: Mon, 11 Mar 2024 14:57:52 +0000 Subject: [PATCH 2/2] minor formatting and colour updates --- styles.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index eaf2df6..ef24c20 100644 --- a/styles.css +++ b/styles.css @@ -20,16 +20,17 @@ .top_page { background-color: #4eb6ac; display: grid; - grid-template-rows: 2fr 1fr; - align-content: left; + grid-auto-rows: auto; + align-content: center; color: White; width: 100vw; - height: 100%; + height: auto; border-bottom: 10px solid black; text-align: center; align-items: center; justify-items: center; line-height: 1.5; + padding: 50px 0 100px 0; } .top_bar { grid-area: nav_bar; @@ -87,11 +88,15 @@ padding: 20px; width: auto; max-width: 11ch; + color: #e5ffff; } .top_page p { max-width: 55ch; text-align: left; padding: 15px; + width: fit-content; + height: fit-content; + color: #e5ffff; } .top_page strong{ color:#1d313a;