From 4606c9637933d44795397b4624f1240b7e79be42 Mon Sep 17 00:00:00 2001 From: faruq Date: Thu, 16 May 2024 13:13:45 +0100 Subject: [PATCH 1/2] completed --- images/01_lc1_6663_resized.jpg | Bin 0 -> 7429 bytes index.html | 90 +++++++++++++++-- style.css | 179 +++++++++++++++++++++++++++++++++ 3 files changed, 258 insertions(+), 11 deletions(-) create mode 100644 images/01_lc1_6663_resized.jpg create mode 100644 style.css diff --git a/images/01_lc1_6663_resized.jpg b/images/01_lc1_6663_resized.jpg new file mode 100644 index 0000000000000000000000000000000000000000..06d99fa53605fb364fb340494dfd7b365a8904d9 GIT binary patch literal 7429 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index dc73fbe..3dc851a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,81 @@ - - - - - - Full Stack Portfolio - - - - - \ No newline at end of file + + + +Ella Magnifica - Full-Stack Developer + + + +
+
Ella Magnifica
+ +
+
+
+

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

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.

+
+
+

Technical Skills

+
    +
  • HTML & CSS
    • +
  • Javascript
    • +
  • Typescript
    • +
  • React
    • +
  • Redux
    • +
  • NodeJS
    • +
+
+ +
+ + + +
+

Portfolio

+
+

Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.

+ Read More + GitHub Repo +
+
+

Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.

+ Read More + GitHub Repo +
+
+

Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.

+ Read More + GitHub Repo +
+
+ + + +
+

Experience

+ +
+ +
+

© Ella Magnifica

+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..0dc239e --- /dev/null +++ b/style.css @@ -0,0 +1,179 @@ +body, html { + margin: 0; + padding: 0; + scroll-behavior: smooth; + font-family: 'Arial', sans-serif; +} + + +header { + background-color: #004d40; /* Dark teal color */ + color: white; + padding: 20px 0; + text-align: center; +} + +.site-title { + font-size: 24px; + margin-bottom: 10px; +} + +nav ul { + list-style-type: none; + padding: 0; +} + +nav ul li { + display: inline; + margin-right: 20px; +} + +nav ul li a { + color: white; + text-decoration: none; + font-size: 16px; +} + +#hero { + background-color: #00897b; /* Lighter teal, similar to the header */ + color: white; + text-align: center; + padding: 50px 20px; +} + +#hero h1 { + font-size: 28px; + margin-bottom: 10px; +} + +#hero p { + font-size: 16px; +} + +@media (min-width: 600px) { + header { + padding: 20px 10%; /* Responsive padding */ + } +} + +#about-me { + background-color: #f9f9f9; + padding: 20px; + font-family: Arial, sans-serif; +} + +#about-me h2 { + color: #333; + font-size: 24px; + margin-bottom: 10px; +} + +.intro-text p { + font-size: 16px; + line-height: 1.5; + color: #666; + margin-bottom: 20px; +} + +#technical-skills { + font-family: Arial, sans-serif; + margin: 20px; + padding: 20px; + background-color: #f9f9f9; +} + +#technical-skills h3 { + font-size: 18px; + margin-bottom: 10px; +} + +#technical-skills ul { + list-style-type: none; + padding: 0; + column-count: 2; + column-gap: 20px; +} + +#technical-skills li { + font-size: 16px; + line-height: 1.5; +} + + +#portfolio { + background-color: #f8f8f8; + padding: 20px; + text-align: center; +} + +.project-card { + background-color: #ffffff; + border: 2px solid #d81b60; + padding: 15px; + margin: 10px; + display: inline-block; + width: 300px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.project-card h3 { + color: #333; +} + +.project-card p { + color: #666; + font-size: 14px; + margin: 10px 0; +} + +.btn, .read-more{ + display: block; + width: calc(40px); + padding: 10px; + margin-top: 5px; + background-color: #d81b60; + color: white; + text-decoration: none; + text-align: center; + border-radius: 5px; + transition: background-color 0.3s; +} + +.github-repo{ + width: 40px; + margin-top: 5px; + background-color: #d81b60; + color: white; + text-decoration: none; + text-align: center; +} + +.btn:hover { + background-color: #b0004d; +} + +.github-repo { + background-color: #007bff; +} + +.github-repo:hover { + background-color: #0056b3; +} + + +.btn { + display: inline-block; + padding: 10px 20px; + margin-top: 10px; + background-color: #ce1515; + color: white; + text-decoration: none; + border-radius: 5px; + text-align: center; + +} + +.btn:hover { + background-color: #0056b3; +} + From 729567667e39d7a890dd5861dc3ff0cfa31425d7 Mon Sep 17 00:00:00 2001 From: faruq Date: Thu, 16 May 2024 16:15:48 +0100 Subject: [PATCH 2/2] completed --- index.html | 22 ++++++++++++++++------ style.css | 54 ++++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 58 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 3dc851a..7922241 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
Ella Magnifica

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.

Read More - GitHub Repo + GitHub Repo

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate.

Read More - GitHub Repo + GitHub Repo
-

Experience

- +

Experience

+
+

Job Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.

+
+
+

Job Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat, magna id pulvinar vulputate, lacus risus interdum nulla, eu gravida augue mi vel purus. Aenean nulla mi, placerat eu odio id, ultrices accumsan nunc. Mauris luctus rutrum dolor, nec aliquet felis hendrerit et. Cras neque ligula, cursus ac neque et, lobortis tempus neque. Donec pulvinar, lectus quis interdum congue, velit.

+
-