added about in home page

8 files changed, 124 insertions, 2 deletions

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 0461003..213855f 100644
--- a/exampleSite/config.yaml
+++ b/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:

diff --git a/exampleSite/static/images/me.png b/exampleSite/static/images/me.png
new file mode 100644
index 0000000..97dd321
--- /dev/null
+++ b/exampleSite/static/images/me.png
diff --git a/layouts/index.html b/layouts/index.html
index d779177..d57bf2c 100644
--- a/layouts/index.html
+++ b/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" . -}}

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4425539..f12a297 100644
--- a/layouts/partials/head.html
+++ b/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" }};

     }

diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html
new file mode 100644
index 0000000..92ada9f
--- /dev/null
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html
index becb220..09fabe5 100644
--- a/layouts/partials/sections/header.html
+++ b/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>

diff --git a/static/css/index.css b/static/css/index.css
index d14a4ce..8fda0a2 100644
--- a/static/css/index.css
+++ b/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 {

diff --git a/static/css/theme.css b/static/css/theme.css
index a6413f4..a1be949 100644
--- a/static/css/theme.css
+++ b/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);