diff --git a/Project-1.html b/Project-1.html new file mode 100644 index 0000000..4e7c5d6 --- /dev/null +++ b/Project-1.html @@ -0,0 +1,14 @@ + + + + + + + Project-1 + + + +

Project 1

+ + + \ No newline at end of file diff --git a/Project-2.html b/Project-2.html new file mode 100644 index 0000000..5b4c69d --- /dev/null +++ b/Project-2.html @@ -0,0 +1,14 @@ + + + + + + + Project-2 + + + +

Project 2

+ + + \ No newline at end of file diff --git a/Project-3.html b/Project-3.html new file mode 100644 index 0000000..82a0060 --- /dev/null +++ b/Project-3.html @@ -0,0 +1,11 @@ + + + + + + Project-3 + + +

Project 3

+ + \ No newline at end of file diff --git a/index.html b/index.html index dc73fbe..1d21cd8 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,121 @@ - - - - - - Full Stack Portfolio - - - - + + + + + + + Full Stack Portfolio + + + + +
+ +
+ +
My Name
+ +
+ + + +
+ +
+ +
+

Hiring A
Full-Stack
Developer?

+

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

+
+ +
+

ABOUT ME

+ +
+

Introduction


Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt eligendi,
+ eius corrupti voluptate necessitatibus quibusdam facilis aliquid
+ quam voluptatem magnam, ullam minima eaque dolorem inventore.
+ Voluptatibus, iusto. Alias, sint nisi? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+ Cum odit quia asperiores vero nemo sunt consequatur veritatis recusandae.
+ Iusto eos ut veniam distinctio corrupti atque natus dolores illo beatae est!

+

Technical Skills

+
+
    +
  • HTML [&] CSS
    • +
  • JavaScript
    • +
  • Typescript
    • + +
+
    +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+
+
+ +
+

PORTFOLIO

+ +
+
+

Title

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda dignissimos accusantium, doloribus + explicabo at, molestiae eligendi dolores quos repellendus obcaecati, fugiat facere. Commodi ullam + reprehenderit, reiciendis ducimus unde fugiat!

+ +

GitHub Repo

+
+
+

Title

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda dignissimos accusantium, doloribus + explicabo at, molestiae eligendi dolores quos repellendus obcaecati, fugiat facere. Commodi ullam + reprehenderit, reiciendis ducimus unde fugiat!

+ +

GitHub Repo

+
+
+

Title

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sint assumenda dignissimos accusantium, doloribus + explicabo at, molestiae eligendi dolores quos repellendus obcaecati, fugiat facere. Commodi ullam + reprehenderit, reiciendis ducimus unde fugiat!

+ +

GitHub Repo

+
+
+
+ +
+

Experience

+
+

Job Title

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, iste quasi dignissimos praesentium error + cupiditate rerum provident aut! Commodi quo placeat veniam iusto fugit officia est illo ipsum ab aliquam.

+
+
+

Job Title

+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima, iste quasi dignissimos praesentium error + cupiditate rerum provident aut! Commodi quo placeat veniam iusto fugit officia est illo ipsum ab aliquam.

+
+
+ +
My Name
+ + +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3ac4a1f --- /dev/null +++ b/style.css @@ -0,0 +1,246 @@ +* { + margin: 0; +} + +body { + /* background-color: green; */ +} + +.container { + display: grid; + height: 100vh; + /* gap: 7px; */ + grid-template: + 'top' 40px + 'main' 30% + 'about' 1fr + 'portfolio' 1fr + 'experience' 1fr + 'bottom' 35px + ; +} + + +/* ============================ Top Bar ============================ */ + +.top-bar { + grid-area: top; + height: 1fr; + display: grid; + grid-template-columns: 1fr 1fr; + background-color: #4eb6ac; +} + +.name { + padding: 10px; + color: #ecffff; + font-size: 28px; + +} + +.links { + padding: 3px 7px; + margin: 10px; +} + +.links a { + text-decoration: none; + color: #4eb6ac; +} + +.links button { + background-color: #e5ffff; + + text-decoration: none; + font-weight: bold; + padding: 4px 17px 8px 17px; + float: right; + width: 120px; + border: 0; + border-radius: 4px; + margin-left: 15px; +} + +/* ============================ Main ============================ */ + +.main { + grid-area: main; + display: grid; + grid-template-columns: 1fr; + place-items: center; + background-color: #4eb6ac; + padding-top: 50px; + padding-bottom: 70px; + border-bottom: 6px solid black; +} + +.main h1 { + font-size: 48px; + color: #e6ffff; + margin-bottom: 20px; +} + +.main p { + color: #e6ffff; +} + +.main b { + color: black; +} + +.main u { + text-decoration-color: black; +} + + +/* ============================ About ============================ */ + + +#about-me { + grid-area: about; + display: grid; + grid-template-columns: 1fr; + place-items: center; + padding-top: 30px; + padding-bottom: 30px; + border-bottom: 6px solid black; +} + +#about-me div { + /* text-align: left; */ + margin-top: 1em; +} + +.skills { + display: grid; + grid-template-columns: 1fr 1fr; + +} + +.skills h3 { + margin-top: 15px; + text-align: left; +} + + +.skills ul { + margin-top: 10px; + place-items: left; +} + + +/* ============================ Portfolio ============================ */ + + +.portfolio { + grid-area: portfolio; + + display: grid; + grid-template-rows: 15% minmax(10px, 1fr); + gap: 2em; + padding-left: 3em; + padding-right: 3em; + padding-bottom: 3em; + background-color: #ccbcbe; + place-items: center; + border-bottom: 6px solid black; +} + +.cards { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1em; + padding-bottom: 10px; +} + +.cards div { + border: 5px solid #ae1457; + border-radius: 7px; + box-shadow: -2px 5px gray; + background-color: white; + padding: 5px; +} + +.cards h2 { + padding-left: 10px; + padding-top: 1em; +} + +.cards p { + padding-left: 10px; + padding-top: .5em; + padding-bottom: 20px; +} + + + + .cards button { + margin-left: 10%; + margin-right: 15%; + /* margin-top: 7%; */ + width: 80%; + border: 0; + border-radius: 3px; + background-color: #bd467a; + padding: 3px; + +} +.cards button a { + color: white; + font-weight: bold; + text-decoration: none; +} + +/* .cards div .internal { + color: white; +} */ + +.cards div p a { + margin-left: 35%; + margin-right: 35%; + margin-top: 15%; + + width: 30%; + color: #ae1457; + } + + + + + + + + +/* ============================ Experience ============================ */ + + +#experience { + grid-area: experience; + display: grid; + place-items: center; + padding-left: 25%; + padding-right: 25%; + padding-bottom: 30px; +} + +#experience h2 { + margin-top: 20px; + margin-bottom: 20px; +} + +#experience div { + margin-bottom: 20px; +} + + + + +/* ============================Bottom Bar ============================ */ + +.bottom-bar { + grid-area: bottom; + color: white; + background-color: #1d313a; + padding-left: 30px; + padding-top: 10px; +} \ No newline at end of file