yanlin/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize page loads

Browse source
This commit is contained in:
Yan Lin 2025-06-09 16:35:46 +02:00
parent 1f6393cef9
commit 1f1e944852
11 changed files with 235 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dist/css/bootstrap.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
dist/css/bootstrap.min.css.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

5
dist/index.css → dist/css/index.css vendored
View file

@ -177,4 +177,9 @@ footer {
.light-mode-text {
display: none;
}
}
.footer-text {
font-size: 0.8rem;
font-family: var(--link-font-family);
}

113
dist/index.html vendored
View file

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yan Lin's Homepage</title>
<link rel="icon" href="/logo.webp" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/index.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
</head>
@ -21,54 +20,60 @@
<div class="col-2">
<a class="link-secondary header-icon px-2 h4" href="mailto:s@yanlincs.com"><i class="bi bi-envelope-fill"></i></a>
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="mailto:s@yanlincs.com">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/>
</svg>
</a>
</div>
<div class="col-8 text-center">
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">Yan Lin's Homepage</div>
</div>
<div class="col-2 text-end">
<div class="col-2 d-flex justify-content-end">
<a class="link-secondary header-icon px-2 h4" href="https://github.com/Logan-Lin"><i class="bi bi-github"></i></a>
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="https://github.com/Logan-Lin" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
</div>
</div>
<nav class="navbar navbar-expand">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-5">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-4 gap-sm-5">
<li class="nav-item">
<a class="link nav-link px-0" href="/#publications"
><i class="bi bi-book d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Publications</span></a
>
<a class="link nav-link px-0" href="/#publications">
<span class="d-inline d-md-none">Pub</span>
<span class="d-none d-md-inline">Publications</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#projects"
><i class="bi bi-code-slash d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Projects</span></a
>
<a class="link nav-link px-0" href="/#projects">
<span class="d-inline d-md-none">Proj</span>
<span class="d-none d-md-inline">Projects</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#presentations"
><i class="bi bi-easel d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Presentations</span></a
>
<a class="link nav-link px-0" href="/#presentations">
<span class="d-inline d-md-none">Present</span>
<span class="d-none d-md-inline">Presentations</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#services"
><i
class="bi bi-person-lines-fill d-inline d-md-none d-lg-inline"
></i>
<span class="d-none d-md-inline">Services</span></a
>
<a class="link nav-link px-0" href="/#services">
<span class="d-inline d-md-none">Serve</span>
<span class="d-none d-md-inline">Services</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="https://blog.yanlincs.com"
><i class="bi bi-newspaper d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Blog</span></a
>
<a class="link nav-link px-0" href="https://blog.yanlincs.com">
<span class="d-inline d-md-none">Blog</span>
<span class="d-none d-md-inline">Blog</span>
</a>
</li>
</ul>
</nav>
@ -104,15 +109,14 @@
</div>
<article class="section" id="publications">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-book"></i> Publications
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/publications/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/publications/">
View All
</a>
</div>
<div>
<div id="primary-publications" class="list-group list-group-flush">
@ -433,15 +437,14 @@
</article>
<article class="section" id="projects">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-code-slash"></i> Projects
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/projects/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/projects/">
View All
</a>
</div>
<div>
<div id="primary-projects" class="list-group list-group-flush">
@ -529,15 +532,14 @@
</article>
<article class="section" id="presentations">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-easel"></i> Presentations
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/presentations/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/presentations/">
View All
</a>
</div>
<div class="list-group list-group-flush" id="presentation-list">
<div class="list-group-item px-0">
@ -634,16 +636,17 @@
<footer>
<div class="container">
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">
<span class="dark-mode-text"><i class="bi bi-moon-fill"></i> ずっと真夜中でいいのに。</span>
<span class="light-mode-text"><i class="bi bi-sun-fill"></i> ずっと正午でいいのに。</span>
<span class="mx-1">|</span>
<p class="text-center text-secondary footer-text">
Designed and implemented by Yan Lin.
</p>
</div>
</footer>
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
</svg>
</button>
<script>
@ -651,9 +654,11 @@
window.addEventListener('scroll', function() {
var backToTopButton = document.getElementById('back-to-top');
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
backToTopButton.classList.remove('d-none');
backToTopButton.classList.add('d-flex');
} else {
backToTopButton.style.display = 'none';
backToTopButton.classList.add('d-none');
backToTopButton.classList.remove('d-flex');
}
});

31
dist/presentations/index.html vendored
View file

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yan Lin's Presentations</title>
<link rel="icon" href="/logo.webp" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/index.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
</head>
@ -21,14 +20,19 @@
<div class="col-2">
<a class="link-secondary header-icon px-2 h4" href="/"><i class="bi bi-house-fill"></i></a>
<a class="link-secondary header-icon mx-2 px-2 py-0 my-0 h4 d-flex align-items-center" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
</svg>
</a>
</div>
<div class="col-8 text-center">
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">Yan Lin's Presentations</div>
</div>
<div class="col-2 text-end">
<div class="col-2 d-flex justify-content-end">
@ -121,16 +125,17 @@
<footer>
<div class="container">
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">
<span class="dark-mode-text"><i class="bi bi-moon-fill"></i> ずっと真夜中でいいのに。</span>
<span class="light-mode-text"><i class="bi bi-sun-fill"></i> ずっと正午でいいのに。</span>
<span class="mx-1">|</span>
<p class="text-center text-secondary footer-text">
Designed and implemented by Yan Lin.
</p>
</div>
</footer>
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
</svg>
</button>
<script>
@ -138,9 +143,11 @@
window.addEventListener('scroll', function() {
var backToTopButton = document.getElementById('back-to-top');
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
backToTopButton.classList.remove('d-none');
backToTopButton.classList.add('d-flex');
} else {
backToTopButton.style.display = 'none';
backToTopButton.classList.add('d-none');
backToTopButton.classList.remove('d-flex');
}
});

BIN
dist/profile.webp vendored
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Before After
Before After

75
dist/projects/index.html vendored
View file

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yan Lin's Projects</title>
<link rel="icon" href="/logo.webp" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/index.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
</head>
@ -21,14 +20,19 @@
<div class="col-2">
<a class="link-secondary header-icon px-2 h4" href="/"><i class="bi bi-house-fill"></i></a>
<a class="link-secondary header-icon mx-2 px-2 py-0 my-0 h4 d-flex align-items-center" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
</svg>
</a>
</div>
<div class="col-8 text-center">
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">Yan Lin's Projects</div>
</div>
<div class="col-2 text-end">
<div class="col-2 d-flex justify-content-end">
@ -36,38 +40,36 @@
</div>
<!-- <nav class="navbar navbar-expand">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-5">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-4 gap-sm-5">
<li class="nav-item">
<a class="link nav-link px-0" href="/#publications"
><i class="bi bi-book d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Publications</span></a
>
<a class="link nav-link px-0" href="/#publications">
<span class="d-inline d-md-none">Pub</span>
<span class="d-none d-md-inline">Publications</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#projects"
><i class="bi bi-code-slash d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Projects</span></a
>
<a class="link nav-link px-0" href="/#projects">
<span class="d-inline d-md-none">Proj</span>
<span class="d-none d-md-inline">Projects</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#presentations"
><i class="bi bi-easel d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Presentations</span></a
>
<a class="link nav-link px-0" href="/#presentations">
<span class="d-inline d-md-none">Present</span>
<span class="d-none d-md-inline">Presentations</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#services"
><i
class="bi bi-person-lines-fill d-inline d-md-none d-lg-inline"
></i>
<span class="d-none d-md-inline">Services</span></a
>
<a class="link nav-link px-0" href="/#services">
<span class="d-inline d-md-none">Serve</span>
<span class="d-none d-md-inline">Services</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="https://blog.yanlincs.com"
><i class="bi bi-newspaper d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Blog</span></a
>
<a class="link nav-link px-0" href="https://blog.yanlincs.com">
<span class="d-inline d-md-none">Blog</span>
<span class="d-none d-md-inline">Blog</span>
</a>
</li>
</ul>
</nav> -->
@ -189,16 +191,17 @@
<footer>
<div class="container">
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">
<span class="dark-mode-text"><i class="bi bi-moon-fill"></i> ずっと真夜中でいいのに。</span>
<span class="light-mode-text"><i class="bi bi-sun-fill"></i> ずっと正午でいいのに。</span>
<span class="mx-1">|</span>
<p class="text-center text-secondary footer-text">
Designed and implemented by Yan Lin.
</p>
</div>
</footer>
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
</svg>
</button>
<script>
@ -206,9 +209,11 @@
window.addEventListener('scroll', function() {
var backToTopButton = document.getElementById('back-to-top');
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
backToTopButton.classList.remove('d-none');
backToTopButton.classList.add('d-flex');
} else {
backToTopButton.style.display = 'none';
backToTopButton.classList.add('d-none');
backToTopButton.classList.remove('d-flex');
}
});

75
dist/publications/index.html vendored
View file

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yan Lin's Publications</title>
<link rel="icon" href="/logo.webp" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/index.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
</head>
@ -21,14 +20,19 @@
<div class="col-2">
<a class="link-secondary header-icon px-2 h4" href="/"><i class="bi bi-house-fill"></i></a>
<a class="link-secondary header-icon mx-2 px-2 py-0 my-0 h4 d-flex align-items-center" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
</svg>
</a>
</div>
<div class="col-8 text-center">
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">Yan Lin's Publications</div>
</div>
<div class="col-2 text-end">
<div class="col-2 d-flex justify-content-end">
@ -36,38 +40,36 @@
</div>
<!-- <nav class="navbar navbar-expand">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-5">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-4 gap-sm-5">
<li class="nav-item">
<a class="link nav-link px-0" href="/#publications"
><i class="bi bi-book d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Publications</span></a
>
<a class="link nav-link px-0" href="/#publications">
<span class="d-inline d-md-none">Pub</span>
<span class="d-none d-md-inline">Publications</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#projects"
><i class="bi bi-code-slash d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Projects</span></a
>
<a class="link nav-link px-0" href="/#projects">
<span class="d-inline d-md-none">Proj</span>
<span class="d-none d-md-inline">Projects</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#presentations"
><i class="bi bi-easel d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Presentations</span></a
>
<a class="link nav-link px-0" href="/#presentations">
<span class="d-inline d-md-none">Present</span>
<span class="d-none d-md-inline">Presentations</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#services"
><i
class="bi bi-person-lines-fill d-inline d-md-none d-lg-inline"
></i>
<span class="d-none d-md-inline">Services</span></a
>
<a class="link nav-link px-0" href="/#services">
<span class="d-inline d-md-none">Serve</span>
<span class="d-none d-md-inline">Services</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="https://blog.yanlincs.com"
><i class="bi bi-newspaper d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Blog</span></a
>
<a class="link nav-link px-0" href="https://blog.yanlincs.com">
<span class="d-inline d-md-none">Blog</span>
<span class="d-none d-md-inline">Blog</span>
</a>
</li>
</ul>
</nav> -->
@ -477,16 +479,17 @@
<footer>
<div class="container">
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">
<span class="dark-mode-text"><i class="bi bi-moon-fill"></i> ずっと真夜中でいいのに。</span>
<span class="light-mode-text"><i class="bi bi-sun-fill"></i> ずっと正午でいいのに。</span>
<span class="mx-1">|</span>
<p class="text-center text-secondary footer-text">
Designed and implemented by Yan Lin.
</p>
</div>
</footer>
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
</svg>
</button>
<script>
@ -494,9 +497,11 @@
window.addEventListener('scroll', function() {
var backToTopButton = document.getElementById('back-to-top');
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
backToTopButton.classList.remove('d-none');
backToTopButton.classList.add('d-flex');
} else {
backToTopButton.style.display = 'none';
backToTopButton.classList.add('d-none');
backToTopButton.classList.remove('d-flex');
}
});

43
templates/base.html
View file

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Yan Lin{% endblock %}</title>
<link rel="icon" href="/logo.webp" type="image/x-icon">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="/index.css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/index.css">
{% block extra_head %}{% endblock %}
</head>
@ -23,19 +22,32 @@
<div class="col-2">
{% block header_left %}
{% if is_home_page %}
<a class="link-secondary header-icon px-2 h4" href="mailto:s@yanlincs.com"><i class="bi bi-envelope-fill"></i></a>
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="mailto:s@yanlincs.com">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z"/>
</svg>
</a>
{% else %}
<a class="link-secondary header-icon px-2 h4" href="/"><i class="bi bi-house-fill"></i></a>
<a class="link-secondary header-icon mx-2 px-2 py-0 my-0 h4 d-flex align-items-center" href="/">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/>
</svg>
</a>
{% endif %}
{% endblock %}
</div>
<div class="col-8 text-center">
<div class="page-header-logo h2 m-0" style="font-family: Impact, 'Arial Black', 'Franklin Gothic Bold', sans-serif;">{% block header_title %}Yan Lin's Homepage{% endblock %}</div>
</div>
<div class="col-2 text-end">
<div class="col-2 d-flex justify-content-end">
{% block header_right %}
{% if is_home_page %}
<a class="link-secondary header-icon px-2 h4" href="https://github.com/Logan-Lin"><i class="bi bi-github"></i></a>
<a class="link-secondary header-icon mx-2 py-0 my-0 h4 d-flex align-items-center" href="https://github.com/Logan-Lin" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</a>
{% endif %}
{% endblock %}
</div>
@ -48,16 +60,17 @@
<footer>
<div class="container">
<p class="text-center text-secondary" style="font-size: 0.8rem; font-family: 'Lato', sans-serif;">
<span class="dark-mode-text"><i class="bi bi-moon-fill"></i> ずっと真夜中でいいのに。</span>
<span class="light-mode-text"><i class="bi bi-sun-fill"></i> ずっと正午でいいのに。</span>
<span class="mx-1">|</span>
<p class="text-center text-secondary footer-text">
Designed and implemented by Yan Lin.
</p>
</div>
</footer>
<button id="back-to-top" class="btn btn-light rounded-circle" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;"><i class="bi bi-chevron-up"></i></button>
<button id="back-to-top" class="btn btn-light rounded-circle d-none align-items-center justify-content-center" style="position: fixed; bottom: 20px; right: 20px; display: none; z-index: 1000; width: 40px; height: 40px; padding: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"/>
</svg>
</button>
{% block extra_js %}
<script>
@ -65,9 +78,11 @@
window.addEventListener('scroll', function() {
var backToTopButton = document.getElementById('back-to-top');
if (window.scrollY > 100) {
backToTopButton.style.display = 'block';
backToTopButton.classList.remove('d-none');
backToTopButton.classList.add('d-flex');
} else {
backToTopButton.style.display = 'none';
backToTopButton.classList.add('d-none');
backToTopButton.classList.remove('d-flex');
}
});

33
templates/index.html
View file

@ -30,15 +30,14 @@ block content %}
</div>
<article class="section" id="publications">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-book"></i> Publications
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/publications/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/publications/">
View All
</a>
</div>
<div>
<div id="primary-publications" class="list-group list-group-flush">
@ -61,15 +60,14 @@ block content %}
</article>
<article class="section" id="projects">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-code-slash"></i> Projects
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/projects/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/projects/">
View All
</a>
</div>
<div>
<div id="primary-projects" class="list-group list-group-flush">
@ -86,15 +84,14 @@ block content %}
</article>
<article class="section" id="presentations">
<div class="d-flex justify-content-between align-items-center mb-1">
<div class="d-flex align-items-center mb-1">
<h3 class="section-title d-inline-block mb-0">
<i class="bi bi-easel"></i> Presentations
</h3>
<a
class="mb-0 link link-secondary link-underline-opacity-0 h5"
href="/presentations/"
>View All <i class="bi bi-arrow-right-circle"></i
></a>
<div class="flex-grow-1 mx-3" style="border-bottom: 1.5px dashed var(--border-color); height: 1px;"></div>
<a class="mb-0 link link-secondary link-underline-opacity-0 h5" href="/presentations/">
View All
</a>
</div>
<div class="list-group list-group-flush" id="presentation-list">
{% for presentation in data.presentations[:5] %} {% include

44
templates/partials/navigation.html
View file

@ -1,36 +1,34 @@
<nav class="navbar navbar-expand">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-5">
<ul class="navbar-nav d-flex justify-content-evenly mx-auto gap-4 gap-sm-5">
<li class="nav-item">
<a class="link nav-link px-0" href="/#publications"
><i class="bi bi-book d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Publications</span></a
>
<a class="link nav-link px-0" href="/#publications">
<span class="d-inline d-md-none">Pub</span>
<span class="d-none d-md-inline">Publications</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#projects"
><i class="bi bi-code-slash d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Projects</span></a
>
<a class="link nav-link px-0" href="/#projects">
<span class="d-inline d-md-none">Proj</span>
<span class="d-none d-md-inline">Projects</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#presentations"
><i class="bi bi-easel d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Presentations</span></a
>
<a class="link nav-link px-0" href="/#presentations">
<span class="d-inline d-md-none">Present</span>
<span class="d-none d-md-inline">Presentations</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="/#services"
><i
class="bi bi-person-lines-fill d-inline d-md-none d-lg-inline"
></i>
<span class="d-none d-md-inline">Services</span></a
>
<a class="link nav-link px-0" href="/#services">
<span class="d-inline d-md-none">Serve</span>
<span class="d-none d-md-inline">Services</span>
</a>
</li>
<li class="nav-item">
<a class="link nav-link px-0" href="https://blog.yanlincs.com"
><i class="bi bi-newspaper d-inline d-md-none d-lg-inline"></i>
<span class="d-none d-md-inline">Blog</span></a
>
<a class="link nav-link px-0" href="https://blog.yanlincs.com">
<span class="d-inline d-md-none">Blog</span>
<span class="d-none d-md-inline">Blog</span>
</a>
</li>
</ul>
</nav>