vcard

fhfuih · May 2, 2024 · b16d43b · b16d43b
1 parent d08f7df
commit b16d43b
Show file tree

Hide file tree

Showing 10 changed files with 339 additions and 5 deletions.
diff --git a/assets/vcard.scss b/assets/vcard.scss
@@ -0,0 +1,154 @@
+html, body, main {
+    height: 100%;
+}
+
+main {
+    overflow: auto;
+}
+
+.container-outer {
+    width: 100%;
+    max-width: 90mm;
+    height: 100%;
+    padding: 10px;
+    margin: auto;
+    // background-color: wheat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container-inner {
+    height: 100%;
+    aspect-ratio: 6/4;
+    max-width: 100%;
+    // background-color: pink;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.card-wrapper {
+    width: 100%;
+    aspect-ratio: 16/9;
+    position: relative;
+}
+
+.card {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    background-color: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(30px) saturate(180%);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+    border-radius: 6px;
+
+    padding: 8% 5% 5%;
+    overflow:hidden;
+    font-size: 60%; // Every text inside the card will be relative to this size
+
+    address {
+        height: 100%;
+        width: 100%;
+        font-style: normal;
+        display: flex;
+        flex-direction: column;
+    }
+
+    p {
+        margin: 0 0 2%;
+        svg {
+            width: 0.8em;
+            height: 0.8em;
+            vertical-align: -0.1em;
+            margin: 0 0.1em;
+        }
+    }
+
+    .info {
+        flex: 1;
+        display: flex;
+    }
+
+    .info-text {
+        flex: 1;
+    }
+
+    .name {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin-bottom: 5%;
+    }
+
+    .position {
+        font-family: 'Fira Sans Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
+    }
+
+    ul.links {
+        list-style: none;
+
+        padding: 0;
+        margin: auto;
+        width: 100%;
+
+        display: flex;
+        justify-content: space-around;
+
+        li {
+            display: block;
+            text-align: center;
+
+            svg {
+                width: 2em;
+                height: 2em;
+            }
+        }
+    }
+
+    .avatar {
+        border-radius: 9999px;
+        width: 5em;
+        height: 5em;
+    }
+}
+
+.sphere {
+    z-index: -1;
+    position: absolute;
+    border-radius:50%;
+    // animation:spin 3s linear infinite;
+    // transform:rotate(-15deg);
+}
+
+.sphere:after{
+    content:"";
+    position:absolute;
+    z-index:12;
+    top:0;
+    left:0;
+    height:100%;
+    width:100%;
+    border-radius:50%;
+    box-shadow:
+        inset -30px -30px 20px 15px #6d6d6d29,
+        // inset -2px -2px 8px 0px #6d6d6d64,
+        inset 2px 2px 5px 0px rgba(255, 255, 255, 0.374),
+        inset 20px 20px 40px 15px rgba(255, 255, 255, 0.71);
+}
+
+.sphere:nth-of-type(1) {
+    top: -150px;
+    left: -200px;
+    height:300px;
+    width:300px;
+    background-color: tomato;
+}
+
+.sphere:nth-of-type(2) {
+    right: -100px;
+    bottom: -100px;
+    height:180px;
+    width:180px;
+    background-color:royalblue;
+}
diff --git a/content/vcard.en.md b/content/vcard.en.md
@@ -0,0 +1,64 @@
+---
+title: "vCard"
+date: 2024-05-02T10:45:07+08:00
+lang: en
+draft: true
+layout: plain
+type: card
+---
+
+<address>
+
+<div class="info">
+  <div class="info-text">
+    <p class="name">HUANG, Zeyu (黄泽宇)</p>
+    <p class="position">Ph.D. Candidate in Computer Science</p>
+    <p class="position">
+      Human-Computer Interaction Initiative<br/>
+      The Hong Kong University of Science and Technology
+    </p>
+    {{< card-email.inline >}}
+    <p class="email"><b>zhuangbi</b>{{ partial "helper/icon" "at" }}connect.ust.hk</p>
+    {{< /card-email.inline >}}
+  </div>
+
+  {{< card-image.inline >}}
+    {{ $avatar := resources.Get "avatar.jpg" }}
+    <img src="{{ $avatar.RelPermalink }}" id="avatar" class="avatar" loading="lazy" alt="A very handsome face of mine">
+  {{< /card-image.inline >}}
+</div>
+
+{{< card-links.inline >}}
+<ul class="links">
+  {{ range .Site.Menus.social }}
+  {{ if gt .Weight 10 }}{{ break }}{{ end }}
+  <li>
+    <a
+      href='{{ .URL }}'
+      class="icon-button"
+      {{ if eq (default true .Params.newTab) true }}target="_blank" rel="noreferrer noopener"{{ end }}
+      title="{{ .Name }}"
+    >
+      {{ $icon := default "link" .Params.Icon }}
+      {{ with $icon }}
+          {{ partial "helper/icon" . }}
+      {{ end }}
+      <div>{{ .Name }}</div>
+    </a>
+  </li>
+  {{ end }}
+  <li>
+    <a
+      href='https://yellowzeyu.com'
+      class="icon-button"
+      rel="noreferrer noopener"
+      title="Homepage"
+    >
+      {{ partial "helper/icon" "building-pavilion" }}
+      <div>Homepage</div>
+    </a>
+  </li>
+</ul>
+{{< /card-links.inline >}}
+
+</address>
diff --git a/content/vcard.md b/content/vcard.md
@@ -0,0 +1,61 @@
+---
+title: "vCard"
+date: 2024-05-02T10:44:55+08:00
+lang: zh-cn
+draft: true
+layout: plain
+type: card
+---
+
+<address>
+
+<div class="info">
+  <div class="info-text">
+    <p class="name">黄泽宇（HUANG, Zeyu）</p>
+    <p class="position">香港科技大学计算机系</p>
+    <p class="position">人机交互方向博士候选人</p>
+    {{< card-email.inline >}}
+    <p class="email"><b>zhuangbi</b>{{ partial "helper/icon" "at" }}connect.ust.hk</p>
+    {{< /card-email.inline >}}
+  </div>
+
+  {{< card-image.inline >}}
+    {{ $avatar := resources.Get "avatar.jpg" }}
+    <img src="{{ $avatar.RelPermalink }}" id="avatar" class="avatar" loading="lazy" alt="A very handsome face of mine">
+  {{< /card-image.inline >}}
+</div>
+
+{{< card-links.inline >}}
+<ul class="links">
+  {{ range .Site.Menus.social }}
+  {{ if gt .Weight 10 }}{{ break }}{{ end }}
+  <li>
+    <a
+      href='{{ .URL }}'
+      class="icon-button"
+      {{ if eq (default true .Params.newTab) true }}target="_blank" rel="noreferrer noopener"{{ end }}
+      title="{{ .Name }}"
+    >
+      {{ $icon := default "link" .Params.Icon }}
+      {{ with $icon }}
+          {{ partial "helper/icon" . }}
+      {{ end }}
+      <div>{{ .Name }}</div>
+    </a>
+  </li>
+  {{ end }}
+  <li>
+    <a
+      href='https://yellowzeyu.com'
+      class="icon-button"
+      rel="noreferrer noopener"
+      title="Homepage"
+    >
+      {{ partial "helper/icon" "building-pavilion" }}
+      <div>Homepage</div>
+    </a>
+  </li>
+</ul>
+{{< /card-links.inline >}}
+
+</address>
diff --git a/hugo.yaml b/hugo.yaml
@@ -67,20 +67,26 @@ menu:
       params:
         icon: notebook
   social:
-    - name: GitHub
-      url: https://github.com/fhfuih
-      params:
-        icon: brand-github
+    # Serious platforms: 0x
     - name: LinkedIn
       url: https://www.linkedin.com/in/zeyu-huang-522a52178/
+      weight: 1
       params:
         icon: brand-linkedin
     - name: ORCiD
       url: https://orcid.org/0000-0001-8199-071X
+      weight: 2
       params:
         icon: orcid
-    - name: bilibili
+    - name: GitHub
+      url: https://github.com/fhfuih
+      weight: 3
+      params:
+        icon: brand-github
+    # Casual platforms: 1x
+    - name: Bilibili
       url: https://space.bilibili.com/7605906
+      weight: 11
       params:
         icon: brand-bilibili
     # params:
@@ -124,6 +130,9 @@ markup:
     renderer:
       unsafe: true
 
+security:
+  enableInlineShortcodes: true
+
 capitalizeListTitles: false # do not capitalize section, taxonomy, and term pages not backed by a file
 
 # debug

diff --git a/layouts/_default/plain-baseof.html b/layouts/_default/plain-baseof.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}" dir="{{ default `ltr` .Language.LanguageDirection }}">
+    <head>
+        {{- partial "head/head.html" . -}}
+        {{- block "head" . -}}{{ end }}
+    </head>
+    <body class="home">
+        {{ `<!-- Template: layouts/plain-baseof.html -->` | safeHTML }}
+        {{- partial "head/colorScheme" . -}}
+
+        <main class="">
+                {{- block "main" . -}}{{- end -}}
+        </main>
+
+        {{ partial "footer/include.html" . }}
+    </body>
+</html>
diff --git a/layouts/blog/blog.html b/layouts/blog/blog.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+    {{ `<!-- Template: layouts/blog/blog.html -->` | safeHTML }}
     {{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
     {{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
     {{ $filtered := ($pages | intersect $notHidden) }}

diff --git a/layouts/card/single.html b/layouts/card/single.html
@@ -0,0 +1,23 @@
+{{ define "head" }}
+{{ $sass := resources.Get "vcard.scss" }}
+{{ $style := $sass | resources.ToCSS | minify }}
+<link rel="stylesheet" href="{{ $style.RelPermalink }}">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
+{{ end }}
+
+{{ define "main" }}
+{{ `<!-- Template: layouts/card/single.html -->` | safeHTML }}
+<div class="container-outer">
+    <div class="container-inner">
+        <div class="card-wrapper">
+            <div class="sphere"></div>
+            <div class="sphere"></div>
+            <div class="card">
+                {{ .Content }}
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
diff --git a/layouts/index-baseof.html b/layouts/index-baseof.html
@@ -5,6 +5,7 @@
         {{- block "head" . -}}{{ end }}
     </head>
     <body class="home">
+        {{ `<!-- Template: layouts/index-baseof.html -->` | safeHTML }}
         {{- partial "head/colorScheme" . -}}
 
         <header>

diff --git a/layouts/index.html b/layouts/index.html
@@ -38,6 +38,7 @@ <h1 class="header-title">{{ .Site.Title }}</h1>
 {{ end }}
 
 {{ define "main" }}
+{{ `<!-- Template: layouts/index.html -->` | safeHTML }}
 {{ $hasPublications := isset $.Site.Data.personal "publications" }}
 {{ $hasProjects := isset $.Site.Data.personal "projects" }}
 {{ $hasExperiences := isset $.Site.Data.personal "experiences" }}

diff --git a/static/robots.txt b/static/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /vcard
+Disallow: /*/vcard