From a222ebed79e3b18ca76bddc8ff2310f49cb2f8d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Dias?= <joaovodias@gmail.com>
Date: Mon, 3 Jun 2024 16:55:42 -0300
Subject: [PATCH] :lipstick: :sparkles: better styles and refactoring

---
 public/icons/codeberg.svg        | 164 +++++++++++++++++++++++++++++++
 public/icons/discord.svg         |   8 ++
 public/icons/external-link.svg   |   7 ++
 public/icons/github.svg          |   1 +
 public/icons/gitlab.svg          |   1 +
 public/icons/mail.svg            |  11 +++
 public/icons/matrix.svg          |   9 ++
 public/icons/reddit.svg          |   7 ++
 public/icons/x.svg               |   1 +
 src/components/Button.astro      |  13 +++
 src/components/Footer.astro      |  40 ++++----
 src/components/NavBar.astro      |  12 +--
 src/components/SocialLinks.astro |  71 ++++++++-----
 src/layouts/OldLayout.astro      |  34 -------
 src/layouts/PageLayout.astro     |  27 +++++
 src/layouts/ProjectLayout.astro  |  25 -----
 src/pages/404.astro              |   6 +-
 src/pages/en/index.astro         |  44 ++-------
 src/pages/projects.astro         |  54 +++++-----
 src/pages/pt/index.astro         |  46 +++------
 src/styles/_colors.css           |   9 ++
 src/styles/about_page.css        |  24 +++++
 src/styles/global.css            |  81 ++-------------
 23 files changed, 417 insertions(+), 278 deletions(-)
 create mode 100644 public/icons/codeberg.svg
 create mode 100644 public/icons/discord.svg
 create mode 100644 public/icons/external-link.svg
 create mode 100644 public/icons/github.svg
 create mode 100644 public/icons/gitlab.svg
 create mode 100644 public/icons/mail.svg
 create mode 100644 public/icons/matrix.svg
 create mode 100644 public/icons/reddit.svg
 create mode 100644 public/icons/x.svg
 create mode 100644 src/components/Button.astro
 delete mode 100644 src/layouts/OldLayout.astro
 create mode 100644 src/layouts/PageLayout.astro
 delete mode 100644 src/layouts/ProjectLayout.astro
 create mode 100644 src/styles/_colors.css
 create mode 100644 src/styles/about_page.css

diff --git a/public/icons/codeberg.svg b/public/icons/codeberg.svg
new file mode 100644
index 0000000..74a0fa9
--- /dev/null
+++ b/public/icons/codeberg.svg
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="16"
+   height="16"
+   viewBox="0 0 4.2333332 4.2333335"
+   version="1.1"
+   id="svg1468"
+   sodipodi:docname="codeberg-logo_icon_white.svg"
+   inkscape:version="1.2-alpha1 (b6a15bb, 2022-02-23)"
+   inkscape:export-filename="/home/robert/Documents/Codeberg/Logo-Kit/svg/Codeberg-favicon_64px.png"
+   inkscape:export-xdpi="384"
+   inkscape:export-ydpi="384"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <title
+     id="title16">Codeberg logo</title>
+  <defs
+     id="defs1462">
+    <linearGradient
+       xlink:href="#linearGradient6924"
+       id="linearGradient6918"
+       x1="42519.285"
+       y1="-7078.7891"
+       x2="42575.336"
+       y2="-6966.9307"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient6924">
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0"
+         offset="0"
+         id="stop6920" />
+      <stop
+         id="stop6926"
+         offset="0.49517274"
+         style="stop-color:#2185d0;stop-opacity:0.48923996" />
+      <stop
+         style="stop-color:#2185d0;stop-opacity:0.63279623"
+         offset="1"
+         id="stop6922" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#linearGradient6924-6"
+       id="linearGradient6918-3"
+       x1="42519.285"
+       y1="-7078.7891"
+       x2="42575.336"
+       y2="-6966.9307"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient6924-6">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0"
+         id="stop6920-7" />
+      <stop
+         id="stop6926-5"
+         offset="0.49517274"
+         style="stop-color:#ffffff;stop-opacity:0.30000001;" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.30000001;"
+         offset="1"
+         id="stop6922-3" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     showborder="false"
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="2.8505242"
+     inkscape:cy="18.274291"
+     inkscape:document-units="px"
+     inkscape:current-layer="svg1468"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     units="px"
+     inkscape:snap-global="false"
+     inkscape:snap-page="true"
+     showguides="false"
+     inkscape:window-width="1531"
+     inkscape:window-height="873"
+     inkscape:window-x="69"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid2067" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1465">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Codeberg logo</dc:title>
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Robert Martinez</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:rights>
+          <cc:Agent>
+            <dc:title>Codeberg and the Codeberg Logo are trademarks of Codeberg e.V.</dc:title>
+          </cc:Agent>
+        </dc:rights>
+        <dc:date>2020-04-09</dc:date>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>Codeberg e.V.</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:source>codeberg.org</dc:source>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="g370484"
+     inkscape:label="logo"
+     transform="matrix(0.06551432,0,0,0.06551432,-2.232417,-1.431776)">
+    <path
+       id="path6733-5"
+       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient6918-3);fill-opacity:1;stroke:none;stroke-width:3.67846;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill;stop-color:#000000;stop-opacity:1"
+       d="m 42519.285,-7078.7891 a 0.76086879,0.56791688 0 0 0 -0.738,0.6739 l 33.586,125.8886 a 87.182358,87.182358 0 0 0 39.381,-33.7636 l -71.565,-92.5196 a 0.76086879,0.56791688 0 0 0 -0.664,-0.2793 z"
+       transform="matrix(0.37058478,0,0,0.37058478,-15690.065,2662.0533)"
+       inkscape:label="berg" />
+    <path
+       id="path360787"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:17.0055;paint-order:markers fill stroke;stop-color:#000000"
+       d="m 11249.461,-1883.6961 c -12.74,0 -23.067,10.3275 -23.067,23.0671 0,4.3335 1.22,8.5795 3.522,12.2514 l 19.232,-24.8636 c 0.138,-0.1796 0.486,-0.1796 0.624,0 l 19.233,24.8646 c 2.302,-3.6721 3.523,-7.9185 3.523,-12.2524 0,-12.7396 -10.327,-23.0671 -23.067,-23.0671 z"
+       sodipodi:nodetypes="sccccccs"
+       inkscape:label="sky"
+       transform="matrix(1.4006354,0,0,1.4006354,-15690.065,2662.0533)" />
+  </g>
+</svg>
diff --git a/public/icons/discord.svg b/public/icons/discord.svg
new file mode 100644
index 0000000..c03e8e1
--- /dev/null
+++ b/public/icons/discord.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero">
+
</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/external-link.svg b/public/icons/external-link.svg
new file mode 100644
index 0000000..ed2483a
--- /dev/null
+++ b/public/icons/external-link.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Interface / External_Link">
+<path id="Vector" d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/github.svg b/public/icons/github.svg
new file mode 100644
index 0000000..d5e6491
--- /dev/null
+++ b/public/icons/github.svg
@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/icons/gitlab.svg b/public/icons/gitlab.svg
new file mode 100644
index 0000000..5fbbedd
--- /dev/null
+++ b/public/icons/gitlab.svg
@@ -0,0 +1 @@
+<svg height="2404" viewBox="-.1 .5 960.2 923.9" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m958.9 442.4c1.1 26.1-2 52.1-9.2 77.2-7.1 25.1-18.3 48.8-33.1 70.3a240.43 240.43 0 0 1 -53.6 56.2l-.5.4-199.9 149.8-98.3 74.5-59.9 45.2c-3.5 2.7-7.4 4.7-11.5 6.1s-8.5 2.1-12.9 2.1c-4.3 0-8.7-.7-12.8-2.1s-8-3.4-11.5-6.1l-59.9-45.2-98.3-74.5-198.7-148.9-1.2-.8-.4-.4c-20.9-15.7-39-34.7-53.8-56.2s-26-45.3-33.2-70.4c-7.2-25.1-10.3-51.2-9.2-77.3 1.2-26.1 6.5-51.8 15.8-76.2l1.3-3.5 130.7-340.5q1-2.5 2.4-4.8 1.3-2.3 3.1-4.3 1.7-2.1 3.7-3.9 2-1.7 4.2-3.2c3.1-1.9 6.3-3.3 9.8-4.1 3.4-.9 7-1.3 10.5-1.1 3.6.2 7.1.9 10.4 2.2 3.3 1.2 6.5 3 9.3 5.2q2 1.7 3.9 3.6 1.8 2 3.2 4.3 1.5 2.2 2.6 4.7 1.1 2.4 1.8 5l88.1 269.7h356.6l88.1-269.7q.7-2.6 1.9-5 1.1-2.4 2.6-4.7 1.4-2.2 3.2-4.2 1.8-2 3.9-3.7c2.8-2.2 5.9-3.9 9.2-5.2 3.4-1.2 6.9-1.9 10.4-2.1 3.6-.2 7.1.1 10.6 1 3.4.9 6.7 2.3 9.7 4.2q2.3 1.4 4.3 3.2 2 1.7 3.7 3.8 1.7 2.1 3.1 4.4 1.3 2.3 2.3 4.8l130.5 340.6 1.3 3.5c9.3 24.3 14.6 50 15.7 76.1z" fill="#e24329"/><path d="m959 442.5c1.1 26-2 52.1-9.2 77.2s-18.4 48.9-33.2 70.4-32.9 40.5-53.7 56.2l-.5.4-199.9 149.8s-84.9-64.1-182.5-138l286.5-216.8c12.9-9.7 26.4-18.6 40.3-26.8 13.9-8.3 28.3-15.7 43-22.3 14.8-6.6 29.9-12.5 45.2-17.4 15.4-5 31-9.1 46.9-12.4l1.3 3.5c9.3 24.4 14.6 50.1 15.8 76.2z" fill="#fc6d26"/><path d="m480 658.5c97.6 73.7 182.6 138 182.6 138l-98.3 74.5-59.9 45.2c-3.5 2.7-7.4 4.7-11.5 6.1s-8.5 2.1-12.9 2.1c-4.3 0-8.7-.7-12.8-2.1s-8-3.4-11.5-6.1l-59.9-45.2-98.3-74.5s84.9-64.3 182.5-138z" fill="#fca326"/><path d="m480 658.3c-97.7 73.9-182.5 138-182.5 138l-198.7-148.9-1.2-.8-.4-.4c-20.9-15.7-39-34.7-53.8-56.2s-26-45.3-33.2-70.4c-7.2-25.1-10.3-51.2-9.2-77.3 1.2-26.1 6.5-51.8 15.8-76.2l1.3-3.5c15.9 3.3 31.5 7.4 46.9 12.4 15.3 5 30.4 10.8 45.2 17.5 14.7 6.6 29.1 14.1 43 22.3s27.3 17.2 40.3 26.9z" fill="#fc6d26"/></svg>
\ No newline at end of file
diff --git a/public/icons/mail.svg b/public/icons/mail.svg
new file mode 100644
index 0000000..691aa1e
--- /dev/null
+++ b/public/icons/mail.svg
@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff" transform="rotate(0)">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M21 8L17.4392 9.97822C15.454 11.0811 14.4614 11.6326 13.4102 11.8488C12.4798 12.0401 11.5202 12.0401 10.5898 11.8488C9.53864 11.6326 8.54603 11.0811 6.5608 9.97822L3 8M6.2 19H17.8C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V15.8C3 16.9201 3 17.4802 3.21799 17.908C3.40973 18.2843 3.71569 18.5903 4.09202 18.782C4.51984 19 5.07989 19 6.2 19Z" stroke="#ffffff" stroke-width="1.9919999999999998" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
+</svg>
\ No newline at end of file
diff --git a/public/icons/matrix.svg b/public/icons/matrix.svg
new file mode 100644
index 0000000..907f5f2
--- /dev/null
+++ b/public/icons/matrix.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 27.9 32" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Matrix (protocol) logo</title>
+ <g transform="translate(-.095 .005)" fill="#040404">
+  <path d="m27.1 31.2v-30.5h-2.19v-0.732h3.04v32h-3.04v-0.732z"/>
+  <path d="m8.23 10.4v1.54h0.044c0.385-0.564 0.893-1.03 1.49-1.37 0.58-0.323 1.25-0.485 1.99-0.485 0.72 0 1.38 0.14 1.97 0.42 0.595 0.279 1.05 0.771 1.36 1.48 0.338-0.5 0.796-0.941 1.38-1.32 0.58-0.383 1.27-0.574 2.06-0.574 0.602 0 1.16 0.074 1.67 0.22 0.514 0.148 0.954 0.383 1.32 0.707 0.366 0.323 0.653 0.746 0.859 1.27 0.205 0.522 0.308 1.15 0.308 1.89v7.63h-3.13v-6.46c0-0.383-0.015-0.743-0.044-1.08-0.0209-0.307-0.103-0.607-0.242-0.882-0.133-0.251-0.336-0.458-0.584-0.596-0.257-0.146-0.606-0.22-1.05-0.22-0.44 0-0.796 0.085-1.07 0.253-0.272 0.17-0.485 0.39-0.639 0.662-0.159 0.287-0.264 0.602-0.308 0.927-0.052 0.347-0.078 0.697-0.078 1.05v6.35h-3.13v-6.4c0-0.338-7e-3 -0.673-0.021-1-0.0114-0.314-0.0749-0.623-0.188-0.916-0.108-0.277-0.3-0.512-0.55-0.673-0.258-0.168-0.636-0.253-1.14-0.253-0.198 0.0083-0.394 0.042-0.584 0.1-0.258 0.0745-0.498 0.202-0.705 0.374-0.228 0.184-0.422 0.449-0.584 0.794-0.161 0.346-0.242 0.798-0.242 1.36v6.62h-3.13v-11.4z"/>
+  <path d="m0.936 0.732v30.5h2.19v0.732h-3.04v-32h3.03v0.732z"/>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/public/icons/reddit.svg b/public/icons/reddit.svg
new file mode 100644
index 0000000..6fc9597
--- /dev/null
+++ b/public/icons/reddit.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M88,144a12,12,0,1,1,12-12A12.01343,12.01343,0,0,1,88,144Zm80-24a12,12,0,1,0,12,12A12.01343,12.01343,0,0,0,168,120Zm-8.80908,52.44629a68.09857,68.09857,0,0,1-62.38135,0,4.00047,4.00047,0,0,0-3.67041,7.10938,76.11882,76.11882,0,0,0,69.72217,0,4.00047,4.00047,0,0,0-3.67041-7.10938Zm73.853-46.23242A55.29134,55.29134,0,0,1,236,144c0,20.583-11.42969,39.832-32.18408,54.2002C183.51074,212.25783,156.585,220,128,220s-55.51074-7.74219-75.81592-21.7998C31.42969,183.83205,20,164.583,20,144a55.29134,55.29134,0,0,1,2.95605-17.78613A27.99862,27.99862,0,1,1,60.30029,84.71877c18.23877-10.30444,40.82227-16.15112,64.30274-16.668l7.45166-44.708a3.99718,3.99718,0,0,1,4.55371-3.29589l32.65478,5.02343a20.00239,20.00239,0,1,1-1.21386,7.90674L139.2959,28.55373l-6.58643,39.51953c23.00928.70215,45.09082,6.533,62.99024,16.64551A27.9985,27.9985,0,1,1,233.044,126.21389ZM176,32a12,12,0,1,0,12-12A12.01343,12.01343,0,0,0,176,32ZM226.169,121.22658a20.00232,20.00232,0,1,0-26.34522-28.99023,3.999,3.999,0,0,1-5.19336,1.13086c-.08642-.04785-.16992-.09961-.251-.15332-18.3247-11.09961-41.88574-17.21143-66.36621-17.21362l-.0083.00073L127.99414,76c-24.48291.001-48.04687,6.11328-66.37353,17.21387-.08106.05371-.16456.10547-.251.15332a3.998,3.998,0,0,1-5.19336-1.13086,20.00194,20.00194,0,1,0-26.34522,28.99023,4,4,0,0,1,1.62207,5.05762A47.669,47.669,0,0,0,28,144c0,37.49512,44.85986,68,100,68s100-30.50488,100-68a47.66989,47.66989,0,0,0-3.46631-17.74805A3.99966,3.99966,0,0,1,226.169,121.22658Z"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/public/icons/x.svg b/public/icons/x.svg
new file mode 100644
index 0000000..35e914d
--- /dev/null
+++ b/public/icons/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 462.799"><path fill="#fff" fill-rule="nonzero" d="M403.229 0h78.506L310.219 196.04 512 462.799H354.002L230.261 301.007 88.669 462.799h-78.56l183.455-209.683L0 0h161.999l111.856 147.88L403.229 0zm-27.556 415.805h43.505L138.363 44.527h-46.68l283.99 371.278z"/></svg>
\ No newline at end of file
diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..1bb37b0
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,13 @@
+---
+
+interface Props {
+    href: string;
+    color: string;
+}
+
+---
+
+<div class="button">
+    
+</div>
+
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 71a0d2a..d7c16ba 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,29 +1,35 @@
 ---
-import "../styles/global.css"
 ---
 
 <footer class="footer">
     <div class="container">
-        Made by retrozinndev, licensed under <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3</a> and newer
+        Made with &hearts; by retrozinndev
          · <a href="https://github.com/retrozinndev/retrozinndev.github.io">Improve this Page</a>
     </div>
 </footer>
 
 <style>
-.footer {
-    margin-left: 0px;
-    color: lightgray;
-    overflow: scroll;
-    display: block;
-    width: 100%;
-    max-width: 100vw;
-    position: relative;
-    font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
-    font-size: 12.8px;
-    text-align: center;
-}
+    .footer {
+        margin-left: 0px;
+        color: lightgray;
+        overflow: scroll;
+        display: block;
+        width: 100%;
+        font-family: Free Sans, Open Sans, Segoe UI Alternative, Segoe UI, sans-serif;
+        font-size: 12.8px;
+        text-align: center;
+    }
 
-.footer > a {
-    color: lightgray;
-}
+    .container {
+        width: auto;
+    }
+
+    a {
+        color: lightgray;
+        transition: 250ms;
+    }
+
+    a:hover {
+        color: rgb(91, 91, 185);
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 5c06fda..ab0a6f0 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -34,15 +34,15 @@ var options = {
 </header>
 
 <style>
-    :root {
-        --avatar-size: 32px;
-        --avatar-margin-left: 16px;
-    }
 
     header {
+        --avatar-size: 32px;
+        --avatar-margin-left: 10px;
+
         display: flex;
         flex-direction: row;
         background-color: var(--navbar-color);
+        padding: 6px;
     }
 
     .navbar {
@@ -84,14 +84,14 @@ var options = {
         margin-top: 0;
     }
 
-    .link > a {
+    a {
         color: white;
         text-decoration: none;
         font-weight: bold;
         transition: 250ms;
     }
 
-    .link > a:hover {
+    a:hover {
         color: var(--link-color);
     }
 </style>
\ No newline at end of file
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
index a934320..224bfff 100644
--- a/src/components/SocialLinks.astro
+++ b/src/components/SocialLinks.astro
@@ -11,54 +11,75 @@
         frameborder="0"
         src="https://widgets.vendicated.dev/user?id=568589231954591749&theme=dark&banner=true&full-banner=false&rounded-corners=true&discord-icon=true&badges=false&guess-nitro=true&background-color=%23000000&foreground-color=%23fff" />
 
-<ul class="stylish-row">
+<ul class="stylish-list">
     <li>
-        <a href="https://discord.com/users/568589231954591749">Discord</a>
+        <img src="/public/icons/discord.svg" draggable="false"> Discord <a href="https://discord.com/users/568589231954591749">retrozinndev</a>
     </li>
     <li>
-        <a href="https://github.com/retrozinndev">GitHub</a>
+        <img class="no-brightness" src="/public/icons/github.svg" draggable="false"> GitHub <a href="https://github.com/retrozinndev">retrozinndev</a>
     </li>
     <li>
-        <a href="https://gitlab.com/retrozinndev">GitLab</a>
+        <img src="/public/icons/gitlab.svg" draggable="false"> GitLab <a href="https://gitlab.com/retrozinndev">retrozinndev</a>
     </li>
     <li>
-        <a href="https://codeberg.org/retrozinndev">CodeBerg</a>
+        <img class="no-brightness" src="/public/icons/codeberg.svg" draggable="false"> CodeBerg<a href="https://codeberg.org/retrozinndev">retrozinndev</a>
     </li>
     <li>
-        <a href="https://gravatar.com/retrozinndev">Gravatar</a>
+        <img class="no-brightness" src="/public/icons/x.svg" draggable="false"> X/Twitter <a href="https://x.com/retrozinndev">@retrozinndev</a>
     </li>
     <li>
-        <a href="https://x.com/retrozinndev">X/Twitter</a>
+        <img src="/public/icons/matrix.svg" draggable="false"> Matrix <a href="https://matrix.to/#/@retrozinndev:matrix.org">@retrozinndev:matrix.org</a>
     </li>
     <li>
-        <a href="https://matrix.to/#/@retrozinndev:matrix.org">Matrix</a>
+        <img src="/public/icons/reddit.svg" draggable="false"> Reddit <a href="https://www.reddit.com/user/Much_Clue7037">Much_Clue7037</a>
     </li>
     <li>
-        <a href="https://www.reddit.com/user/Much_Clue7037">Reddit</a>
-    </li>
-    <li>
-        <a href="mailto:joaovodias@gmail.com">E-mail</a>
+        <img src="/public/icons/mail.svg" draggable="false"> Mail <a href="mailto:joaovodias@gmail.com">retrozinndev@gmail.com</a>
     </li>
 </ul>
 
 <style>
-    .stylish-row {
-        max-width: calc(100vw - var(--margin-left));
-        font-size: 14px;
-        display: flex;
-        flex-direction: row;
-        list-style-type: none;
-        flex-wrap: wrap;
+    .stylish-list {
+        font-size: 16px;
+        padding-left: 12px;
+        list-style: none;
     }
 
-    .stylish-row > li {
+    .stylish-list > li {
+        display:flex;
+        width: fit-content;
         box-sizing: content-box;
-        font-size: 16px;
-        font-style: bold;
-        border: 4px solid var(--primary-color);
         border-radius: 8px;
-        background-color: var(--secondary-color);
         padding-inline: 2px;
-        margin: 1px;
+        margin: 4px;
+        line-height: 28px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    a {
+        margin-left: 6px;
+        text-decoration: none;
+        color: white;
+        border: 1px solid var(--primary-color);
+        border-radius: 12px;
+        background-color: var(--secondary-color);
+        transition: ease-in 200ms;
+        padding: 2px;
+        padding-inline: 4px;
+    }
+
+    a:hover {
+        color: var(--link-color);
+    }
+
+    img {
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        margin-right: 6px;
+    }
+    img:not(.no-brightness) {
+        filter: brightness(80000%);
     }
 </style>
\ No newline at end of file
diff --git a/src/layouts/OldLayout.astro b/src/layouts/OldLayout.astro
deleted file mode 100644
index 9a69bdb..0000000
--- a/src/layouts/OldLayout.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-import "../styles/global.css";
-
-interface Props {
-    title: string;
-    icon: string;
-    lang: string;
-}
-const { title, icon, lang } = Astro.props;
----
-
-<!doctype html>
-<html lang={ lang }>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{ title }</title>
-    <link rel="icon" href={ icon }>
-</head>
-<slot />
-
-<style>
-    a {
-        font-weight: bold;
-        color: white;
-        transition: ease;
-        transition-duration: 350ms;
-    }
-
-    a:hover {
-        color: var(--link-color);
-    }
-</style>
-</html>
\ No newline at end of file
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
new file mode 100644
index 0000000..cfa1db3
--- /dev/null
+++ b/src/layouts/PageLayout.astro
@@ -0,0 +1,27 @@
+---
+import Footer from "../components/Footer.astro";
+import NavBar from "../components/NavBar.astro";
+import "../styles/global.css";
+
+interface Props {
+    title: string;
+    icon: string;
+    lang: string;
+}
+const { title, icon, lang } = Astro.props;
+---
+
+<!doctype html>
+<html lang={ lang }>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{ title }</title>
+        <link rel="icon" href={ icon }>
+    </head>
+    <NavBar />
+
+    <slot />
+
+    <Footer />
+</html>
\ No newline at end of file
diff --git a/src/layouts/ProjectLayout.astro b/src/layouts/ProjectLayout.astro
deleted file mode 100644
index eec3e6f..0000000
--- a/src/layouts/ProjectLayout.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-import "../styles/global.css";
-import NavBar from '../components/NavBar.astro';
-
-interface Props {
-    title: string;
-    icon: string;
-}
-
-const { title, icon } = Astro.props;
----
-
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" href={ icon }>
-    <title>{ title }</title>
-</head>
-<NavBar />
-<div class="container">
-    <slot />
-</div>
-</html>
\ No newline at end of file
diff --git a/src/pages/404.astro b/src/pages/404.astro
index d3a3907..dfe3a54 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,11 +1,11 @@
 ---
 import "../styles/global.css";
 import NavBar from "../components/NavBar.astro";
-import OldLayout from "../layouts/OldLayout.astro";
+import PageLayout from "../layouts/PageLayout.astro";
 ---
 
 <NavBar />
-<OldLayout title="retrozinndev | Not Found" icon="https://github.com/retrozinndev.png" lang="en-US">
+<PageLayout title="retrozinndev | Not Found" icon="https://github.com/retrozinndev.png" lang="en-US">
     <div class="center">
         <div class="not-found">
             <h1>404!</h1>
@@ -15,7 +15,7 @@ import OldLayout from "../layouts/OldLayout.astro";
             </p>
         </div>
     </div>
-</OldLayout>
+</PageLayout>
 
 <style>
     .not-found h1 {
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 91983da..7009939 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -1,51 +1,25 @@
 ---
-import Footer from '../../components/Footer.astro';
-import NavBar from '../../components/NavBar.astro';
 import SocialLinks from '../../components/SocialLinks.astro';
-import OldLayout from '../../layouts/OldLayout.astro';
-import "../../styles/global.css"
+import PageLayout from '../../layouts/PageLayout.astro';
+import "../../styles/about_page.css";
 ---
 
-<OldLayout title={ "retrozinndev" + " | " + "Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
-    <NavBar />
+<PageLayout title={ "retrozinndev" + " | " + "Home" } icon="https://github.com/retrozinndev.png" lang="en-US">
     <body>
         <div class="container">
-            <div class="title">
+            <div class="about-section title">
                     <h1>Hi, I'm <span class="highlight">João!</span></h1>
             </div>
-            <div class="description" id="chars">
-                <b>Pronouns</b>: He/Him (Ele/Dele)<br>
-                <b>Languages<b>: Português Brasileiro, English <br>
-                <b>Skills</b>: Java, C#, TypeScript, Astro <br>
-            </div>
-            <br>
             <div class="about" id="about">
-                I'm a <b>self taught programmer </b>and<b> tech enthusiast</b> that's learning software development stuff! <br>
-                <b>I love the open-source communitty!</b> I like: coding, learning about Linux and making games and apps in my free time! <br>
-            </div>
-            <div class="projects" id="projects">
-                <h2>My Projects: </h2>
-                <ul class="projects">
-                    <li>
-                        <a class="project" href="/JSONutils">JSONutils: A JSON library for Java, focused at being easy-to-use</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/TheTraveler">The Traveler: A free and open-source 2D Shooter game!</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/UpDateNTime">UpDateNTime: Tool for syncing your date and time with the internet!</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/SpaceShooter">Space Shooter: A Game about shooting meteors in space!</a>
-                    </li>
-                </ul>
+                I'm a self-taught programmer and tech enthusiast that's learning software development stuff! <br>
+                I absolutely love making open-source projects! <br>
+                I like: coding, learning about Linux and making games and apps in my free time! <br>
             </div>
+            <a href="/projects"><h3 class="projects" id="projects">Get in touch with my projects &UpperRightArrow;</h3></a>
             <div class="socials ul" id="socials">
                 <h2>You can find me in: </h2>
                 <SocialLinks />
-                <br>
             </div>
         </div>
     </body>
-    <Footer />
-</OldLayout>
\ No newline at end of file
+</PageLayout>
\ No newline at end of file
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 2d9afd2..58bc5c2 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,37 +1,44 @@
 ---
 import ProjectCard from "../components/ProjectCard.astro";
-import ProjectLayout from "../layouts/ProjectLayout.astro";
+import PageLayout from "../layouts/PageLayout.astro";
 import "../styles/global.css";
 ---
 
-<ProjectLayout title="retrozinndev's Projects" icon="https://github.com/retrozinndev.png">
-    <h1>Projects</h1>
-    <p>
-        Here are some of my projects! You can test them out on 
-        <a rel="_blank" href="https://repos.retrozinn.dev">GitHub</a>.
-    </p>
-    <div class="projects">
-        <li>
-            <ProjectCard icon="https://github.com/retrozinndev.png" developer="retrozinndev" title="JSONutils" description="A JSON library for Java, focused at being easy to use" href="https://github.com/retrozinndev/jsonutils" />
-        </li>
-        <li>
-            <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="The Traveler" description="A free and open-source 2D Shooter game!" href="https://github.com/notestudios/thetraveler" />
-        </li>
-        <li>
-            <ProjectCard icon="https://github.com/retrozinndev.png" developer="retrozinndev" title="UpDateN'Time" description="Tool that synchronizes your date and time with the internet!" href="https://github.com/retrozinndev/updatentime" />
-        </li>
-        <li>
-            <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="Note UI" description="A library for the Note Studios UI design" href="https://github.com/notestudios/noteui" />
-        </li>
-        <li>
-            <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="Space Shooter" description="A game about shooting meteors in Space!" href="https://github.com/notestudios/spaceshooter" />
-        </li>
+<PageLayout title="retrozinndev's Projects" icon="https://github.com/retrozinndev.png" lang="en-US">
+    <div class="container">
+        <h1>Projects</h1>
+        <p>
+            Here are some of my projects! You can test them out on 
+            <a rel="_blank" href="https://repos.retrozinn.dev">GitHub</a>.
+        </p>
+        <div class="projects">
+            <li>
+                <ProjectCard icon="https://github.com/retrozinndev.png" developer="retrozinndev" title="JSONutils" description="A JSON library for Java, focused at being easy to use" href="https://github.com/retrozinndev/jsonutils" />
+            </li>
+            <li>
+                <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="The Traveler" description="A free and open-source 2D Shooter game!" href="https://github.com/notestudios/thetraveler" />
+            </li>
+            <li>
+                <ProjectCard icon="https://github.com/retrozinndev.png" developer="retrozinndev" title="UpDateN'Time" description="Tool that synchronizes your date and time with the internet!" href="https://github.com/retrozinndev/updatentime" />
+            </li>
+            <li>
+                <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="Note UI" description="A library for the Note Studios UI design" href="https://github.com/notestudios/noteui" />
+            </li>
+            <li>
+                <ProjectCard icon="https://github.com/notestudios.png" developer="notestudios" title="Space Shooter" description="A game about shooting meteors in Space!" href="https://github.com/notestudios/spaceshooter" />
+            </li>
+        </div>
     </div>
 
 </OldLayout>
 
 
 <style>
+    
+    .container {
+        margin-left: 5%;
+    }
+
     .projects {
         display: flex;
         list-style-type: none;
@@ -39,5 +46,6 @@ import "../styles/global.css";
         flex-wrap: wrap;
         padding: 8px;
     }
+
 </style>
 
diff --git a/src/pages/pt/index.astro b/src/pages/pt/index.astro
index 856187e..07ea59e 100644
--- a/src/pages/pt/index.astro
+++ b/src/pages/pt/index.astro
@@ -1,50 +1,26 @@
 ---
-import Footer from '../../components/Footer.astro';
-import NavBar from '../../components/NavBar.astro';
 import SocialLinks from '../../components/SocialLinks.astro';
-import OldLayout from '../../layouts/OldLayout.astro';
+import PageLayout from '../../layouts/PageLayout.astro';
+import "../../styles/about_page.css";
 ---
 
-<OldLayout title={ "retrozinndev" + " | " + "Início" } icon="https://github.com/retrozinndev.png" lang="pt-BR">
-    <NavBar />
+<PageLayout title={ "retrozinndev" + " | " + "Início" } icon="https://github.com/retrozinndev.png" lang="pt-BR">
     <body>
         <div class="container">
-            <div class="title">
+            <div class="about-section title">
                 <h1>Olá, sou o <span class="highlight">João!</span></h1>
             </div>
-            <div class="description" id="chars">
-                <b>Pronomes</b>: Ele/Dele (He/Him)<br>
-                <b>Idiomas<b>: Inglês(English), Português Brasileiro </b> <br>
-                <b>Skills</b>: Java, C#, TypeScript, Astro
-            </div>
-            <br>
             <div class="about" id="about">
-                Sou um programador <b>autodidata </b>e um<b> entusiasta de tecnologia</b> que está aprendendo coisas sobre programação! <br>
-                <b>Amo a comunidade de código-aberto!</b> Gosto de: escrever códigos, aprender sobre Linux e fazer joguinhos no meu tempo livre! <br>
-            </div>
-            <div class="projects"  id="projects">
-                <h2>Meus Projetos: </h2>
-                <ul class="projects">
-                    <li>
-                        <a class="project" href="/JSONutils">JSONutils: Uma biblioteca JSON fácil de usar, para Java.</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/TheTraveler">The Traveler: Um jogo 2D de tiro grátis e open-source!</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/UpDateNTime">UpDateNTime: Ferramenta para sicronizar a data e hora com o da internet.</a>
-                    </li>
-                    <li>
-                        <a class="project" href="/SpaceShooter">Space Shooter: Um jogo sobre atirar em meteoros no Espaço!</a>
-                    </li>
-                </ul>
+                Sou um programador autodidata e entusiasta de tecnologia que está amando o <br>
+                mundo da programação! Eu gosto muito de fazer projetos open-source! <br>
+                Eu curto: programar, aprender sobre Linux, fazer jogos e aplicativos no meu <br>
+                tempo livre!
             </div>
+            <a href="/projects"><h3 class="projects" id="projects">Veja meus projetos &UpperRightArrow;</h3></a>
             <div class="socials ul" id="socials">
-                <h2>Você pode me encontrar em: </h2>
+                <h2>You can find me in: </h2>
                 <SocialLinks />
-                <br>
             </div>
         </div>
     </body>
-    <Footer />
-</OldLayout>
\ No newline at end of file
+</PageLayout>
\ No newline at end of file
diff --git a/src/styles/_colors.css b/src/styles/_colors.css
new file mode 100644
index 0000000..72e0eb1
--- /dev/null
+++ b/src/styles/_colors.css
@@ -0,0 +1,9 @@
+
+:root {
+    --navbar-color: rgb(47, 49, 54);
+    --background-color: #1e1e1f;
+    --primary-color: #3a4750;
+    --secondary-color: #343c42; 
+    --link-color: #2f82c2;
+    --text-emphasis-color: #2c73a5;
+}
\ No newline at end of file
diff --git a/src/styles/about_page.css b/src/styles/about_page.css
new file mode 100644
index 0000000..04450d0
--- /dev/null
+++ b/src/styles/about_page.css
@@ -0,0 +1,24 @@
+
+@import "_colors.css";
+
+.container {
+    margin-left: 8%;
+    width: fit-content;
+    font-weight: 500;
+}
+
+
+
+a {
+    color: white;
+    text-decoration-thickness: 2px;
+    transition: ease-in 150ms;
+}
+
+a:hover {
+    color: var(--link-color);
+}
+
+p {
+    line-height: 1.2rem;
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 99abb04..fbb883b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,15 +1,10 @@
 
-:root {
-    --navbar-color: rgb(47, 49, 54);
-    --background-color: #1e1e1f;
-    --primary-color: #3a4750;
-    --secondary-color: #343c42; 
-    --link-color: #2f82c2;
-    --text-emphasis-color: #2c73a5;
-}
+@import "_colors.css";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
 
 html {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: Noto Sans, Segoe UI, sans-serif;
+    font-weight: 300;
     scroll-behavior: smooth;
     color-scheme: dark;
 }
@@ -32,12 +27,6 @@ body {
     margin: auto;
 }
 
-.container {
-    --margin-left: 1em;
-    margin-left: var(--margin-left);
-    width: calc(100vw - var(--margin-left));
-}
-
 h1 {
     font-size: 32.5px;
 }
@@ -50,77 +39,19 @@ h3 {
     font-size: 18px;
 }
 
-a.header-button {
-    color: white;
-    text-decoration: none;
-    font-weight: bolder;
-    box-sizing: 90px;
-}
-
 .highlight {
     position: flex;
     font-style: bolder;
     font-weight: bolder;
     color: var(--text-emphasis-color);
-}
-
-.highlight:is(:hover) {
     transition: ease-in-out 500ms;
-    color: wheat;
-}
-
-.highlight:not(:hover) {
-    transition: ease-in 250ms;
-    color: var(--text-emphasis-color);
 }
 
-.description {
-    font-size: 14px;
+.highlight:hover {
+    color: wheat;
 }
 
 iframe {
     background-color: var(--background-color);
     border-radius: 12px;
 }
-
-.about {
-    font-size: 16px;
-}
-
-.skills {
-    font-size: 16px;
-    font-style: bold;
-}
-
-.projects {
-    line-height: 32px;
-}
-
-.project {
-    font-style: bold;
-    box-sizing: content-box;
-    border: 4px solid var(--primary-color);
-    border-collapse: collapse;
-    border-radius: 8px;
-    background-color: var(--secondary-color);
-}
-
-.socials ul {
-    line-height: 25px;
-    font-size: 14px;
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-    flex-wrap: wrap;
-}
-
-.socials a.link  {
-    box-sizing: content-box;
-    font-size: 16px;
-    font-style: bold;
-    border: 4px solid var(--primary-color);
-    border-radius: 8px;
-    background-color: var(--secondary-color);
-    padding: 2px;
-    margin: 1px;
-}
\ No newline at end of file