diff --git a/images/01_lc1_6663_resized.jpg b/images/01_lc1_6663_resized.jpg new file mode 100644 index 0000000..06d99fa Binary files /dev/null and b/images/01_lc1_6663_resized.jpg differ diff --git a/index.html b/index.html index dc73fbe..7922241 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,91 @@ - - - - - - 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

+
+

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.

+
+
+ + + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3c545f8 --- /dev/null +++ b/style.css @@ -0,0 +1,209 @@ +body, html { + margin: 0; + padding: 0; + scroll-behavior: smooth; + font-family: 'Arial', sans-serif; + +} +.first-container{ + margin-left: 15px; + margin-right: 15px; +} + +header { + background-color: #004d40; + 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; + text-align: center; +} + +#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; +} + +.repo{ + width: 40px; + margin-top: 5px; + background-color: white; + color: red; + text-decoration: underline; + text-align: center; +} +#experience { + font-family: Arial, sans-serif; + background-color: #fff; + padding: 20px; + margin: 20px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; +} + +#experience h2 { + font-size: 24px; + color: #333; + margin-bottom: 15px; +} + +.job h3 { + font-size: 20px; + color: #444; + margin-bottom: 5px; +} + +.job p { + font-size: 16px; + color: #666; + line-height: 1.5; +} + + + + +.btn:hover { + background-color: #b0004d; +} + + +.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; +} + +.footer{ + background-color: #004d40; + padding: 20px 0; +}