diff --git a/Experience.html b/Experience.html new file mode 100644 index 0000000..2bb80c2 --- /dev/null +++ b/Experience.html @@ -0,0 +1,42 @@ + + + + + + + Experience + + +
+

Experience

+

Job Title

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur + vero maiores, sunt voluptas aliquam quis exercitationem? Magni + reiciendis similique accusamus veritatis voluptates quia iste in dolor + delectus ullam? Cupiditate, expedita? Quae blanditiis a eligendi cum + vitae laboriosam dolor ducimus expedita magni consectetur possimus + soluta sequi doloremque optio corporis, explicabo necessitatibus, + reiciendis illum illo nobis dignissimos quisquam, totam beatae + distinctio. Sint, suscipit. Incidunt quibusdam inventore, quis sunt ipsa + eligendi accusantium enim animi nam amet similique? Corporis tempore + laudantium optio ipsa architecto ullam nam iure harum reiciendis cum. + Dolor quasi doloremque quo tempora. +

+ +

Job Title

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem + eius vel, temporibus soluta sapiente similique, saepe quibusdam quo + voluptates placeat, in vero quos quas adipisci dolorum animi + reprehenderit error consectetur. Voluptates, consequatur? Error hic + illum veritatis, commodi tempora qui ipsam temporibus recusandae facilis + accusantium! Veritatis sed harum quam quo eaque quis neque quidem + nesciunt debitis totam! Necessitatibus mollitia eos quod! Corporis sit, + quis a vel voluptatibus esse ab amet voluptas, magni sapiente quae odit + adipisci obcaecati in dignissimos ut eum enim quam iste facere ipsam + necessitatibus corrupti placeat. Modi, deleniti. +

+
+ + diff --git a/about-me.html b/about-me.html new file mode 100644 index 0000000..87aad63 --- /dev/null +++ b/about-me.html @@ -0,0 +1,38 @@ + + + + + + + About Me + + +
+

About Me

+

Introduction

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur + vero maiores, sunt voluptas aliquam quis exercitationem? Magni + reiciendis similique accusamus veritatis voluptates quia iste in dolor + delectus ullam? Cupiditate, expedita? Quae blanditiis a eligendi cum + vitae laboriosam dolor ducimus expedita magni consectetur possimus + soluta sequi doloremque optio corporis, explicabo necessitatibus, + reiciendis illum illo nobis dignissimos quisquam, totam beatae + distinctio. Sint, suscipit. Incidunt quibusdam inventore, quis sunt ipsa + eligendi accusantium enim animi nam amet similique? Corporis tempore + laudantium optio ipsa architecto ullam nam iure harum reiciendis cum. + Dolor quasi doloremque quo tempora. +

+ +

Technical Skills

+ +
+ + diff --git a/index.html b/index.html index dc73fbe..80b47a4 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,37 @@ Full Stack Portfolio - + +
+ +
+
+

Hamada Abdelaal

+
+ +
+ +
+
+

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 secto. +

+
+
+ + +
- \ No newline at end of file + diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 0000000..89421fe --- /dev/null +++ b/portfolio.html @@ -0,0 +1,57 @@ + + + + + + + Portfolio + + +
+

portfolio

+
+
+

Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci + vitae fugiat quam, dignissimos ipsam sint culpa officiis aut, + sapiente corrupti dolorum similique, voluptas maiores dolore + delectus alias repellendus nulla? +

+
+ +

GitHub Repo

+
+
+ +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci + vitae fugiat quam, dignissimos ipsam sint culpa officiis aut, + sapiente corrupti dolorum similique, voluptas maiores dolore + delectus alias repellendus nulla? +

+
+ +

GitHub Repo

+
+
+ +
+

Title

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci + vitae fugiat quam, dignissimos ipsam sint culpa officiis aut, + sapiente corrupti dolorum similique, voluptas maiores dolore + delectus alias repellendus nulla? +

+
+ +

GitHub Repo

+
+
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..6fc8d38 --- /dev/null +++ b/style.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: sans-serif; +} + +.grid { + height: 100vh; + display: grid; + grid-template-rows: + 100px + 1fr + 70px; +} + +header { + background-color: #4eb6ac; + grid-column: 1 / 2; + grid-row: 1 / 2; + + display: flex; + justify-content: space-between; + align-items: center; + + padding: 1.5rem; +} + +nav ul { + display: grid; + grid-auto-flow: column; + gap: 2rem; + list-style: none; +} + +nav li { + display: inline-block; +} + +li a { + color: #4eb6ac; + background-color: #e5ffff; + padding: 0.5rem 0.8rem; + + font-size: 1rem; + font-weight: bold; + text-decoration: none; + + border-radius: 7px; +} + +li a:hover { + background-color: #cfebeb; +} + +.name { + font-size: 2rem; + font-weight: bold; + color: #e5ffff; +} +/* ************************************ */ + +main { + grid-column: 1 / 2; + grid-row: 2 / 3; + background-color: #4eb6ac; + color: #e5ffff; + + display: flex; + justify-content: center; + align-items: center; + + padding: 7rem 0; +} + +main > div { + max-width: 700px; + margin: 0 auto; +} + +main h1 { + font-size: 6rem; + font-weight: bolder; + margin-bottom: 2rem; +} + +main p { + font-size: 1rem; + line-height: 1.5; +} + +main span { + color: #1c1c1c; + font-weight: bold; +} + +main i { + border-bottom: 0.09rem solid #1c1c1c; +} + +/**************** Abouut me & Experience *****************/ + +.container { + max-width: 700px; + margin: 0 auto; + padding: 2rem 0.5rem; +} + +.container > * { + margin-bottom: 1rem; + font-size: 1rem; + line-height: 1.5; +} + +.container ul { + padding-left: 2rem; + font-size: 0.9rem; + font-weight: bold; + + display: grid; + grid-template-columns: repeat(2, minmax(6rem, 1fr)); + gap: 0.2rem 2rem; +} +.h1-about-me { + text-align: center; + margin-bottom: 3rem; + font-size: 2.5rem; + text-transform: uppercase; +} + +.sub-title { + font-size: 1.5rem; + font-weight: bold; +} + +/**************** Portfolio *****************/ +.portfolio { + background-color: #ffebee; + padding: 1rem 0.5rem; +} + +.portfolio > h1 { + text-align: center; + margin-bottom: 2rem; + text-transform: uppercase; +} + +.cards { + max-width: 960px; + margin: 0 auto; + padding-bottom: 1rem; + + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.cards > * { + background-color: #fbfffc; + border: 0.5rem solid #ae1457; + border-radius: 0.5rem; + + padding: 1.5rem; +} + +h2, +.desc { + margin-bottom: 1rem; +} + +.more { + display: flex; + flex-direction: column; + align-items: center; +} + +.more button { + margin-bottom: 0.5rem; + padding: 0.3rem 2.5rem; + + color: #fbfffc; + background-color: #ae1457; + + font-weight: bold; + text-transform: uppercase; + + border: none; + border-radius: 7px; +} + +.github { + font-size: 0.8rem; + font-weight: bold; + color: #ae1457; +} +/**************** Footer *****************/ + +footer { + grid-column: 1 / 2; + grid-row: 3 / 4; + background-color: #1d313a; + color: #e5ffff; + + display: flex; + justify-content: center; + align-items: center; +}