diff --git a/index.html b/index.html index dc73fbe..cf87ae1 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,125 @@ 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 startup in the sustainable energy sector. +

+
+ +
+

About Me

+

Introduction

+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia + sequi, labore placeat quaerat dicta repudiandae ipsa ea pariatur? Autem inventore + optio aut dolores ipsam at neque exercitationem? Ea, dolorem quos? +
+ +
+ +
+

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/style.css b/style.css new file mode 100644 index 0000000..bd00edf --- /dev/null +++ b/style.css @@ -0,0 +1,296 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + scroll-behavior: smooth; +} + +main { + width: 100vw; + height: 100vw; +} + +/* Top of page navigation area*/ + +.page-nav { + 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 +} + +a { + text-decoration: none; +} + +.nav-links { + grid-area: navigation; + grid-gap: 20px; + text-align: center; + align-items: center; + align-content: right; + padding: 10px; + width: auto; + display: grid; + list-style-type: none; + grid-template: "About Portfolio Experience" /130px 130px 130px; +} + +.nav-links .nav { + background-color: #e5ffff; + border-radius: 10px; + color:#4eb6ac00 #4eb6ac; + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; +} + +.nav-links a { + color: #4eb6ac +} + +/* Header/Cover area/Top */ + +.caption { + 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; + padding: 50px 0 100px 0; +} + +.caption h1 { + font-size: 7rem; + text-align: left; + padding: 20px; + width: auto; + max-width: 11ch; + color: #e5ffff; + line-height: 150px; +} + +.caption p { + max-width: 55ch; + text-align: left; + padding: 15px; + width: fit-content; + height: fit-content; + color: #e5ffff; +} + +.caption strong { + color: #1d313a; +} + +.caption em { + text-decoration: none; + font-style:italic; + text-decoration: underline black; +} + +/* About me section */ + +.about-me { + 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; + } + .about-me article { + max-width: 55ch; + } + + .about-me, .experience{ + padding: 10px; + } + + .about-me 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; + } + + /*Postfolio Section*/ + + .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 section */ + + .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*/ + + footer { + background-color: #1d313a; + color: white; + height: fit-content; + text-align: left; + padding: 1rem 2rem; + font-weight: 500; + } + + /*Make Responsive*/ + + @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; + } +} + + + + +