added about in home page

exampleSite/config.yaml

@@ -49,6 +49,7 @@ params:
   #   textColor: 
   #   secondaryTextColor:
   #   backgroundColor:
+  #   secondaryBackgroundColor:
   #   primaryColor:
   #   secondaryColor:
 
@@ -56,6 +57,7 @@ params:
   #     textColor: 
   #     secondaryTextColor:
   #     backgroundColor:
+  #     secondaryBackgroundColor:
   #     primaryColor:
   #     secondaryColor:
 
@@ -85,6 +87,25 @@ params:
       name: "Get in touch"
       url: "#contact"
 
+  # About
+  about:
+    enable: true
+    title: "About Me"
+    image: '/images/me.png'
+    content: |-
+      I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. 
+      
+      I am currently working on a project that will be used to help people find the best way to get around the city.
+    skills:
+      enable: true
+      title: "Here are a few technologies I've been working with recently:"
+      items:
+        - "HTML"
+        - "CSS"
+        - "JavaScript"
+        - "React"
+        - "Node"
+        - "Express"
 
   # Achievements
   achievements:

layouts/index.html

@@ -13,6 +13,7 @@
 
 {{ define "main" }}
 {{- partial "sections/hero.html" . -}}
+{{- partial "sections/about.html" . -}}
 {{- partial "sections/projects.html" . -}}
 {{- partial "sections/achievements.html" . -}}
 {{- partial "sections/contact.html" . -}}

layouts/partials/head.html

@@ -36,6 +36,7 @@
         --text-color: {{ .Site.Params.color.textColor | default "#343a40" }};
         --text-secondary-color: {{ .Site.Params.color.secondaryTextColor | default "#6c757d" }};
         --background-color: {{ .Site.Params.color.backgroundColor | default "#eaedf0" }};
+        --secondary-background-color: {{ .Site.Params.color.secondaryBackgroundColor | default "#64ffda1a" }};
         --primary-color: {{ .Site.Params.color.primaryColor | default "#007bff" }};
         --secondary-color: {{ .Site.Params.color.secondaryColor | default "#f8f9fa" }};
 
@@ -43,6 +44,7 @@
         --text-color-dark: {{ .Site.Params.color.darkmode.textColor | default "#e4e6eb" }};
         --text-secondary-color-dark: {{ .Site.Params.color.darkmode.secondaryTextColor | default "#b0b3b8" }};
         --background-color-dark: {{ .Site.Params.color.darkmode.backgroundColor | default "#18191a" }};
+        --secondary-background-color-dark: {{ .Site.Params.color.darkmode.secondaryBackgroundColor | default "#212529" }};
         --primary-color-dark: {{ .Site.Params.color.darkmode.primaryColor | default "#ffffff" }};
         --secondary-color-dark: {{ .Site.Params.color.darkmode.secondaryColor | default "#212529" }};
     }

layouts/partials/sections/about.html

@@ -0,0 +1,28 @@
+{{ if .Site.Params.about.enable | default false }}
+<section id="about" class="py-5">
+    <div class="container bg-transparent">
+        <h3 class="text-center bg-transparent">{{ .Site.Params.about.title }}</h3>
+        <div class="bg-transparent row justify-content-center px-3 py-5">
+            <div class="col-md-6 h-100 content">
+                {{ .Site.Params.about.content | markdownify }}
+
+                {{ if .Site.Params.about.skills.enable }}
+                {{ .Site.Params.about.skills.title }}
+                <ul>
+                    {{ range .Site.Params.about.skills.items }}
+                    <li>{{ . | markdownify }}</li>
+                    {{ end }}
+                </ul>
+                {{ end }}
+            </div>
+            {{ if .Site.Params.about.image }}
+            <div class="col-md-4 mt-sm-5 mt-md-0">
+                <div class="image d-flex">
+                    <img src="{{ .Site.Params.about.image }}" class="img-thumbnail mx-auto rounded-circle" alt="">
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/partials/sections/header.html

@@ -48,7 +48,11 @@
             <!-- navbar content -->
             <div class="collapse navbar-collapse text-wrap primary-font" id="navbarContent">
                 <ul class="navbar-nav {{ .Site.Params.navbar.align | default " ms-auto"}} text-center">
-                    {{ if not (.Site.Params.navbar.menus.disableAbout | default false) }}
+                    {{
+                    if and
+                    (.Site.Params.about.enable | default false)
+                    (not (.Site.Params.navbar.menus.disableAbout | default false))
+                    }}
                     <li class="nav-item navbar-text">
                         <a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
                     </li>

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 {

static/css/theme.css

@@ -7,6 +7,7 @@
 /* dark mode */
 .dark {
     --background-color: var(--background-color-dark) !important;
+    --secondary-background-color: var(--secondary-background-color-dark) !important;
     --text-color: var(--text-color-dark) !important;
     --text-secondary-color: var(--text-secondary-color-dark) !important;
     --primary-color: var(--primary-color-dark);