From 1123c42b44c1b5c5cc32de1d39ec73017caa18ad Mon Sep 17 00:00:00 2001 From: Will Baxter Date: Mon, 11 Mar 2024 21:03:14 +0000 Subject: [PATCH 1/2] Completed layout, links, and responsiveness --- index.html | 68 ++++++++++++++++++ project1.html | 1 + project2.html | 1 + project3.html | 1 + style.css | 191 ++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 262 insertions(+) create mode 100644 project1.html create mode 100644 project2.html create mode 100644 project3.html create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..a0e160f 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,74 @@ Full Stack Portfolio +
+ + +
+
+

Hiring A
Full-Stack
Developer?


+

I have experience with React, NodeJS, 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. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!


+

Technical Skills


+
    +
  • HTML & CSS
    • +
  • Javascript
    • +
  • Typescript
    • +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+ + +
+
+

PORTFOLIO


+
+
+

Project 1


+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!


+ READ MORE
+ GitHub Repo +
+
+

Project 2


+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!


+ READ MORE
+ GitHub Repo +
+

Project 3


+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam perspiciatis maxime aliquid qui veritatis iste id omnis eos, mollitia tenetur dolorum explicabo, officia, iusto eius! Totam consequuntur asperiores reiciendis quam!


+ READ MORE
+ GitHub Repo +
+
+
+
+
+

EXPERIENCE

+
+

Job Title


+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!


+

Job Title


+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi assumenda similique laboriosam pariatur voluptates ut. Distinctio suscipit sunt asperiores debitis libero? Facere laudantium nostrum beatae accusantium aspernatur ipsum rem a?Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ut ducimus nobis quae quo rem itaque mollitia doloribus necessitatibus? Quaerat, autem. Sint possimus accusantium, facere accusamus quos commodi! Veritatis, quis!


+
+
+ \ No newline at end of file diff --git a/project1.html b/project1.html new file mode 100644 index 0000000..9e6f17d --- /dev/null +++ b/project1.html @@ -0,0 +1 @@ +This is where you'll find all info on project 1 \ No newline at end of file diff --git a/project2.html b/project2.html new file mode 100644 index 0000000..ac3397b --- /dev/null +++ b/project2.html @@ -0,0 +1 @@ +This is where you'll find all info on project 2 \ No newline at end of file diff --git a/project3.html b/project3.html new file mode 100644 index 0000000..f249ace --- /dev/null +++ b/project3.html @@ -0,0 +1 @@ +This is where you'll find all info on project 3 \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..dd68618 --- /dev/null +++ b/style.css @@ -0,0 +1,191 @@ +* { + margin: 0; + box-sizing: border-box; + font-family: sans-serif +} + + +.container { + grid-auto-flow: rows; + background-color:white; +} + +a { + text-decoration: none; + color: inherit; +} + +.black-text { + text-decoration: none; + color: black; +} + +.underlined-italic { + text-decoration-color: black; + font-style: italic; +} + +hr { + background-color: black; + height:7px; + border: none; +} + +nav { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + background-color:#4EB6AC +} + + +nav .name { + font-weight: bold; + display: grid; + width: auto; + align-items:center; + padding-left: 1rem; + color: #E5FFFF +} + +nav .navbuttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + padding: 10px; + text-align: center; + place-self: end; + gap: 30px; + color: #4EB6AC; +} + +.navbuttons a { + padding: 5px; + border-radius: 5px; + width: 100px; + background-color: #E5FFFF +} + + +.container .hero { + margin-inline: auto; + padding-top: 100px; + padding-bottom: 100px; + background-color:#4EB6AC; + +} + +.hero h1, .hero p { + width: 420px; + color: #E5FFFF; + margin-inline: auto; +} + +h2 { + text-align: center; +} + +.about-me { + background-color: white; + padding-top: 30px; + padding-bottom: 30px; + width: 420px; + margin-inline: auto; +} + +.about-me ul { + column-count: 2; +} + +.portfolio { + padding-top: 30px; + padding-bottom: 30px; + background-color: #FFEBEE; +} + +.portfolio .project-container { + display: grid; + grid-template-columns: repeat(3, minmax(200px, 300px)); + justify-content: center; +} + +.project-container div { + font-size: 12px; + border: 5px solid #AE1557; + border-radius: 4px; + box-shadow: 5px 5px 5px rgba(102, 102, 102, 0.366) ; + padding: 15px; + background-color: white; + margin-left: 15px; + margin-right: 15px; +} + +.portfolio-button { + text-align: center; + background-color: #AE1557; + display: flex; + justify-content: center; + align-items: center; + padding:5px; + font-weight: bold; + color: white; + border-radius: 5px; + +} + +.portfolio .git-button { + color: #AE1557; + display: flex; + justify-content: center; + text-decoration: underline; +} + +.experience { + margin-top: 30px; + margin-bottom: 30px; + width: 420px; + margin-inline: auto; +} + +footer { + width: 100%; + font-size: 12px; + height: 40px; + background-color: #1D303A; + padding-left: 30px; + justify-content: center; + line-height: 40px; + color: #E5FFFF +} + +@media screen and (max-width: 576px) { + nav .navbuttons { + display: grid; + grid-template-columns: unset; + grid-template-rows: 1fr 1fr 1fr; + text-align: center; + gap: 10px; + padding-top: 10px; + padding-bottom: 10px; + } + + nav .name { + display: grid; + width: auto; + text-align: center; + align-items: center; + } + + .portfolio .project-container { + all: unset; + display: grid; + width: 390px; + grid-template-rows: repeat(3, 190px); + gap: 10px; + margin-inline: auto; + } + + .about-me ul { + column-count: 3; + } + +} \ No newline at end of file From 23e34e43c050ad2a0334a28e74b81592d9388135 Mon Sep 17 00:00:00 2001 From: Will Baxter Date: Mon, 11 Mar 2024 21:14:50 +0000 Subject: [PATCH 2/2] Debug, touch ups, fixes --- index.html | 2 +- style.css | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a0e160f..c5fe86a 100644 --- a/index.html +++ b/index.html @@ -67,7 +67,7 @@

Project 2


-
+

EXPERIENCE


Job Title


diff --git a/style.css b/style.css index dd68618..6d5c602 100644 --- a/style.css +++ b/style.css @@ -62,10 +62,13 @@ nav .navbuttons { padding: 5px; border-radius: 5px; width: 100px; - background-color: #E5FFFF + background-color: #E5FFFF; + transition: background-color 0.3s ease } - +.navbuttons a:hover { + background-color: #f6ffe5; +} .container .hero { margin-inline: auto; padding-top: 100px;