About page and home page

assets/css/about.css

@@ -0,0 +1,18 @@
+main h2 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+main p {
+  margin-bottom: 3rem;
+}
+
+section img {
+    float: right;
+}
+
+@media only screen and (max-width: 1024px) {
+    section img {
+        display: none;
+    }
+}

assets/css/index.css

@@ -1,3 +1,56 @@
+:root {
+  --first-action-dark-background: #353535;
+  --first-action-light-background: var(--black);
+  --second-action-dark-background: #f3f3f3;
+  --second-action-light-background: #ececec;
+}
+
+main h1 {
+  font-size: 4rem;
+  text-transform: capitalize;
+  margin-bottom: 1rem;
+}
+
+main h1 span,
+main h1 a {
+  color: var(--crimson);
+}
+
+main h1 a {
+  text-decoration: none;
+}
+
+main #intro {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro img {
+  width: 19.6875rem;
+  height: 19.6875rem;
+}
+
+main #intro #action-buttons {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro #action-buttons a {
+  text-decoration: none;
+  border-radius: 0.5625rem;
+  padding: 1rem 2rem;
+}
+
+main #intro #action-buttons a:first-of-type {
+  background-color: var(--first-action-background);
+  color: var(--white);
+}
+
+main #intro #action-buttons a:last-of-type {
+  background-color: var(--second-action-background);
+  color: var(--black);
+}
+
 main h2 {
   font-size: 3rem;
   margin-bottom: 1rem;
@@ -11,7 +64,18 @@ section {
   margin-bottom: 5rem;
 }
 
+main #projects > div:first-of-type,
+main #blog > div:first-of-type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 @media only screen and (max-width: 1024px) {
+  main h1 {
+    font-size: 2rem;
+  }
+
   main h2 {
     font-size: 1.75rem;
   }
@@ -23,4 +87,12 @@ section {
   section {
     margin-bottom: 2rem;
   }
+
+  main #intro #action-buttons {
+    margin-top: 1.5rem;
+  }
+
+  main #intro img {
+    display: none;
+  }
 }

assets/css/partials/about-card.css

@@ -0,0 +1,46 @@
+:root {
+  --about-card-light-background: #f2f2f2;
+  --about-card-dark-background: #131212;
+}
+
+#about-card {
+  background-color: var(--about-card-background);
+  color: var(--text);
+  border-radius: 1.875rem;
+  padding: 3.5rem 2.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  column-gap: 2rem;
+}
+
+#about-card img {
+  width: 8.9375rem;
+  height: 8.9375rem;
+}
+
+#about-card h3 {
+  font-size: 2rem;
+  margin-bottom: 1.75rem;
+  text-transform: capitalize;
+}
+
+#about-card p {
+  margin-bottom: 4rem;
+}
+
+#about-card #links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@media only screen and (max-width: 1024px) {
+  #about-card {
+    flex-direction: column;
+    row-gap: 2rem;
+  }
+
+  #about-card img {
+    align-self: center;
+  }
+}

assets/css/partials/card.css

@@ -1,10 +1,10 @@
 :root {
-  --project-card-light-background: #f2f2f2;
-  --project-card-dark-background: #131212;
+  --card-light-background: #F2F2F2;
+  --card-dark-background: #131212;
 }
 
 article {
-  background-color: var(--project-card-background);
+  background-color: var(--card-background);
   color: var(--text);
   border-radius: 1.875rem;
   padding: 3.5rem 2.5rem;

assets/js/baseof.js

@@ -37,6 +37,18 @@ function loadTheme() {
       ? 'var(--nav-light-background)'
       : 'var(--nav-dark-background)'
   );
+  root.style.setProperty(
+    '--first-action-background',
+    theme === 'light'
+      ? 'var(--first-action-light-background)'
+      : 'var(--first-action-dark-background)'
+  );
+  root.style.setProperty(
+    '--second-action-background',
+    theme === 'light'
+      ? 'var(--second-action-light-background)'
+      : 'var(--second-action-dark-background)'
+  );
   root.style.setProperty(
     '--input-background',
     theme === 'light'
@@ -50,10 +62,16 @@ function loadTheme() {
       : 'var(--button-dark-background)'
   );
   root.style.setProperty(
-    '--project-card-background',
+    '--card-background',
     theme === 'light'
-      ? 'var(--project-card-light-background)'
-      : 'var(--project-card-dark-background)'
+      ? 'var(--card-light-background)'
+      : 'var(--card-dark-background)'
+  );
+  root.style.setProperty(
+    '--about-card-background',
+    theme === 'light'
+      ? 'var(--about-card-light-background)'
+      : 'var(--about-card-dark-background)'
   );
   root.style.setProperty(
     '--footer-background',