added about in home page

static/css/index.css

@@ -9,7 +9,7 @@
 #hero .hero-bottom-svg {
     opacity: 0.5;
     position: absolute;
-    bottom: 20px;
+    bottom: -50px;
     left: -130px;
 }
 
@@ -74,6 +74,71 @@
     width: 100%;
 }
 
+/* about me */
+
+#about h3 {
+    color: var(--text-secondary-color) !important;
+}
+
+#about .image img {
+    max-width: 300px !important;
+    box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
+    transition: box-shadow 0.3s;
+}
+
+#about .image img:hover {
+    box-shadow: 0 0 11px rgb(15 80 100 / 20%);
+}
+
+#about ul {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(140px, 200px));
+    gap: 0px 10px;
+    padding: 0px;
+    margin: 20px 0px 0px;
+    overflow: hidden;
+    list-style: none;
+}
+
+#about ul li {
+    position: relative;
+    margin-bottom: 10px;
+    padding-left: 20px;
+}
+
+#about ul li::before {
+    content: "▹";
+    color: var(--primary-color);
+    position: absolute;
+    left: 0px;
+}
+
+#about .content {
+    opacity: 0.95 !important;
+    line-height: 1.7rem !important;
+}
+
+#about a {
+    display: inline-block;
+    text-decoration: none;
+    color: var(--primary-color) !important;
+}
+
+#about a::after {
+    content: "";
+    display: block;
+    width: 0px;
+    height: 2px;
+    bottom: 0.37em;
+    background-color: var(--primary-color);
+    transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
+    opacity: 0.5;
+}
+
+#about a:hover::after, #about a:focus::after, #about a:active::after {
+    width: 100%;
+}
+
 /* achievements */
 
 #achievements a {