fix(Skills): 'Element[]' is missing error resolved

.github/dependabot.yml

@@ -1,11 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
-    schedule:
-      interval: "weekly"

.github/workflows/docker-publish.yml

@@ -1,98 +0,0 @@
-name: Docker
-
-# This workflow uses actions that are not certified by GitHub.
-# They are provided by a third-party and are governed by
-# separate terms of service, privacy policy, and support
-# documentation.
-
-on:
-  schedule:
-    - cron: '24 22 * * *'
-  push:
-    branches: [ "main" ]
-    # Publish semver tags as releases.
-    tags: [ 'v*.*.*' ]
-  pull_request:
-    branches: [ "main" ]
-
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
-
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      id-token: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      # Install the cosign tool except on PR
-      # https://github.com/sigstore/cosign-installer
-      - name: Install cosign
-        if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
-        with:
-          cosign-release: 'v2.2.4'
-
-      # Set up BuildKit Docker container builder to be able to build
-      # multi-platform images and export cache
-      # https://github.com/docker/setup-buildx-action
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
-
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        id: build-and-push
-        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      # Sign the resulting Docker image digest except on PRs.
-      # This will only write to the public Rekor transparency log when the Docker
-      # repository is public to avoid leaking data.  If you would like to publish
-      # transparency data even for private images, pass --force to cosign below.
-      # https://github.com/sigstore/cosign
-      - name: Sign the published Docker image
-        if: ${{ github.event_name != 'pull_request' }}
-        env:
-          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
-          TAGS: ${{ steps.meta.outputs.tags }}
-          DIGEST: ${{ steps.build-and-push.outputs.digest }}
-        # This step uses the identity token to provision an ephemeral certificate
-        # against the sigstore community Fulcio instance.
-        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.gitignore

@@ -1,25 +1,41 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*
 
-public
-node_modules
-dist
-dist-ssr
-*.local
+# env files (can opt-in for committing if needed)
+.env*
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -1,17 +0,0 @@
-# Build
-FROM node:20-alpine AS builder
-WORKDIR /app
-COPY package*.json ./
-RUN npm install
-COPY . .
-RUN npm run build
-
-# Nginx
-FROM nginx:alpine
-COPY --from=builder /app/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
-
-VOLUME /usr/share/nginx/html/data
-
-EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1 +1,36 @@
-# website
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/components/sections/About.tsx

@@ -2,10 +2,10 @@ import React, { JSX } from "react";
 import { motion } from "framer-motion";
 import * as SOLID from "@heroicons/react/24/solid";
 import { useTranslation } from 'react-i18next';
-import Section from "../components/Section";
+import Section from "@app/components/layout/Section";
 
-import content from "../json/content.json"
-import Window from "../components/Window";
+import content from "@app/data/content.json"
+import Window from "@app/components/ui/Window";
 
 type AboutProps = {
     id: string;

app/components/sections/Navbar.tsx

@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import { motion, AnimatePresence, Variants } from "framer-motion";
 import * as SOLID from "@heroicons/react/24/solid";
 
-import Button from "../components/Button";
-import content from "../json/content.json";
-import { MenuState } from "../App";
-import Lang from "../components/Lang"
+import Button from "@app/components/ui/Button";
+import content from "@app/data/content.json";
+import { MenuState } from "@/app/page";
+import Lang from "@app/components/ui/LangSwitcher"
 
 type NavbarProps = {
     state: MenuState;

app/components/sections/Projects.tsx

@@ -1,8 +1,8 @@
 import { motion } from "framer-motion";
 import React, { useEffect, useState } from "react";
-import Section from "../components/Section";
+import Section from "@app/components/layout/Section";
 import { useTranslation } from "react-i18next";
-import Window from "../components/Window";
+import Window from "@app/components/ui/Window";
 
 interface ProjectProps {
     name: string;

app/components/sections/Skills.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { motion } from "framer-motion";
+import * as SiIcons from "react-icons/si";
+import Section from "@app/components/layout/Section";
+import { useTranslation } from "react-i18next";
+
+import content from "@app/data/content.json"
+import Window from "@app/components/ui/Window";
+
+type SkillsProps = {
+    id: string;
+    open: boolean;
+    onClose: () => void;
+};
+
+export default function Skills({ id, open, onClose }: SkillsProps) {
+    const { t } = useTranslation();
+
+    const skillsData = content.skills;
+    return (
+        <Window open={open} onClose={onClose}>
+            <Section id={id} title={t("skills.title")}>
+                <>
+                    {skillsData.map((section, i) => (
+                        <div key={i} className="flex flex-col gap-2">
+                            <div className="flex flex-col gap-2 max-w-3xl w-full bg-black/20 rounded-2xl p-8 space-y-4 shadow-lg">
+                                <h2 className="text-xl font-semibold font-extrabold bg-clip-text text-transparent 
+                            bg-gradient-to-r from-green-200 via-emerald-600 to-green-800">{t(section.title)}:</h2>
+                                <div className="flex flex-wrap gap-2">
+                                    {section.tags.map((tag, j) => {
+                                        const Icon = (SiIcons as Record<string, React.ElementType>)[tag.icon];
+                                        return (
+                                            <motion.div
+                                                key={j}
+                                                className="flex items-center gap-2 p-2"
+                                                initial={{ opacity: 0, y: 15 }}
+                                                whileInView={{ opacity: 1, y: 0 }}
+                                                viewport={{ once: false, amount: 0 }}
+                                                transition={{ duration: 0.5, delay: j * 0.08 }}
+                                            >
+                                                <div className="flex items-center gap-2 p-1.5">
+                                                    {Icon && <Icon className="w-5 h-5 text-emerald-400 mt-1" />}
+                                                    <span className="text-sm md:text-base">{tag.name}</span>
+                                                </div>
+                                            </motion.div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </>
+            </Section>
+        </Window>
+    );
+};

app/components/sections/Title.tsx

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
 
-import content from "../json/content.json"
+import content from "@app/data/content.json"
 
 export default function Title({isOpen}: {isOpen: boolean}) {
   const { t } = useTranslation();

app/components/three/Three.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import Main from "../three/main";
+import Main from "@app/three/main";
 
 export default function Three() {
     const mountRef = useRef<HTMLDivElement>(null);  // Parent canva element

app/components/ui/LangSwitcher.tsx

@@ -1,6 +1,6 @@
-import Button from './Button';
+import Button from '@app/components/ui/Button';
 
-import i18n from "../utils/translation";
+import i18n from "@app/lib/i18n";
 
 export default function Lang() {
     const toggleLanguage = () => {

app/data/content.json

@@ -1,7 +1,7 @@
 {
     "name": "GUEZO Loïc",
     "career": "me.career",
-    "profile_image": "https://guezoloic.com/data/guezoloic.png",
+    "profile_image": "https://web-bucket.s3.fr-par.scw.cloud/guezoloic.png",
     "navbar": {
         "buttons": [
             {

app/globals.css

@@ -0,0 +1,31 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  height: 100dvh;
+    margin: 0;
+    padding: 0;
+    background-color: #1e3d2e;
+    font-family: 'Inter', sans-serif;
+  /* font-family: Arial, Helvetica, sans-serif; */
+}

app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

app/lib/i18n.ts

@@ -1,8 +1,8 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
-import en from '../locales/en.json';
-import fr from '../locales/fr.json';
+import en from '@app/locales/en.json';
+import fr from '@app/locales/fr.json';
 
 const resources = { en: { translation: en }, fr: { translation: fr } };
 
@@ -18,6 +18,6 @@ i18n
     })
 ;
 
-document.documentElement.lang = i18n.language;
+// document.documentElement.lang = i18n.language;
 
 export default i18n;

app/page.tsx

@@ -1,13 +1,16 @@
-import Title from "./pages/Title";
-import Three from "./pages/Three";
-import Navbar from "./pages/Navbar";
-import About from "./pages/About";
-import Skills from "./pages/Skills";
+"use client";
+
+import Title from "@app/components/sections/Title";
+import Navbar from "@app/components/sections/Navbar";
+import About from "@app/components/sections/About";
+import Skills from "@app/components/sections/Skills";
+import Projects from "@app/components/sections/Projects";
+
+import dynamic from 'next/dynamic';
 
 import { useState } from "react";
 
-import './utils/translation';
-import Projects from "./pages/Projects";
+import '@app/lib/i18n';
 
 export type MenuState = {
     about: boolean;
@@ -15,6 +18,11 @@ export type MenuState = {
     projects: boolean;
 };
 
+const Three = dynamic(() => import('@app/components/three/Three'), { 
+    ssr: false,
+    loading: () => <div className="fixed inset-0 bg-black" />
+});
+
 export default function App() {
     const [state, setState] = useState<MenuState>({
         about: false,

app/three/animQueue.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import Animation from "./animation";
-import assets from "../json/assets.json"
+import assets from "@app/data/assets.json"
 
 const ANIMATION_ASSETS = assets.animations; 
 

app/three/animation.ts

@@ -26,7 +26,7 @@ export default class Animation {
     }
 
     public loadAnimation(url: string): Promise<THREE.AnimationAction> {
-        url = `https://guezoloic.com/data/${url}`;
+        url = `https://web-bucket.s3.fr-par.scw.cloud/${url}`;
         return new Promise((resolve, reject) => {
             if (this.actions.has(url)) return resolve(this.actions.get(url)!);
             this.loader.load(

app/three/main.ts

@@ -6,7 +6,7 @@ import Model from "./model";
 import Camera from "./camera";
 import Animation from "./animation";
 
-import assets from "../json/assets.json"
+import assets from "@app/data/assets.json"
 import AnimationQueue from "./animQueue";
 
 export default class Main {

app/three/model.ts

@@ -9,7 +9,7 @@ export default class Model {
     }
 
     public async init(model_url: string, scene: THREE.Scene, isVisible: boolean = true): Promise<THREE.Object3D> {
-        const MODEL = await this.loadModel(`https://guezoloic.com/data/${model_url}`);
+        const MODEL = await this.loadModel(`https://web-bucket.s3.fr-par.scw.cloud/${model_url}`);
         MODEL.visible = isVisible;
         scene.add(MODEL);
         return MODEL;
@@ -17,6 +17,7 @@ export default class Model {
 
     public loadModel(model_url: string): Promise<THREE.Object3D> {
         return new Promise((resolve, reject) => {
+            this.loader.setCrossOrigin('anonymous');
             this.loader.load(
                 model_url,
                 (gltf: GLTF) => resolve(gltf.scene),

eslint.config.js

@@ -1,29 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{js,jsx}'],
-    extends: [
-      js.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
-    },
-  },
-])

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

index.html

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-    
-    <title>Loïc GUEZO</title>
-    <meta name="description" content="Portfolio of Loïc GUEZO, a French student aiming to become an Embedded Systems developer. Experience in AI, Game Development, and Embedded Systems.">
-    <meta name="keywords" content="Loïc GUEZO, Embedded Systems developer, electronics, IoT, microcontrollers, game development, programming, France">
-    <meta name="author" content="Loïc GUEZO">
-    <meta name="robots" content="index, follow, max-image-preview:large">
-    <meta name="language" content="en-US">
-    <meta name="geo.region" content="FR">
-    <meta name="geo.placename" content="France">
-
-    <meta property="og:type" content="website">
-    <meta property="og:site_name" content="Loïc GUEZO Portfolio">
-    <meta property="og:title" content="Loïc GUEZO | Portfolio">
-    <meta property="og:description" content="Portfolio of Loïc GUEZO | Embedded Systems, AI, and Game Development projects.">
-    <meta property="og:url" content="https://guezoloic.com">
-    <meta property="og:image" content="https://guezoloic.com/data/preview.png">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
-    <meta property="og:image:alt" content="Portfolio of Loïc GUEZO | Embedded Systems, AI, and Game Development projects.">
-    <meta property="og:locale" content="fr_FR">
-
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@GuezoLoic">
-    <meta name="twitter:creator" content="@GuezoLoic">
-    <meta name="twitter:title" content="Loïc GUEZO | Portfolio">
-    <meta name="twitter:description" content="Portfolio of Loïc GUEZO | Embedded Systems, AI, and Game Development projects.">
-    <meta name="twitter:image" content="https://guezoloic.com/data/preview.png">
-    <meta name="twitter:image:alt" content="Portfolio of Loïc GUEZO">
-
-    <link rel="canonical" href="https://guezoloic.com">
-
-    <link rel="icon" type="image/x-icon" href="https://guezoloic.com/data/favicon.ico">
-    <link rel="icon" type="image/png" sizes="16x16" href="https://guezoloic.com/data/favicon-16x16.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="https://guezoloic.com/data/favicon-32x32.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://guezoloic.com/data/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="192x192" href="https://guezoloic.com/data/android-chrome-192x192.png">
-    <link rel="icon" type="image/png" sizes="512x512" href="https://guezoloic.com/data/android-chrome-512x512.png">
-
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
-    
-    <script type="application/ld+json">
-    {
-        "@context": "https://schema.org",
-        "@type": "Person",
-        "name": "Loïc GUEZO",
-        "jobTitle": "Student in Embedded Systems",
-        "description": "Portfolio of Loïc GUEZO, a French student aiming to become an Embedded Systems developer. Experience in AI, Game Development, and Embedded Systems.",
-        "url": "https://guezoloic.com",
-        "image": "https://guezoloic.com/profile.png",
-        "sameAs": [
-            "https://github.com/guezoloic",
-            "https://linkedin.com/in/guezoloic"
-        ],
-        "knowsAbout": [
-            "Embedded Systems",
-            "Artificial Intelligence",
-            "Game Development",
-            "IoT",
-            "Programming",
-            "Microcontrollers"
-        ],
-        "alumniOf": {
-            "@type": "Organization",
-            "name": "UPEC"
-        },
-        "nationality": {
-            "@type": "Country",
-            "name": "France"
-        }
-    }
-    </script>
-
-    <link href="/src/styles/style.css" rel="stylesheet">
-    <link rel="preload" href="/src/Main.tsx" as="script">
-    <link rel="modulepreload" href="/src/Main.tsx">
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="/src/Main.tsx"></script>
-    <noscript><h1>Hello There!</h1></noscript>
-</body>
-</html>

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

nginx.conf

@@ -1,22 +0,0 @@
-server {
-    listen 80;
-    server_name www.guezoloic.com;
-    return 301 $scheme://guezoloic.com;
-}
-
-server {
-    listen 80;
-    server_name guezoloic.com;
-
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location / {
-        try_files $uri /index.html;
-    }
-
-    location /data/ {
-        alias /usr/share/nginx/html/data/;
-        # autoindex on;
-    }
-}

package.json

@@ -1,43 +1,32 @@
 {
   "name": "website",
+  "version": "0.1.0",
   "private": true,
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
   },
   "dependencies": {
-    "@fortawesome/free-solid-svg-icons": "^7.0.0",
-    "@fortawesome/react-fontawesome": "^0.2.3",
     "@heroicons/react": "^2.2.0",
-    "@tailwindplus/elements": "^1.0.4",
-    "framer-motion": "^12.23.12",
-    "lucide-react": "^0.536.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-i18next": "^15.7.2",
-    "react-icons": "^5.5.0",
-    "react-router-dom": "^7.7.1",
-    "simple-icons": "^15.11.0",
-    "three": "^0.178.0"
+    "@types/three": "^0.183.1",
+    "framer-motion": "^12.38.0",
+    "next": "16.2.1",
+    "react": "^19.2.4",
+    "react-dom": "19.2.4",
+    "react-i18next": "^16.6.1",
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@tailwindcss/vite": "^4.2.1",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@types/three": "^0.179.0",
-    "@vitejs/plugin-react": "^4.6.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.30.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.11",
-    "vite": "^7.0.4"
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "tailwindcss": "^4.2.2",
+    "three": "^0.183.2",
+    "typescript": "^5"
   }
 }

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

src/Main.tsx

@@ -1,4 +0,0 @@
-import ReactDOM from 'react-dom/client';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render( <App /> );

src/pages/Skills.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { motion } from "framer-motion";
-import * as SiIcons from "react-icons/si";
-import Section from "../components/Section";
-import { useTranslation } from "react-i18next";
-
-import content from "../json/content.json"
-import Window from "../components/Window";
-
-type SkillsProps = {
-    id: string;
-    open: boolean;
-    onClose: () => void;
-};
-
-export default function Skills({ id, open, onClose }: SkillsProps) {
-    const { t } = useTranslation();
-
-    const skillsData = content.skills;
-    return (
-        <Window open={open} onClose={onClose}>
-            <Section id={id} title={t("skills.title")}>
-                {skillsData.map((section, i) => (
-                    <div key={i} className="flex flex-col gap-2">
-                        <div className="flex flex-col gap-2 max-w-3xl w-full bg-black/20 rounded-2xl p-8 space-y-4 shadow-lg">
-                            <h2 className="text-xl font-semibold font-extrabold bg-clip-text text-transparent 
-                            bg-gradient-to-r from-green-200 via-emerald-600 to-green-800">{t(section.title)}:</h2>
-                            <div className="flex flex-wrap gap-2">
-                                {section.tags.map((tag, j) => {
-                                    const Icon = (SiIcons as Record<string, React.ElementType>)[tag.icon];
-                                    return (
-                                        <motion.div
-                                            key={j}
-                                            className="flex items-center gap-2 p-2"
-                                            initial={{ opacity: 0, y: 15 }}
-                                            whileInView={{ opacity: 1, y: 0 }}
-                                            viewport={{ once: false, amount: 0 }}
-                                            transition={{ duration: 0.5, delay: j * 0.08 }}
-                                        >
-                                            <div className="flex items-center gap-2 p-1.5">
-                                                {Icon && <Icon className="w-5 h-5 text-emerald-400 mt-1" />}
-                                                <span className="text-sm md:text-base">{tag.name}</span>
-                                            </div>
-                                        </motion.div>
-                                    );
-                                })}
-                            </div>
-                        </div>
-                    </div>
-                ))}
-            </Section>
-        </Window>
-    );
-};

src/styles/style.css

@@ -1,33 +0,0 @@
-@import "tailwindcss";
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: #2f5643 #1e3d2e;
-}
-
-html,
-body {
-    height: 100dvh;
-    margin: 0;
-    padding: 0;
-    background-color: #1e3d2e;
-    font-family: 'Inter', sans-serif;
-}
-
-::-webkit-scrollbar {
-    width: 12px;
-}
-
-::-webkit-scrollbar-track {
-    background: #1e3d2e;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: #2f5643;
-    border-radius: 6px;
-    border: 3px solid #1e3d2e;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: #3f6b55;
-}

tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"],
+      "@app/*": ["./app/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

vite.config.js

@@ -1,11 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    tailwindcss(),
-    react()
-  ],
-})