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

+ +
+
+

PORTFOLIO

+ +
+ +
+

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? +
+
+ + +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ef24c20 --- /dev/null +++ b/styles.css @@ -0,0 +1,278 @@ +* { + 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-auto-rows: auto; + align-content: center; + color: White; + width: 100vw; + 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; + 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; + 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; + } + + .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