--

2026-04-21 16:16:06 +09:00
parent 10dd6e355b
commit 48b002ca75
5 changed files with 130 additions and 509 deletions
@@ -0,0 +1,123 @@
+header {
+    background-color: transparent;
+    overflow: hidden;
+}
+header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    backdrop-filter: blur(12px);
+    background: linear-gradient(to bottom, #1A1A1A 0%, transparent 50%), #1A1A1A80;
+    mask-image: linear-gradient(to bottom,
+        black 0%,
+        black 50%,
+        transparent 100%
+    );
+}
+main {
+    view-transition-name: main-content;
+    padding-top: 60px;
+}
+main > *:first-child {
+    margin-top: 16px;
+}
+footer {
+    view-transition-name: footer-content;
+}
+
+/* Fonts */
+@font-face {
+    font-family: "MesloLGS Nerd Font";
+    font-style: normal;
+    font-weight: 400;
+    src:
+        local("MesloLGS Nerd Font"),
+        url("https://nercone.dev/assets/fonts/MesloLGSNerdFont-Regular.woff2") format("woff2")
+}
+@font-face {
+    font-family: "MesloLGS Nerd Font";
+    font-style: normal;
+    font-weight: 700;
+    src:
+        local("MesloLGS Nerd Font"),
+        url("https://nercone.dev/assets/fonts/MesloLGSNerdFont-Bold.woff2") format("woff2")
+}
+@font-face {
+    font-family: "MesloLGS Nerd Font";
+    font-style: italic;
+    font-weight: 400;
+    src:
+        local("MesloLGS Nerd Font"),
+        url("https://nercone.dev/assets/fonts/MesloLGSNerdFont-Italic.woff2") format("woff2")
+}
+@font-face {
+    font-family: "MesloLGS Nerd Font";
+    font-style: italic;
+    font-weight: 700;
+    src:
+        local("MesloLGS Nerd Font"),
+        url("https://nercone.dev/assets/fonts/MesloLGSNerdFont-BoldItalic.woff2") format("woff2")
+}
+
+/* View Transition */
+@keyframes vt-fade-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+@keyframes vt-fade-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+@keyframes vt-blur-out {
+    from { filter: blur(0px); }
+    to   { filter: blur(6px); }
+}
+@keyframes vt-blur-in {
+    from { filter: blur(6px); }
+    to   { filter: blur(0px); }
+}
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-old(main-content),
+    ::view-transition-new(main-content),
+    ::view-transition-old(footer-content),
+    ::view-transition-new(footer-content) {
+        z-index: 1;
+        pointer-events: none;
+    }
+}
+
+/* Cursor */
+* { cursor: none; }
+#cursor {
+    view-transition-name: none;
+    position: fixed;
+    z-index: 99999;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: #FFFFFFC0;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition:
+        left 0.08s ease-out,
+        top 0.08s ease-out,
+        width 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+        height 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+        border-radius 0.15s cubic-bezier(0.22, 1, 0.36, 1),
+        background 0.15s ease,
+        transform 0.08s ease-out,
+        opacity 0.3s ease;
+}
+#cursor.visible { opacity: 1; }
+#cursor.on-text {
+    width: 3px;
+    border-radius: 1.5px;
+    background: #FFFFFFC0;
+}
+#cursor.on-link {
+    border-radius: 6px;
+    background: #FFFFFF40;
+    transform: translate(0, 0);
+}