Initial commit (with half of the website done)

Author: kouacc

.dockerignore

@@ -0,0 +1,7 @@
+/.nuxt
+/.output
+/node_modules
+
+.env
+.gitignore
+README.md

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

Dockerfile

@@ -0,0 +1,23 @@
+FROM node:23-slim AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Stage de production
+FROM node:23-slim
+
+WORKDIR /app
+
+# Copier uniquement les fichiers nécessaires depuis le stage de build
+COPY --from=builder /app/.output ./.output
+COPY --from=builder /app/package*.json ./
+
+EXPOSE 4000
+ENV PORT=4000
+
+CMD ["node", "./.output/server/index.mjs"]

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,5 @@
+<template>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+</template>

assets/css/main.css

@@ -0,0 +1,90 @@
+@import "tailwindcss";
+
+@theme {
+    --font-rubik: "Rubik", sans-serif;
+    --font-gilroy: "Gilroy", sans-serif;
+    --font-space-grotesk: "Space Grotesk", sans-serif;
+    --font-manrope: "Manrope", sans-serif;
+    --font-pixelify: "Pixelify", sans-serif;
+}
+
+@layer base {
+    body {
+        @apply bg-white dark:bg-slate-800 text-white
+    }
+}
+
+@layer components {
+    .emoji {
+        @apply h-7.5
+      }
+
+    .outline-text {
+        @apply font-space-grotesk font-extrabold text-transparent [-webkit-text-stroke-width:3px] [-webkit-text-stroke-color:#00000060] dark:[-webkit-text-stroke-color:#ffffff60];
+    }
+
+    .header-link {
+        @apply text-black dark:text-white p-2.5 rounded-lg relative overflow-hidden transition-all duration-300 hover:scale-[1.02]! hover:backdrop-filter hover:backdrop-blur-sm hover:px-4 hover:rounded-lg hover:transition-all hover:duration-300 hover:overflow-hidden hover:bg-[#00000010]! dark:hover:bg-[#ffffff10]!;
+    }
+
+    .header-link-index {
+        @apply bg-gradient-to-b from-gray-400/60 to-gray-400 border-gray-400 dark:from-slate-700/60 dark:to-slate-700 dark:border-slate-700 relative transition-all duration-200 px-7.5 py-5 rounded-b-[4px];
+    }
+
+    
+    .animated-link {
+        @apply relative inline-block transition-all duration-500 hover:pl-6.25 hover:transition-all hover:duration-500 before:absolute before:opacity-0 before:size-6 before:font-black before:-left-0.5 before:transition-opacity before:duration-500 before:ease-in before:hover:left-0 before:hover:opacity-100;
+
+        /* &::before {
+            background-image: url("data:image/svg+xml,%3Cpath fill=%5C'currentColor%5C' d=%5C'M512 256a256 256 0 1 0-512 0a256 256 0 1 0 512 0M271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87l87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9z%5C'/%3E");
+        } */
+    }
+
+    .dissolve {
+        @apply transform translate-y-[-150px] [mask-image:linear-gradient(to_bottom,rgba(0,0,0,0.7),rgba(0,0,0,0))] [-webkit-mask-image:-webkit-gradient(linear,left_top,left_bottom,from(rgba(0,0,0,0.7)),to(rgba(0,0,0,0)))] dark:[mask-image:linear-gradient(to_bottom,rgba(0,0,0,0.2),rgba(0,0,0,0))] dark:[-webkit-mask-image:-webkit-gradient(linear,left_top,left_bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)))]
+    }
+
+    .blur {
+        @apply absolute top-0 left-0 size-7.5 hidden z-0 pointer-events-none rounded-[50%] bg-white blur-sm opacity-3 scale-400 translate-full
+    }
+
+    .cmoc-bg {
+        background: url('/img/cmoc-bg.png') no-repeat center center / cover;
+        background-color: rgba(32, 41, 58, 0.6);
+
+        @media (prefers-color-scheme: dark) {
+        & {
+            background-color: rgba(32, 41, 58, 0.8); /* Darker for dark mode */
+            background-blend-mode: multiply; /* Different blend mode for dark mode */
+            box-shadow: 
+                0px 0px 120px #9bd7330d, /* Dark mode shadow, slightly more visible */
+                0px 0px 90px #c33ed20d,  /* Slightly lighter and smaller */
+                0px 0px 70px #7ba7dd0d,  /* Even lighter and smaller */
+                0px 0px 50px #eb7f1b0d,  /* Lighter still */
+                0px 0px 30px #7ba7dd0d;
+        }
+        }
+    }
+
+    .btn {
+    @apply p-4 pl-8 pr-8 border-2 border-gray-200 bg-gray-200 hover:bg-gray-300 hover:border-gray-500 dark:border-slate-800 dark:bg-slate-600 dark:hover:bg-slate-700 text-black transition-all;
+  }
+
+  .bg-gold {
+    @apply bg-[linear-gradient(145deg,_#ffd70020,_#ffdf0030,_#ffd70030)] border border-[1px_solid_#ffd70030] p-3 rounded-xl
+  }
+
+  .bg-silver {
+    @apply bg-[linear-gradient(145deg,_#c0c0c020,_#dcdcdc30,_#c0c0c030)] border border-[1px_solid_#dcdcdc30] p-3 rounded-xl
+  }
+
+  .bg-bronze {
+    @apply bg-[linear-gradient(145deg,_#cd7f3220,_#e07a2d30,_#cd7f3230)] border border-[1px_solid_#e07a2d30] p-3 rounded-xl
+  }
+}
+
+@layer utilities {
+    .container {
+        @apply max-w-screen-xl mx-auto px-3 sm:px-5 md:px-10 lg:px-16 overflow-hidden;
+    }
+}

components/ArtisanCard.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { onMounted, computed, ref } from 'vue'
+import type { Artisan } from '@/types'
+import { renderMii } from '@/backend'
+import { countries } from '@/countries'
+
+const props = defineProps<Artisan>()
+const mii_img = await renderMii(props.mii_data)
+const country_flag = computed(() => countries[props.country_id]?.flag)
+const twemoji = ref(null)
+
+// Import twemoji from the CDN
+onMounted(() => {
+  const script = document.createElement('script')
+  script.src = 'https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js'
+  script.crossOrigin = 'anonymous'
+  script.onload = () => {
+    twemoji.value = window.twemoji
+  }
+  document.head.appendChild(script)
+})
+
+// Use twemoji to render the country flag
+const countryFlagHtml = computed(() => {
+  if (twemoji.value && country_flag.value) {
+    return twemoji.value.parse(country_flag.value)
+  }
+  return ''
+})
+
+const isMaster = computed(() => {
+  if (props.is_master) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+
+<template>
+    <li
+      @mousemove="handleMouseMove"
+      @mouseleave="resetTransform"
+      :class="rankingClass, { 'bg-yellow-600/30 dark:bg-yellow-600/30 border-yellow-300/50 dark:border-yellow-300/50': isMaster}"
+      class="p-3 rounded-xl border flex flex-col justify-between relative z-20 dark:border-slate-600/60 dark:bg-slate-700/60 dark:text-white hover:shadow-xl transition-shadow overflow-hidden backdrop-blur-md bg-opacity-50"
+      ref="card"
+    >
+    <RouterLink :to="`/artisans/${artisan_id}`" class="hover:no-underline">
+      <span
+        v-if="isMaster"
+        class="w-full text-7xl font-bold opacity-30 z-0 absolute select-none -ml-0 mb-[9.75rem] text-yellow-500 -rotate-6"
+        ><i class="fa-solid fa-crown"></i></span
+      >
+      <div class="z-10 flex flex-col w-full items-center justify-between">
+        <span class="self-end text-2xl" v-html="countryFlagHtml"></span>
+        <img class="w-28 h-30 bottom-3 relative" :src="mii_img" :alt="`${name}'s Mii`"/>
+        <h1 class="text-3xl relative bottom-5 text-center text-black">{{ name }}</h1>
+      </div>
+      <div class="blur"></div>
+    </RouterLink>
+    <span class="w-full text-2xl flex items-center justify-between gap-3 flex-wrap"
+          ><span><i class="fa-solid fa-thumbs-up"></i> {{ total_likes }}</span
+          ><span>{{ number_of_posts }} <i class="fa-solid fa-user"></i></span></span
+        >
+    </li>
+  </template>
+  
+  <style>
+  .emoji {
+    height: 30px !important;
+  }
+  
+  .blur {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 30px;
+    transform: translate(100%, 100%) scale(400%);
+    filter: blur(8px) opacity(0.03);
+    background: rgb(255, 255, 255);
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 0;
+    display: none;
+  }
+  
+  .bg-gold {
+    background: linear-gradient(145deg, #ffd70020, #ffdf0030, #ffd70030);
+    border: 1px solid #ffd70030;
+    grid-column: span 2;
+  }
+  
+  .bg-silver {
+    background: linear-gradient(145deg, #c0c0c020, #dcdcdc30, #c0c0c030);
+    border: 1px solid #dcdcdc30;
+  }
+  
+  .bg-bronze {
+    background: linear-gradient(145deg, #cd7f3220, #e07a2d30, #cd7f3230);
+    border: 1px solid #e07a2d30;
+  }
+  </style>
+  
+  <script lang="ts">
+  export default {
+    data() {
+      return {
+        // Your existing data properties
+      }
+    },
+    methods: {
+      handleMouseMove(event) {
+        const card = this.$refs.card
+        const blur = card.querySelector('.blur')
+        const { width, height, left, top } = card.getBoundingClientRect()
+        const mouseX = event.clientX - left - width / 2
+        const mouseY = event.clientY - top - height / 2
+  
+        // Adjust these values to control the rotation sensitivity
+        const rotateY = (mouseX / width) * 20 // Rotation around the Y axis
+        const rotateX = (-mouseY / height) * 20 // Rotation around the X axis
+  
+        card.style.transform = `perspective(800px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(1.05)`
+  
+        // Use the card's rect for positioning the blur element
+        const rect = card.getBoundingClientRect()
+        blur.style.left = event.clientX - rect.left - 50 + 'px'
+        blur.style.top = event.clientY - rect.top - 50 + 'px'
+        blur.style.display = 'block'
+      },
+      resetTransform() {
+        const card = this.$refs.card
+        const blur = card.querySelector('.blur')
+        card.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1)'
+        blur.style.display = 'none'
+      }
+    }
+  }
+  </script>
+