Add typewriter effect for poet front matter on single pages
This commit is contained in:
+2
-5
@@ -1,5 +1,7 @@
|
||||
---
|
||||
draft: false
|
||||
poet: |
|
||||
驾驶教练机拉杆起飞的那一刻/宇治城的小溪边被斜阳刺痛双眼的那一刻/在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻/我清楚的感受到我是我自己
|
||||
---
|
||||
{{< hextra-hero-subtitle >}}
|
||||
Fukun.Net/about
|
||||
@@ -16,9 +18,6 @@ draft: false
|
||||
由于公司管理制度，我不可以参与盈利项目，所以无法接洽商务合作。
|
||||
|
||||
|
||||
驾驶教练机拉杆起飞的那一刻/宇治城的小溪边被斜阳刺痛双眼的那一刻/在广汕国道上骑自行车听到路旁大爷大喊加油的那一刻/我清楚的感受到我是我自己
|
||||
|
||||
|
||||
Hey, I'm FuKun.
|
||||
|
||||
Solo developer. Ex-product manager. China state-owned enterprise manager. New dad. Most of my waking hours go to my career — I've done IT operations automation at scale, built billing systems handling massive transaction volumes, architected security for enormous resource pools, and untangled enterprise identity governance. It's been fun.
|
||||
@@ -28,5 +27,3 @@ This site isn't about methodology or technique. It's about the **self** that sho
|
||||
If you're trying to carve out space for your own self amid the chaos — chasing down a wild idea, researching something obscure, building something that's just yours — the writing here might spark something.
|
||||
|
||||
A note on logistics: due to company policy, I can't participate in for-profit projects, so I don't take on business collaborations.
|
||||
|
||||
The moment when I pulled back the Cessena's stick. The moment setting sun stinged my eyes by a stream in Uji.The moment an old sir shouted "COME ON!" as I was crossing South-China by bike. Without question, that I was aware WHOIAM.
|
||||
|
||||
@@ -1,21 +1,95 @@
|
||||
{{ define "main" }}
|
||||
<div class='hx:mx-auto hx:flex hextra-max-page-width'>
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
|
||||
{{ partial "toc.html" . }}
|
||||
<article class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]">
|
||||
<main id="content" class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12">
|
||||
<div class="hx:mx-auto hx:flex hextra-max-page-width">
|
||||
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true
|
||||
"displayPlaceholder" true) }} {{ partial "toc.html" . }}
|
||||
<article
|
||||
class="hx:w-full hx:break-words hx:flex hx:min-h-[calc(100vh-var(--navbar-height))] hx:min-w-0 hx:justify-center hx:pb-8 hx:pr-[calc(env(safe-area-inset-right)-1.5rem)]"
|
||||
>
|
||||
<main
|
||||
id="content"
|
||||
class="hx:w-full hx:min-w-0 hextra-max-content-width hx:px-6 hx:pt-4 hx:md:px-12"
|
||||
>
|
||||
{{ partial "breadcrumb.html" (dict "page" . "enable" false) }}
|
||||
<br class="hx:mt-1.5 hx:text-sm" />
|
||||
{{ if .Title }}
|
||||
<h1 class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100">{{ .Title }}</h1>
|
||||
<h1
|
||||
class="hx:text-center hx:mt-2 hx:text-4xl hx:font-bold hx:tracking-tight hx:text-slate-900 hx:dark:text-slate-100"
|
||||
>
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<div class="hx:mb-16"></div>
|
||||
{{ end }}
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
{{ .Content }} {{- with .Params.poet }}
|
||||
<div
|
||||
id="typewriter-box"
|
||||
style="
|
||||
opacity: 0;
|
||||
transition: opacity 0.6s;
|
||||
margin-top: 1.5em;
|
||||
"
|
||||
>
|
||||
<p id="typewriter-text"></p>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var all = `{{ . }}`;
|
||||
var i = 0,
|
||||
del = false,
|
||||
dc = 0;
|
||||
var te = document.getElementById("typewriter-text");
|
||||
var box = document.getElementById("typewriter-box");
|
||||
if (!te || !box) return;
|
||||
var obs = new IntersectionObserver(
|
||||
function (e) {
|
||||
if (e[0].isIntersecting) {
|
||||
box.style.opacity = "1";
|
||||
obs.disconnect();
|
||||
go();
|
||||
}
|
||||
},
|
||||
{ rootMargin: "120px" },
|
||||
);
|
||||
obs.observe(box);
|
||||
function go() {
|
||||
setTimeout(
|
||||
function () {
|
||||
if (
|
||||
!del &&
|
||||
Math.random() < 0.1 &&
|
||||
i > 8 &&
|
||||
all.charAt(i - 1) !== "\n"
|
||||
) {
|
||||
del = true;
|
||||
dc = Math.floor(Math.random() * 4) + 1;
|
||||
}
|
||||
if (del) {
|
||||
i = Math.max(0, i - 1);
|
||||
dc--;
|
||||
if (
|
||||
dc <= 0 ||
|
||||
i === 0 ||
|
||||
all.charAt(i - 1) === "\n"
|
||||
)
|
||||
del = false;
|
||||
} else {
|
||||
if (i < all.length) i++;
|
||||
}
|
||||
te.textContent = all.substring(0, i);
|
||||
if (i < all.length || del) go();
|
||||
},
|
||||
del
|
||||
? 55 + Math.random() * 30
|
||||
: 70 + Math.random() * 100,
|
||||
);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="hx:mt-16"></div>
|
||||
{{ partial "components/comments.html" . }}
|
||||
</main>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user