Use Image component

.gitignore

@@ -8,7 +8,7 @@ dist/
 node_modules/
 
 # logs
-*log*
+*.log*
 
 # environment variables
 .env*

src/components/Link.astro

@@ -0,0 +1,18 @@
+---
+export interface Props {
+  style?: string;
+  href: string;
+  text: string;
+  title?: string;
+}
+
+const { style = "", href, text, title = href } = Astro.props;
+---
+
+<a
+  class={style}
+  href={href}
+  title={title}
+  target="_blank"
+  rel="noopener noreferrer">{text}</a
+>

src/layouts/Footer.astro

@@ -1,48 +1,60 @@
+---
+export interface Props {
+  icons?: string;
+}
+
+const { icons = "true" } = Astro.props;
+let icons_class = "icons flex-row flex-gap-vertical";
+if (icons === "false") {
+  icons_class = "hideen-icons";
+}
+---
+
 <footer>
   <div class="footer-box flex-col flex-gap-horizontal static-box">
-    <div class="icons flex-row flex-gap-vertical">
+    <div class={icons_class}>
       <a
         class="youtube icon"
-        href="https://youtube.com/@Cbrnex"
+        href="https://7rs.dev/yt"
         title="youtube"
         target="_blank"
         rel="noopener noreferrer"></a>
       <a
         class="twitter icon"
-        href="https://twitter.com/Cbrnex"
+        href="https://7rs.dev/x"
         title="twitter"
         target="_blank"
         rel="noopener noreferrer"></a>
       <a
         class="pinterest icon"
-        href="https://pinterest.com/Cbrnex"
+        href="https://7rs.dev/p"
         title="pinterest"
         target="_blank"
         rel="noopener noreferrer"></a>
       <a
         class="telegram icon"
-        href="https://t.me/Cbrnex"
+        href="https://7rs.dev/t"
         title="telegram"
         target="_blank"
         rel="noopener noreferrer"></a>
       <a
         class="discord icon"
-        href="https://discord.gg/GQP8A5kDJV"
+        href="https://7rs.dev/d"
         title="discord"
         target="_blank"
         rel="noopener noreferrer"></a>
     </div>
     <div class="credits flex-row flex-gap-vertical">
       <a
         class="text mono-font"
-        href="https://github.com/7rs/pages"
+        href="https://7rs.dev/repo"
         title="source code"
         target="_blank"
         rel="noopener noreferrer">Source Code</a
       >
       <a
         class="text mono-font"
-        href="https://github.com/7rs"
+        href="https://7rs.dev/gh"
         title="github"
         target="_blank"
         rel="noopener noreferrer">© 2023 Cbrnex</a
@@ -57,6 +69,9 @@
   footer
     width 100%
 
+  .hideen-icons
+    display none
+
   div
     &.footer-box
       padding-bottom static-box * 2
@@ -68,22 +83,26 @@
       &.youtube
         mask-image url("/_astro/brand-icons/youtube.svg"), url("/brand-icons/youtube.svg")
         -webkit-mask-image url("/_astro/brand-icons/youtube.svg"), url("/brand-icons/youtube.svg")
-      &.youtubegaming
-        mask-image url("/_astro/brand-icons/youtubegaming.svg"), url("/brand-icons/youtubegaming.svg")
-        -webkit-mask-image url("/_astro/brand-icons/youtubegaming.svg"), url("/brand-icons/youtubegaming.svg")
-      &.github
-        mask-image url("/_astro/brand-icons/github.svg"), url("/brand-icons/github.svg")
-        -webkit-mask-image url("/_astro/brand-icons/github.svg"), url("/brand-icons/github.svg")
+        &:hover
+          background rgb(255, 0, 0)
       &.twitter
         mask-image url("/_astro/brand-icons/twitter.svg"), url("/brand-icons/twitter.svg")
         -webkit-mask-image url("/_astro/brand-icons/twitter.svg"), url("/brand-icons/twitter.svg")
+        &:hover
+          background rgba(0, 0, 0, 0.5)
       &.pinterest
         mask-image url("/_astro/brand-icons/pinterest.svg"), url("/brand-icons/pinterest.svg")
         -webkit-mask-image url("/_astro/brand-icons/pinterest.svg"), url("/brand-icons/pinterest.svg")
+        &:hover
+          background rgb(189, 8, 28)
       &.telegram
         mask-image url("/_astro/brand-icons/telegram.svg"), url("/brand-icons/telegram.svg")
         -webkit-mask-image url("/_astro/brand-icons/telegram.svg"), url("/brand-icons/telegram.svg")
+        &:hover
+          background rgb(38, 165, 228)
       &.discord
         mask-image url("/_astro/brand-icons/discord.svg"), url("/brand-icons/discord.svg")
         -webkit-mask-image url("/_astro/brand-icons/discord.svg"), url("/brand-icons/discord.svg")
+        &:hover
+          background rgb(88, 101, 242)
 </style>

src/layouts/Header.astro

@@ -4,7 +4,7 @@
     <nav class="flex-row static-flex-gap">
       <a class="links static-icon" href="/links" title="links"></a>
       <a class="blog static-icon" href="/blog" title="blog"></a>
-      <a class="tech static-icon" href="https://zenn.dev/7rs" title="tech"></a>
+      <a class="tech static-icon" href="https://7rs.dev/z" title="tech"></a>
     </nav>
   </div>
 </header>
@@ -18,8 +18,8 @@
     width 100%
 
   .logo
-    mask-image url("/_astro/favicon.svg"), url("/favicon.svg")
-    -webkit-mask-image url("/_astro/favicon.svg"), url("/favicon.svg")
+    mask-image url("/_astro/logo.svg"), url("/logo.svg")
+    -webkit-mask-image url("/_astro/logo.svg"), url("/logo.svg")
 
   nav
     a

src/layouts/Layout.astro

@@ -14,10 +14,16 @@ const { title } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Cbrnex's website" />
-    <meta name="viewport" content="width=device-width,maximum-scale=10" />
-    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="description" content="7rs.dev" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="logo.svg" type="image/svg+xml" />
     <title>{title}</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />
+    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" as="style" crossorigin /> 
   </head>
   <body>
     <Header />

src/pages/index.astro

@@ -1,4 +1,7 @@
 ---
+import { Image } from "@astrojs/image/components";
+import avatar from "/public/avatar.webp";
+
 import Layout from "../layouts/Layout.astro";
 ---
 
@@ -11,7 +14,7 @@ import Layout from "../layouts/Layout.astro";
       </div>
       <div class="avatar">
         <div class="avatar-layer">
-          <img src="avatar.webp" alt="icon" width="240px" height="240px" />
+          <Image src={avatar} alt="avatar" format="webp" />
         </div>
       </div>
     </div>

src/styles/dark.styl

@@ -0,0 +1,42 @@
+light-background = rgba(255, 255, 255, 0.5)
+light-item = black
+light-hover = red
+
+dark-background = rgba(0, 0, 0, 0.5)
+dark-item = white
+dark-hover = blue
+
+.dark-background
+  background light-background
+  @media (prefers-color-scheme dark)
+    background dark-background
+
+.dark-item
+  background light-item
+  @media (prefers-color-scheme dark)
+    background dark-item
+
+.dark-text
+  color light-item
+  @media (prefers-color-scheme dark)
+    color dark-item
+
+.dark-item-hover
+  @extend .dark-item
+  &:hover
+    background light-hover
+    @media (prefers-color-scheme dark)
+      background dark-hover
+
+.dark-text-hover
+  @extend .dark-text
+  &:hover
+    color light-hover
+    @media (prefers-color-scheme dark)
+      color dark-hover
+
+bg-blur = 1rem
+.blur-background
+  @extend .dark-background
+  backdrop-filter blur(bg-blur)
+  -webkit-backdrop-filter blur(bg-blur)

src/styles/font.styl

@@ -0,0 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+
+.mono-font
+  font-family "Fira Code", monospace
+
+.bitching-font
+  font-family Garamond, "Times New Roman", Georgia, serif