diff --git a/css/styles.css b/css/styles.css index df5462b..7957112 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,12 +1,12 @@ body { margin: 0; background-color: #ab6f94; - font-family: 'Trebuchet MS', sans-serif; + font-family: "Trebuchet MS", sans-serif; } .top-container { text-align: center; - height: 100vh; + height: 100vh; padding: 24px; } @@ -14,7 +14,10 @@ body { width: 100%; border-radius: 50%; max-width: 40vh; - box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + max-height: 40vh; + box-shadow: + 0 10px 16px 0 rgba(0, 0, 0, 0.2), + 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .projects-grid { @@ -31,9 +34,11 @@ body { color: black; border-radius: 8px; flex: 1; - background-color: #74b05a; + background-color: #7ac2aa; display: flex; - box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 12px 0 rgba(0,0,0,0.17); + box-shadow: + 0 8px 12px 0 rgba(0, 0, 0, 0.2), + 0 6px 12px 0 rgba(0, 0, 0, 0.17); min-width: 300px; transition: transform 250ms; padding: 12px; @@ -41,7 +46,7 @@ body { } .project:hover { - background-color: #609c46; + background-color: #6dad98; transform: translateY(-8px); cursor: pointer; } @@ -62,3 +67,47 @@ body { flex-direction: column; text-align: left; } + +.about { + margin-left: auto; + margin-right: auto; + flex: 1; + background-color: var(--background-color-2); + border: 1px solid var(--border-color); + padding: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + gap: 20px; + max-width: 600px; + line-break: anywhere; +} + +.about-text { + flex: 4; + text-align: left; +} + +.avatar { + flex: 2; +} + +@media (max-width: 500px) { + .projects-grid { + padding: 12px; + } + + .project { + min-width: 200px; + } + + .project-logo-container { + font-size: 3rem; + } + + .about { + flex-direction: column; + gap: 12px; + } +} diff --git a/index.html b/index.html index 18356c2..65fdd40 100644 --- a/index.html +++ b/index.html @@ -18,25 +18,31 @@
- -

- 👋 hello, im simponic! -
- ❤️ i like math, cooking, running, and penguins. -
- ⛓️ linkedin. -
- 📷 instagram. -
- 🔥 hatecomputers.club. -
- ✉️ elizabeth@simponic.xyz. -
- 📖 this page hosts strictly static content! play around if you'd like :D -
- 🐙 my gitea is at - /simponic. -

+
+
+ +
+
+

+ 👋 hello, im simponic! +
+ ❤️ i like math, cooking, running, and penguins. +
+ ⛓️ linkedin. +
+ 📷 instagram. +
+ 🔥 hatecomputers.club. +
+ ✉️ elizabeth@simponic.xyz. +
+ 📖 this page hosts fun stuff! play around if you'd like +
+ 🐙 my gitea is at + /simponic. +

+
+