-
Notifications
You must be signed in to change notification settings - Fork 0
/
colophon.html
83 lines (73 loc) · 4.29 KB
/
colophon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<!-- Security -->
<meta name="robots" content="noarchive, nofollow, noai, noimageai">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-XSS-Protection" content="0">
<!-- Authorship -->
<meta name="author" content="Poyi Liu | https://github.com/fraubentz">
<meta name="image" content="img/portraitpoyibentz.webp" description="Cartoon image of Poyi Liu">
<meta name="description" content="Website of Poyi Liu">
<!-- Favicon -->
<link rel="icon" href="img/pyfavicon.webp" type="image/x-icon">
<title>PY Liu</title>
<!-- External CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Background Image -->
<div class="background-image"></div>
<div class="whole-container">
<main>
<h1>PY Liu <input type="image" src="img/darkmode.webp" width="40" height="40" alt="Dark-mode Button" id="btnBack"></h1>
<h2>//colophon</h2>
<nav>
<a href="index.html"><div class="navbutton">_home</div></a>
<a href="about.html"><div class="navbutton">_about</div></a>
<a href="now.html"><div class="navbutton">_now</div></a>
<a href="nbook.html"><div class="navbutton">_notebook</div></a>
<a href="contact.html"><div class="navbutton">_contact</div></a>
</nav>
<div class="code-block">
I chose to forgo implementing any framework and built this website from scratch using HTML (semantic markups and coming soon, microformats), CSS, and a few JS bits. My go-to code editor is <a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer"><div class="txtbutton">Visual Studio Code</div></a>. I intend to stick to HTML and CSS as much as possible. I will use JavaScript only when necessary.
The source code for the site is hosted in a <a href="https://github.com/fraubentz/fraubentz.github.io" target="_blank" rel="noopener noreferrer"><div class="txtbutton">public repository</div></a> on GitHub. The whole project is deployed via <a href="https://pages.github.com/" target="_blank" rel="noopener noreferrer"><div class="txtbutton">GitHub Pages</div></a>, as well as <a href="https://www.cloudflare.com/" target="_blank" rel="noopener noreferrer"><div class="txtbutton">Cloudflare</div></a>. At the moment, I am still figuring which deployment manager suits me best.
As I work on this website, I have the following priorities in mind:
1) Accessibility
2) Mobile-first design principles
3) Security and privacy
4) Carbon footprint reduction
5) Speed and energy efficiency
This site does not track its visitors nor does it allow web scrapers and crawlers. No cookies can be found either.
</div>
</main>
<footer>
<div class="social">
<a href="mailto:[email protected]"><img src="img/email.svg" width="20" height="20" alt="Email Icon"></a>
<a href="https://github.com/fraubentz" target="_blank" rel="noopener noreferrer"><img src="img/github-octocat.svg" width="20" height="20" alt="GitHub Icon"></a>
<a href="https://codepen.io/fraubentz" target="_blank" rel="noopener noreferrer"><img src="img/codepen-icon.svg" width="20" height="20" alt="CodePen Icon"></a>
</div>
<p><b>Coded with ❤ by Yours Truly</b></p>
<p> </p>
<p> Copyright © <span id="current-year"></span> Poyi Liu. All rights reserved.</p>
<a href="colophon.html"><div class="colophon-button">Colophon</div></a>
</footer>
</div>
<!-- Toggle Dark Mode -->
<script>
let btnBack = document.getElementById("btnBack");
btnBack.addEventListener('click', function() {
document.body.classList.toggle('dark-mode');
});
</script>
<!-- Copyright Date Script -->
<script>
document.getElementById("current-year").textContent = new Date().getFullYear();
</script>
</body>
</html>