From 781e6960982cb998ebebca0523707e59e1e1cb1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Fabi=C3=A1n=20Stetcu=20Stepanov?=
 <100787553+ZiwiiDev@users.noreply.github.com>
Date: Tue, 7 Nov 2023 17:17:12 +0000
Subject: [PATCH 1/2] Initial commit


From a63a4f99db3348cd252d17e10b6bada2b6183a46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Fabi=C3=A1n=20Stetcu=20Stepanov?=
 <100787553+ZiwiiDev@users.noreply.github.com>
Date: Tue, 7 Nov 2023 17:17:13 +0000
Subject: [PATCH 2/2] Pending changes exported from your codespace

---
 src/App.jsx    |  16 ++++----
 src/styles.css | 107 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 8 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 4fbc89d..63941ab 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,15 +24,15 @@ import "./styles.css";
  * If you don't have one of the social sites listed, leave it as an empty string.
  */
 const siteProps = {
-  name: "Alexandrie Grenier",
-  title: "Web Designer & Content Creator",
-  email: "alex@example.com",
-  gitHub: "microsoft",
-  instagram: "microsoft",
-  linkedIn: "satyanadella",
+  name: "Oliver Fabian Stetcu Stepanov",
+  title: "Full Stack Developer",
+  email: "oliverfabian22@gmail.com",
+  gitHub: "ZiwiiDev",
+  instagram: "@oliveristhenamx",
+  linkedIn: "Oliver Fabian Stetcu",
   medium: "",
-  twitter: "microsoft",
-  youTube: "Code",
+  twitter: "NotZiuenn",
+  youTube: "Creative Tones",
 };
 
 const primaryColor = "#4E567E";
diff --git a/src/styles.css b/src/styles.css
index 999a174..c37a52c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -123,3 +123,110 @@ img.socialIcon {
   height: 30px;
   width: 30px;
 }
+
+/* add an amazing animation to the social icons */
+img.socialIcon:hover {
+  animation: bounce 0.5s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .container .box {
+    margin-bottom: 20px;
+  }
+}
+/* Path: src/components/About.js */
+/**
+* About component
+*/
+
+.about {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: 800px;
+  min-height: 100vh;
+  padding: 5rem 1rem;
+}
+
+.about h1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+.about h2 {
+  font-size: 2.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+.about p {
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+.about ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.about ul li {
+  flex-basis: 45%;
+}
+
+.about ul li a {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-decoration: none;
+}
+
+.about ul li a img {
+  height: 50px;
+  margin-right: 20px;
+  width: 50px;
+}
+
+.about ul li a h3 {
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+.about ul li a p {
+  font-size: 1.5rem;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+.about .image {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+}