🐛 Fixes arrow link color

.dockerignore

@@ -0,0 +1,203 @@
+# ============================================================================
+# Created by https://dockerignore.com/
+# COMPREHENSIVE FRAMEWORK TEMPLATE for Nuxt
+# Website: https://nuxt.com/
+# Repository: https://github.com/nuxt/nuxt
+# ============================================================================
+
+# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+# TEMPLATE OVERVIEW & USAGE NOTES
+# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+# • TEMPLATE TYPE: COMPREHENSIVE FRAMEWORK TEMPLATE
+# • PURPOSE: Nuxt framework specific ignore patterns
+# • DESIGN PHILOSOPHY: Self-contained with all necessary patterns including security
+# • COMBINATION GUIDANCE: Use standalone - no need to combine with other templates
+# • SECURITY CONSIDERATIONS: Includes security patterns for .env files and credentials
+# • BEST PRACTICES: Review before use, test with your specific Nuxt setup
+# • OFFICIAL SOURCES: Nuxt community patterns and best practices
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# SECURITY & SENSITIVE DATA PROTECTION (ALWAYS FIRST!)
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# CRITICAL: Prevent sensitive data from being included in Docker images
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# ENVIRONMENT VARIABLES & CONFIGURATION FILES
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# Environment files contain sensitive API keys, database credentials,
+# and other secrets that must not be included in Docker images
+
+.env
+.env.*
+.env.*.local
+.env.development
+.env.development.local
+.env.example
+.env.local
+.env.production
+.env.production.local
+.env.sample
+.env.staging
+.env.staging.local
+.env.template
+.env.test
+.env.test.local
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# APPLICATION SECRETS & CREDENTIALS
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+
+# Application secrets, credentials, and sensitive configuration files
+**/config/credentials.*
+**/config/secrets.*
+**/keys/
+**/passwords/
+**/private/
+**/secrets/
+*.auth
+*.authz
+*.password
+*.secret
+*.secrets
+*.token
+*_tokens
+*password*
+apikeys.*
+appsettings.Development.json
+appsettings.Local.json
+appsettings.Staging.json
+connectionstrings.config
+credentials
+database.ini
+database.yml
+dbconfig.xml
+secrets.json
+secrets.yaml
+secrets.yml
+tokens.*
+
+# ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# DEPENDENCIES AND PACKAGE MANAGERS
+**/.npm/
+**/.npm/_logs/
+**/.pnpm-store/
+**/.pnpm/
+**/.yarn/
+**/bower_components/
+**/node_modules/
+.npmignore
+.npmrc
+.npmrc.*
+.yarn/install-state.gz
+.yarnrc
+.yarnrc.yml
+npm-debug.log*
+pnpm-debug.log*
+yarn-error.log
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# BUILD ARTIFACTS AND OUTPUT
+**/.nuxt-build/
+**/.nyc_output/
+**/.out/
+**/.output/
+**/build/
+**/dist/
+**/public/build/
+.tsbuildinfo
+tsconfig.*.tsbuildinfo
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# CACHE AND TEMPORARY FILES
+**/.cache/
+**/.parcel-cache/
+**/.turbo/
+**/temp/
+**/tmp/
+*.cache
+*.temp
+*.tmp
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# LOGS AND DEBUG FILES
+**/logs/
+*.log
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# CONFIGURATION AND ENVIRONMENT
+.env.testing
+jsconfig.json
+vitest.config.*.timestamp-*
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# TESTING AND COVERAGE
+**/.jest-cache/
+**/__tests__/__snapshots__/
+**/coverage/
+**/test-results/
+
+# ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+# OTHER
+**/.babel-cache/
+**/.bzr/
+**/.cvs/
+**/.git/
+**/.hg/
+**/.nuxt
+**/.nuxt-analyze/
+**/.nuxt-components/
+**/.nuxt-dev/
+**/.nuxt-modules/
+**/.nuxt-types/
+**/.nuxt/
+**/.nx/
+**/.nx/cache/
+**/.pnp/
+**/.svn/
+**/jest-cache/
+*.bak
+*.old
+*.orig
+*.save
+*.swo
+*.swp
+*~
+._*
+.babelrc
+.babelrc.*
+.browserslistrc
+.DS_Store
+.DS_Store?
+.eslintcache
+.eslintignore
+.eslintrc
+.eslintrc.*
+.gitattributes
+.gitignore
+.gitmodules
+.jsbeautifyrc
+.jscsrc
+.jshintrc
+.nuxtignore
+.nuxtrc
+.pnp.cjs
+.pnp.js
+.pnp.loader.mjs
+.prettiercache
+.prettierignore
+.prettierrc
+.prettierrc.*
+.Spotlight-V100
+.stylelintcache
+.stylelintignore
+.stylelintrc
+.stylelintrc.*
+.Trashes
+desktop.ini
+ehthumbs.db
+npm-shrinkwrap.json
+nuxt.config.*
+pnpm-workspace.yaml
+Thumbs.db

app/assets/global.css

@@ -1,26 +1,7 @@
 @import "tailwindcss";
+@import "@nuxt/ui";
+@import "@catppuccin/tailwindcss/mocha.css";
 
-@font-face {
+@theme {
-  font-family: "JetBrains Mono";
+    --font-mono: "JetBrains Mono", monospace;
-  src: url(fonts/JetBrainsMono-Regular.ttf) format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url(fonts/JetBrainsMono-Bold.ttf) format("truetype");
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  src: url(fonts/JetBrainsMono-Italic.ttf) format("truetype");
-  font-weight: normal;
-  font-style: italic;
-}
-
-html {
-  font-family: "JetBrains Mono", monospace;
 }

app/components/ArrowLink.vue

@@ -1,16 +1,21 @@
 <template>
     <NuxtLink :to="props.link" target="_blank">
-        <img
+        <svg
-            :src="props.icon ?? '/icons/arrow-up-right-from-square.svg'"
+            xmlns="http://www.w3.org/2000/svg"
-            alt="Arrow going to the top right from the center of a square, representing a link"
+            viewBox="0 0 512 512"
-            class="w-4 h-4"
+            width="16"
-        />
+            height="16"
+            class="w-4 h-4 fill-ctp-text"
+        >
+            <path
+                d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"
+            />
+        </svg>
     </NuxtLink>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps<{
     link: string;
-    icon?: string;
 }>();
 </script>

app/layouts/default.vue

@@ -8,6 +8,7 @@ body {
     margin: 0;
     width: 100%;
     height: 100%;
+    overflow-x: hidden;
 }
 </style>
 
@@ -24,5 +25,8 @@ useHead({
         { name: "description", content: "Daniel Svitan's portfolio" },
         { name: "keywords", content: "Daniel Svitan portfolio CV" },
     ],
+    bodyAttrs: {
+        class: "mocha bg-ctp-base text-ctp-text",
+    },
 });
 </script>

app/pages/index.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="w-screen h-full flex items-center justify-start flex-col">
+    <div class="w-screen h-full flex items-center justify-start flex-col font-mono">
         <div class="w-1 h-10 shrink-10" />
 
         <div
-            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto relative"
+            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-ctp-text border-1 p-3 shrink-0 overflow-auto relative"
         >
             <div class="absolute top-2 right-2 flex gap-x-2">
                 <button
@@ -438,7 +438,7 @@ th {
 
 tr,
 thead {
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid var(--catppuccin-color-text);
 }
 
 tr:last-of-type {
@@ -447,8 +447,8 @@ tr:last-of-type {
 
 .hashtag {
     padding: 0 0.25rem;
-    background-color: #e8e8e8;
+    border: 1px solid var(--catppuccin-color-text);
-    border-radius: 0.5rem;
+    border-radius: 1rem;
 }
 </style>
 

bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "svitan-dev-new",
@@ -13,6 +12,9 @@
         "vue": "^3.5.26",
         "vue-router": "^4.6.4",
       },
+      "devDependencies": {
+        "@catppuccin/tailwindcss": "^1.0.0",
+      },
     },
   },
   "packages": {
@@ -76,6 +78,8 @@
 
     "@capsizecss/unpack": ["@capsizecss/unpack@3.0.1", "", { "dependencies": { "fontkit": "^2.0.2" } }, "sha512-8XqW8xGn++Eqqbz3e9wKuK7mxryeRjs4LOHLxbh2lwKeSbuNR4NFifDZT4KzvjU6HMOPbiNTsWpniK5EJfTWkg=="],
 
+    "@catppuccin/tailwindcss": ["@catppuccin/tailwindcss@1.0.0", "", {}, "sha512-l8pOlcYe2ncGd8a1gUmL5AHmKlxR2+CHuG5kt4Me6IZwzntW1DoLmj89BH+DcsPHBsdDGLrTSv35emlYyU3FeQ=="],
+
     "@clack/core": ["@clack/core@1.0.0-alpha.7", "", { "dependencies": { "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-3vdh6Ar09D14rVxJZIm3VQJkU+ZOKKT5I5cC0cOVazy70CNyYYjiwRj9unwalhESndgxx6bGc/m6Hhs4EKF5XQ=="],
 
     "@clack/prompts": ["@clack/prompts@1.0.0-alpha.9", "", { "dependencies": { "@clack/core": "1.0.0-alpha.7", "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-sKs0UjiHFWvry4SiRfBi5Qnj0C/6AYx8aKkFPZQSuUZXgAram25ZDmhQmP7vj1aFyLpfHWtLQjWvOvcat0TOLg=="],

nuxt.config.ts

@@ -18,6 +18,11 @@ export default defineNuxtConfig({
     routeRules: {
         "/": { prerender: true },
     },
+    fonts: {
+        families: [
+            { name: "JetBrains Mono", provider: "local" }
+        ]
+    },
     compatibilityDate: "2025-07-15",
     devtools: { enabled: true },
 });

package.json

@@ -17,5 +17,8 @@
     "typescript": "^5.6.3",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@catppuccin/tailwindcss": "^1.0.0"
   }
 }

public/icons/arrow-up-right-from-square.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>

tailwind.config.js

@@ -1,11 +1,11 @@
 module.exports = {
-  purge: [],
+    purge: [],
-  darkMode: false, // or 'media' or 'class'
+    darkMode: true, // or 'media' or 'class'
-  theme: {
+    theme: {
-    extend: {},
+        extend: {},
-  },
+    },
-  variants: {
+    variants: {
-    extend: {},
+        extend: {},
-  },
+    },
-  plugins: [],
+    plugins: [],
 };