Chin 2

frontend/app/app.vue

@@ -1,7 +1,7 @@
 
 
 <template>
-  <div>
+  <div class="app-root" :class="{ 'zh': locale === 'zh' }" :data-lang="locale">
     <NuxtRouteAnnouncer />
     <div class="container">
       <NuxtPage />
@@ -16,7 +16,7 @@ const { locale } = useI18n()
 useHead({
   htmlAttrs: {
     lang: computed(() => {
-      const map: Record<string, string> = { en: 'en-US', es: 'es-ES', ca: 'ca-ES' }
+      const map: Record<string, string> = { en: 'en-US', es: 'es-ES', ca: 'ca-ES', zh: 'zh-CN' }
       return map[locale.value] || 'en-US'
     })
   },

frontend/app/assets/css/fonts.scss

@@ -1,8 +1,27 @@
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Noto+Sans+SC:wght@400;700&display=swap');
-
 @font-face {
   font-family: 'Hurmit';
   src: url('@/assets/fonts/Hermit/Hermit-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
+
+@font-face {
+  font-family: 'Noroshi Code';
+  src: url('@/assets/fonts/NoroshiCode/NoroshiCode-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Noroshi Code';
+  src: url('@/assets/fonts/NoroshiCode/NoroshiCode-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Noroshi Code';
+  src: url('@/assets/fonts/NoroshiCode/NoroshiCode-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}

frontend/app/assets/css/main.scss

@@ -23,10 +23,18 @@ body {
 
 * {
   color: var(--color-text);
-  font-family: 'Hurmit', 'IBM Plex Mono', 'Noto Sans SC', monospace;
+  font-family: 'Hurmit', 'Noroshi Code', monospace;
   cursor: default;
 }
 
+.app-root.zh {
+  font-family: 'Noroshi Code', monospace;
+}
+
+.app-root.zh *, .app-root [lang|="zh"], :lang(zh) * {
+  font-family: 'Noroshi Code', monospace !important;
+}
+
 .pixelated {
   image-rendering: pixelated; /* good for pixel art or low-res images */
   /* OR for standard crisp images */
@@ -55,7 +63,7 @@ li::before {
     top: 0px;
     left: 0px;
     color: var(--color-border-color);
-    font-family: 'Hurmit', 'IBM Plex Mono', 'Noto Sans SC', monospace;
+    font-family: 'Hurmit', 'Noroshi Code', monospace;
     font-size: 0.9em;
 }
 
@@ -83,7 +91,7 @@ blockquote::before {
 
 /* TUI-style code blocks */
 pre, code {
-  font-family: 'Hurmit', 'IBM Plex Mono', monospace;
+  font-family: 'Hurmit', 'Noroshi Code', monospace;
   background-color: var(--color-background-line);
   border: 1px solid var(--color-border-color);
 }
@@ -128,7 +136,7 @@ hr {
     background-color: var(--color-background);
     padding: 0 8px;
     color: var(--color-border-color);
-    font-family: 'Hurmit', 'IBM Plex Mono', monospace;
+   font-family: 'Hurmit', 'Noroshi Code', monospace;
     font-size: 0.7rem;
     letter-spacing: 2px;
   }

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -31,6 +31,16 @@ const changeLocale = (lang) => {
   setLocale(lang.code);
   dropdownVisible.value = false
 }
+
+const localeIcon = (code) => {
+  const icons = {
+    en: 'EN',
+    es: 'ES',
+    ca: 'CA',
+    zh: 'ZH'
+  }
+  return icons[code] || code.toUpperCase()
+}
 </script>
 
 <template>
@@ -42,7 +52,7 @@ const changeLocale = (lang) => {
      <div class="section">
         <div :class="{'menu-item': true, 'active': locale === loc.code}"
              v-for="loc in locales" @click="changeLocale(loc)">
-          {{ $t('locales.' + loc.code) }}
+          <span class="locale-icon">{{ localeIcon(loc.code) }}</span>{{ $t('locales.' + loc.code) }}
         </div>
       </div>
     </div>
@@ -102,6 +112,17 @@ border: 1px solid var(--color-border-color);
 }
 
 /* Items */
+.locale-icon {
+  font-family: 'Hermit', 'Hurmit', monospace;
+  background: var(--color-border-color);
+  color: var(--color-text);
+  padding: 2px 6px;
+  font-size: 0.75em;
+  letter-spacing: 1px;
+  min-width: 32px;
+  text-align: center;
+}
+
 .menu-item {
   padding: 8px 16px;
   color: var(--color-text);

frontend/i18n/locales/ca.json

@@ -1,9 +1,9 @@
 {
     "locales": {
-        "en": "🇺🇸 Anglès",
+        "en": "Anglès",
-        "es": "🇪🇸 Espanyol",
+        "es": "Espanyol",
-        "ca": "🇦🇩 Català",
+        "ca": "Català",
-        "zh": "🇨🇳 中文"
+        "zh": "中文"
     },
     "themes": {
         "light": "Clar",

frontend/i18n/locales/en.json

@@ -1,9 +1,9 @@
 {
     "locales": {
-        "en": "🇺🇸 English",
+        "en": "English",
-        "es": "🇪🇸 Spanish",
+        "es": "Spanish",
-        "ca": "🇦🇩 Catalan",
+        "ca": "Catalan",
-        "zh": "🇨🇳 中文"
+        "zh": "中文"
     },
     "themes": {
         "light": "Light",

frontend/i18n/locales/es.json

@@ -1,9 +1,9 @@
 {
     "locales": {
-        "en": "🇺🇸 Ingles",
+        "en": "Inglés",
-        "es": "🇪🇸 Español",
+        "es": "Español",
-        "ca": "🇦🇩 Catalán",
+        "ca": "Catalán",
-        "zh": "🇨🇳 中文"
+        "zh": "中文"
     },
     "themes": {
         "light": "Claro",

frontend/i18n/locales/zh.json

@@ -1,9 +1,9 @@
 {
     "locales": {
-        "en": "🇺🇸 English",
+        "en": "English",
-        "es": "🇪🇸 西班牙语",
+        "es": "西班牙语",
-        "ca": "🇦🇩 加泰罗尼亚语",
+        "ca": "加泰罗尼亚语",
-        "zh": "🇨🇳 中文"
+        "zh": "中文"
     },
     "themes": {
         "light": "浅色",

frontend/nuxt.config.ts

@@ -39,7 +39,8 @@ export default defineNuxtConfig({
         { name: 'description', content: 'Personal website of Aran Roig — developer, artist, and designer. Explore projects, blog posts, art gallery, and more.' },
         { name: 'author', content: 'Aran Roig' },
         { name: 'robots', content: 'index, follow' }
-      ]
+      ],
+      link: []
     }
   },