diff --git a/css/animations.css b/css/animations.css
new file mode 100644
index 0000000..5d31228
--- /dev/null
+++ b/css/animations.css
@@ -0,0 +1,57 @@
+@-webkit-keyframes fade {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+ @keyframes fade {
+ from { opacity: 0; }
+ to { opacity: 1; }
+ }
+
+@-webkit-keyframes flicker {
+ 0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(75%); filter: grayscale(75%); }
+ 90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+}
+
+ @keyframes flicker {
+ 0% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 10% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 20% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 30% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 40% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 50% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 60% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 70% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 80% { -webkit-filter: contrast(175%); filter: contrast(175%); -webkit-filter: grayscale(25%); filter: grayscale(25%); }
+ 90% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ 100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); }
+ }
+
+@-webkit-keyframes slime {
+ 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
+ 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
+ 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
+ 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
+ 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
+ 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
+ 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
+}
+
+ @keyframes slime {
+ 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
+ 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); }
+ 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); }
+ 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); }
+ 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); }
+ 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); }
+ 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
+ }
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..8bae4e6
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,10 @@
+/* Josh Comeau's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ */
+@import url('reset.css');
+/* Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
+/* Variables */
+@import url('vars.css');
+/* Animations */
+@import url('animations.css');
+/* Main Styles */
+@import url('styles.css');
\ No newline at end of file
diff --git a/css/reset.css b/css/reset.css
new file mode 100644
index 0000000..680f32e
--- /dev/null
+++ b/css/reset.css
@@ -0,0 +1,23 @@
+*, *::before, *::after { box-sizing: border-box; }
+
+* { margin: 0; }
+
+html, body { height: 100%; }
+
+body {
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+ display: block;
+ max-width: 100%;
+}
+
+input, button, textarea, select { font: inherit; }
+
+p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
+
+#root, #__next { isolation: isolate; }
+
+[hidden] { display: none; }
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..1751c72
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,205 @@
+body {
+ background-color: var(--primary-background-color);
+ color: var(--primary-font-color);
+ font-family: var(--font-monospace);
+ font-size: var(--font-size-body);
+}
+
+main {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-animation: fade 0.75s ease-in;
+ animation: fade 0.75s ease-in;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: var(--space-l);
+ row-gap: var(--space-l);
+}
+
+header {
+ -webkit-animation: flicker 2s linear infinite both;
+ animation: flicker 2s linear infinite both;
+}
+
+header svg { width: 8rem; }
+
+#dock {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ list-style-type: none;
+ min-width: 40rem;
+ padding: 0;
+}
+
+#dock li a {
+ display: block;
+ fill: var(--primary-link-color);
+ min-width: 1.5rem;
+ -webkit-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
+ -o-transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
+ transition: fill 0.25s ease-in-out, margin-top 0.125s cubic-bezier(0.455, 0.030, 0.515, 0.955);
+}
+
+#dock a:focus,
+#dock a:hover {
+ -webkit-animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+ animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
+ fill: var(--primary-link-hover-color);
+ margin-top: -0.25rem;
+ outline: none;
+}
+
+#dock li:nth-child(1) a:focus,
+#dock li:nth-child(1) a:hover { fill: hsl(5, 81%, 56%); } /* Gmail */
+#dock li:nth-child(2) a:focus,
+#dock li:nth-child(2) a:hover { fill: hsl(217, 89%, 61%); } /* Google Calendar */
+#dock li:nth-child(3) a:focus,
+#dock li:nth-child(3) a:hover { fill: hsl(44, 100%, 50%); } /* Google Keep */
+#dock li:nth-child(4) a:focus,
+#dock li:nth-child(4) a:hover { fill: var(--primary-link-hover-color); } /* Notion */
+#dock li:nth-child(5) a:focus,
+#dock li:nth-child(5) a:hover { fill: hsl(102, 53%, 52%); } /* Github */
+#dock li:nth-child(6) a:focus,
+#dock li:nth-child(6) a:hover { fill: hsl(14, 89%, 53%); } /* Figma */
+
+#search {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: vertical;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+
+#search input {
+ background-color: var(--primary-background-color);
+ background-position: right 1.25rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5rem 1.5rem;
+ border-radius: 0.5rem;
+ color: var(--primary-font-color);
+ font-family: var(--font-sans-serif);
+ line-height: 1.5;
+ outline: 0.25rem solid transparent;
+ padding: var(--space-m);
+ width: 40rem;
+}
+
+@media (prefers-color-scheme: dark) {
+ #search input {
+ background-image: var(--svg-search-gray);
+ border: 0.125rem solid hsl(var(--color-white-hsl) / 0.25);
+ }
+
+ #search input:hover { border-color: hsl(var(--color-white-hsl) / 0.5); }
+
+ #search input:focus {
+ background-color: hsl(var(--color-white-hsl) / 0.05);
+ background-image: var(--svg-search-light-gray);
+ outline-color: var(--color-orange);
+ }
+}
+
+@media (prefers-color-scheme: light) {
+ #search input {
+ background-image: var(--svg-search-light-gray);
+ border: 0.125rem solid hsl(var(--color-black-hsl) / 0.25);
+ }
+
+ #search input:hover { border-color: hsl(var(--color-black-hsl) / 0.5); }
+
+ #search input:focus {
+ background-color: var(--color-white);
+ background-image: var(--svg-search-gray);
+ outline-color: var(--color-orange);
+ }
+}
+
+#search input:active,
+#search input:focus { border-color: transparent; }
+
+#search input::-webkit-input-placeholder { text-align: center; }
+#search input::-moz-placeholder { text-align: center; }
+#search input:-ms-input-placeholder { text-align: center; }
+#search input::-ms-input-placeholder { text-align: center; }
+#search input::placeholder { text-align: center; }
+
+#bookmarks {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ width: 40rem;
+}
+
+#bookmarks ul {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+#bookmarks li {
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ line-height: 1;
+ margin-bottom: var(--space-m);
+}
+
+#bookmarks li:last-child { margin-bottom: 0; }
+
+#bookmarks li .favicon {
+ width: 1rem;
+ margin-right: var(--space-s);
+}
+
+#bookmarks a {
+ color: var(--primary-link-color);
+ text-decoration: none;
+ -webkit-transition: color 0.25s ease-in-out;
+ -o-transition: color 0.25s ease-in-out;
+ transition: color 0.25s ease-in-out;
+}
+
+#bookmarks a:focus,
+#bookmarks a:hover { color: var(--primary-link-hover-color); }
diff --git a/css/vars.css b/css/vars.css
new file mode 100644
index 0000000..616049f
--- /dev/null
+++ b/css/vars.css
@@ -0,0 +1,51 @@
+:root {
+ /* HSL(a) for better control over colors
+ https://css-tricks.com/hsl-hsla-is-great-for-programmatic-color-control/
+ https://css-tricks.com/color-alpha-anywhere/
+ */
+ --color-black-hsl: 0 0% 11%; /* #1C1C1C */
+ --color-black: hsl(var(--color-black-hsl));
+ --color-orange-hsl: 30 100% 50%; /* #FD7E00 */
+ --color-orange: hsl(var(--color-orange-hsl));
+ --color-white-hsl: 0 0% 95%; /* #F1F1F1 */
+ --color-white: hsl(var(--color-white-hsl));
+
+ /* Font-families */
+ --font-monospace: "Inconsolata", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+ --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+
+ /* Font-sizing */
+ --font-size-body: 1rem; /* 16px */
+
+ /* Spacing */
+ --space-xs: 0.25rem; /* 4px */
+ --space-s: 0.5rem; /* 8px */
+ --space-m: 1rem;
+ --space-l: 2rem; /* 32px */
+ --space-xl: 4rem; /* 64px */
+
+ /* SVGs */
+ --svg-search-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzUyNTI1MiIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
+ --svg-search-light-gray: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzg3ODc4NyIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
+ --svg-search-orange: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI0ZEN0UwMCIgZD0iTTMyLDI5LjU4bC05LjQ3LTkuNDdjMS42LTIuMTEsMi41Ni00LjcyLDIuNTYtNy41NkMyNS4wOSw1LjYzLDE5LjQ2LDAsMTIuNTQsMFMwLDUuNjMsMCwxMi41NHM1LjYzLDEyLjU0LDEyLjU0LDEyLjU0YzIuODQsMCw1LjQ2LS45Niw3LjU2LTIuNTZsOS40Nyw5LjQ3LDIuNDItMi40MlpNMy40MiwxMi41NEMzLjQyLDcuNTEsNy41MSwzLjQyLDEyLjU0LDMuNDJzOS4xMiw0LjA4LDkuMTIsOS4xMi00LjA4LDkuMTItOS4xMiw5LjEyUzMuNDIsMTcuNTgsMy40MiwxMi41NFoiLz48L3N2Zz4=');
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --primary-background-color: var(--color-black);
+ --primary-font-color: var(--color-white);
+ --primary-link-color: hsl(var(--color-white-hsl) / 0.5);
+ --primary-link-hover-color: var(--color-white);
+ }
+}
+
+/* Light Mode */
+@media (prefers-color-scheme: light) {
+ :root {
+ --primary-background-color: var(--color-white);
+ --primary-font-color: hsl(var(--color-black-hsl) / 0.75);
+ --primary-link-color: hsl(var(--color-black-hsl) / 0.75);
+ --primary-link-hover-color: var(--color-orange);
+ }
+}
diff --git a/favicon-16x16.png b/favicon-16x16.png
new file mode 100644
index 0000000..41d04f6
Binary files /dev/null and b/favicon-16x16.png differ
diff --git a/favicon-32x32.png b/favicon-32x32.png
new file mode 100644
index 0000000..e579f64
Binary files /dev/null and b/favicon-32x32.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..64fa127
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c51ba77
--- /dev/null
+++ b/index.html
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
+
+
+ _traichu
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..2e7ec64
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,11 @@
+function dateTime () {
+ const date = new Date()
+ let today = date.toDateString()
+ let time = date.toLocaleTimeString()
+ document.getElementsByName('q')[0].placeholder = today + ' ' + time
+ setTimeout(dateTime, 1000)
+}
+
+function traichu () {
+ dateTime()
+}