update

exampleSite/content/about.md

@@ -0,0 +1,29 @@
+---
+title: "About Me"
+date: 2021-04-03T22:53:58+05:30
+draft: false
+description: ""
+
+name: "Isabella"
+image: /images/me.png
+socialLinks:
+  fontAwesomeIcons:
+    - icon: fab fa-github
+      url: https://example.com
+    - icon: fab fa-twitter
+      url: https://example.com
+  customIcons:
+    - icon: /fav.png
+      url: "https://example.com"
+layout: about
+---
+
+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.
+
+Here are a few technologies I've been working with recently:
+
+- React
+- Node
+- Express

exampleSite/content/experience.md

@@ -0,0 +1,29 @@
+---
+title: "About Me"
+date: 2021-04-03T22:53:58+05:30
+draft: false
+description: ""
+
+name: "Isabella"
+image: /images/me.png
+socialLinks:
+  fontAwesomeIcons:
+    - icon: fab fa-github
+      url: https://example.com
+    - icon: fab fa-twitter
+      url: https://example.com
+  customIcons:
+    - icon: /fav.png
+      url: "https://example.com"
+layout: experience
+---
+
+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.
+
+Here are a few technologies I've been working with recently:
+
+- React
+- Node
+- Express

layouts/_default/about.html

@@ -1,6 +1,6 @@
 {{ define "head" }}
 <meta name="description" content="{{ .Params.description }}">
-<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/about.css">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/multipage/about.css">
 
 <!-- fontawesome -->
 <script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>

layouts/_default/experience.html

@@ -0,0 +1,86 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Params.description }}">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/multipage/about.css">
+
+<!-- fontawesome -->
+<script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script>
+{{ end }}
+
+{{ define "title" }}
+{{.Title }} | {{ .Site.Title }}
+{{ end }}
+
+{{ define "main" }}
+<section id="single">
+    <div class="container">
+        <div class="title mb-3">
+            <h1 class="text-center mb-4">{{ .Title }}</h1>
+        </div>
+        <div class="row justify-content-center">
+            {{ if .Params.image }}
+            <div class="col-sm-12 col-md-12 col-lg-3 px-3">
+                <div class="sticky-sidebar">
+                    <aside class="aboutImg">
+                        <div class="text-center">
+                            <img src="{{ .Params.image }}" class="mx-auto rounded" alt="">
+                        </div>
+                        <h2 class="text-center pt-3">
+                            {{ .Params.name }}
+                        </h2>
+                        <div class="aboutImg-content">
+                            <ul class="list-inline pt-3 text-center">
+                                {{ range .Params.socialLinks.fontAwesomeIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank">
+                                        <i class="{{ .icon }}"></i>
+                                    </a>
+                                </li>
+                                {{ end }}
+
+                                {{ range .Params.socialLinks.customIcons }}
+                                <li class="list-inline-item text-center">
+                                    <a href="{{ .url }}" target="_blank" class="img-icon">
+                                        <img src="{{ .icon }}">
+                                    </a>
+                                </li>
+                                {{ end }}
+                            </ul>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+            {{ end }}
+
+            <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2">
+                <div class="pr-lg-4">
+                    <article class="page-content p-2">
+                        {{ .Content | emojify }}
+                    </article>
+                </div>
+            </div>
+        </div>
+    </div>
+    <button class="p-2 px-3" onclick="topFunction()" id="topScroll">
+        <i class="fas fa-angle-up"></i>
+    </button>
+</section>
+
+<script>
+    var topScroll = document.getElementById("topScroll");
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topScroll.style.display = "block";
+        } else {
+            topScroll.style.display = "none";
+        }
+    }
+
+    function topFunction() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+</script>
+
+{{ end }}