feat: build website

layouts/_default/about.html

@@ -0,0 +1,86 @@
+{{ define "head" }}
+<meta name="description" content="{{ .Params.description }}">
+<link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/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 }}