diff --git a/index.html b/index.html index dc73fbe..c5fe86a 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


+ +
+ + +
+
+

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..6d5c602 --- /dev/null +++ b/style.css @@ -0,0 +1,194 @@ +* { + 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; + transition: background-color 0.3s ease +} + +.navbuttons a:hover { + background-color: #f6ffe5; +} +.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