From 5f756f47ed77b124e0459ece3fc2a89bccfabda9 Mon Sep 17 00:00:00 2001 From: Periklis Date: Mon, 11 Mar 2024 19:54:27 +0200 Subject: [PATCH 1/3] Main html-css done --- index.html | 122 ++++++++++++++++++++++++--- style.css | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 355 insertions(+), 10 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index dc73fbe..d0efa6a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,115 @@ - - - - - - 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..a945819 --- /dev/null +++ b/style.css @@ -0,0 +1,243 @@ +* { + 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 { + /* text-align: left; */ + border: 5px solid #ae1457; + border-radius: 7px; + box-shadow: -2px 5px gray; + background-color: white; + padding: 5px; +} + +.cards h2 { + /* text-align: left; */ + padding-left: 10px; + padding-top: 1em; +} + +.cards p { + /* text-align: left; */ + padding-left: 10px; + padding-top: .5em; + padding-bottom: 20px; +} + + + + +.cards div button { + margin-left: 10%; + margin-right: 15%; + margin-top: 7%; + width: 80%; + border: 0; + border-radius: 3px; + background-color: #ae1457; + color: white; + padding: 3px; + font-weight: bold; +} + +.cards div a { + margin-left: 35%; + margin-right: 35%; + margin-right: 15%; + 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 From 9ec512a72afb46073b1d666591b8435fbe7094e2 Mon Sep 17 00:00:00 2001 From: Periklis Date: Mon, 11 Mar 2024 20:26:24 +0200 Subject: [PATCH 2/3] All links added --- Project-1.html | 14 ++++++++++++++ Project-2.html | 14 ++++++++++++++ Project-3.html | 11 +++++++++++ index.html | 18 ++++++++++++------ style.css | 25 ++++++++++++++----------- 5 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 Project-1.html create mode 100644 Project-2.html create mode 100644 Project-3.html 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 d0efa6a..1d21cd8 100644 --- a/index.html +++ b/index.html @@ -68,24 +68,30 @@

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

+ +

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

+ +

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

+ +

GitHub Repo

diff --git a/style.css b/style.css index a945819..114c29d 100644 --- a/style.css +++ b/style.css @@ -154,7 +154,6 @@ body { } .cards div { - /* text-align: left; */ border: 5px solid #ae1457; border-radius: 7px; box-shadow: -2px 5px gray; @@ -163,13 +162,11 @@ body { } .cards h2 { - /* text-align: left; */ padding-left: 10px; padding-top: 1em; } .cards p { - /* text-align: left; */ padding-left: 10px; padding-top: .5em; padding-bottom: 20px; @@ -177,24 +174,30 @@ body { - -.cards div button { + .cards button { margin-left: 10%; margin-right: 15%; - margin-top: 7%; + /* margin-top: 7%; */ width: 80%; border: 0; - border-radius: 3px; - background-color: #ae1457; - color: white; + border-radius: 3px; + background-color: #bd467a; padding: 3px; + +} +.cards button a { + color: white; font-weight: bold; + text-decoration: none; } -.cards div a { +/* .cards div .internal { + color: white; +} */ + +.cards div p a { margin-left: 35%; margin-right: 35%; - margin-right: 15%; margin-top: 15%; width: 30%; From e7f3dff537e6cbf6bfbaa2640b1d206f7157d8e3 Mon Sep 17 00:00:00 2001 From: Periklis Date: Mon, 11 Mar 2024 21:16:12 +0200 Subject: [PATCH 3/3] Correct color --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 114c29d..3ac4a1f 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,7 @@ } body { - background-color: green; + /* background-color: green; */ } .container {