ADD: Start of extraction of Project Card

Still WIP though

app/assets/css/project.css

@@ -0,0 +1,3 @@
+.Project {
+
+}

app/assets/css/skills.css

@@ -20,32 +20,8 @@
 }
 
 @media (width <= 1601px) {
-    .Skills {
+    .Skills .skill-container {
-        & .skill-container {
+        flex-wrap: wrap;
-            flex-wrap: wrap;
+        flex-direction: row;
-            flex-direction: row;
-        }
-
-        & .skill-card.reverse,
-        & .skill-card {
-            flex: 1 0 300px;
-            flex-direction: column;
-            text-align: center;
-            justify-content: start;
-        }
-
-        & .skill-card h3 {
-            text-align: center;
-        }
-
-        & .text-container,
-        & .text-container main {
-            height: 100%;
-        }
-
-        & .image-container img {
-            width: 100%;
-            height: auto;
-        }
     }
 }

app/components/Project.vue

@@ -0,0 +1,17 @@
+<template>
+  <article class="Project">
+
+  </article>
+</template>
+
+<script setup lang="ts">
+import type { Skill } from '~/utils/skills'
+
+type Props = {
+  img : string
+  company : string
+  title : string
+  link ?: string
+  tech : Skill[]
+}
+</script>

app/utils/skills.ts

@@ -17,28 +17,28 @@ const flutterImg = '/img/skills/flutter.svg'
 const dartImg = '/img/skills/dart.svg'
 const androidImg = '/img/skills/android.svg'
 
-export type ISkill = {
+export type Skill = {
   name: string
   img: string
   link ?: string
   width ?: number
 }
 
-export const android: ISkill = {name: 'Android', img: androidImg, link: 'https://www.android.com', width: 88}
+export const android: Skill = {name: 'Android', img: androidImg, link: 'https://www.android.com', width: 88}
-export const css: ISkill = {name: 'CSS', img: cssImg }
+export const css: Skill = {name: 'CSS', img: cssImg }
-export const dart: ISkill = {name: 'Dart', img: dartImg, link: 'https://dart.dev'}
+export const dart: Skill = {name: 'Dart', img: dartImg, link: 'https://dart.dev'}
-export const flutter: ISkill = {name: 'Flutter', img: flutterImg, link: 'https://flutter.dev', width: 40}
+export const flutter: Skill = {name: 'Flutter', img: flutterImg, link: 'https://flutter.dev', width: 40}
-export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com', width: 55}
+export const gl: Skill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com', width: 55}
-export const html: ISkill = {name: 'HTML', img: htmlImg, width: 44}
+export const html: Skill = {name: 'HTML', img: htmlImg, width: 44}
-export const js: ISkill = {name: 'JavaScript', img: jsImg}
+export const js: Skill = {name: 'JavaScript', img: jsImg}
-export const njs: ISkill = {name: 'Nodejs', img: njsImg, link: 'https://nodejs.org/en', width: 46}
+export const njs: Skill = {name: 'Nodejs', img: njsImg, link: 'https://nodejs.org/en', width: 46}
-export const nuxt: ISkill = {name: 'Nuxt', img: nuxtImg, link: 'https://nuxt.com', width: 75}
+export const nuxt: Skill = {name: 'Nuxt', img: nuxtImg, link: 'https://nuxt.com', width: 75}
-export const pcss: ISkill = {name: 'PostCSS', img: postCssImg, link: 'https://postcss.org'}
+export const pcss: Skill = {name: 'PostCSS', img: postCssImg, link: 'https://postcss.org'}
-export const react: ISkill = {name: 'React', img: reactImg, link: 'https://reactjs.org', width: 56}
+export const react: Skill = {name: 'React', img: reactImg, link: 'https://reactjs.org', width: 56}
-export const rust: ISkill = {name: 'Rust', img: rustImg, link: 'https://www.rust-lang.org'}
+export const rust: Skill = {name: 'Rust', img: rustImg, link: 'https://www.rust-lang.org'}
-export const scss: ISkill = {name: 'SCSS', img: scssImg, width: 67}
+export const scss: Skill = {name: 'SCSS', img: scssImg, width: 67}
-export const tw: ISkill = {name: 'Tailwind', img: twImg, width: 84}
+export const tw: Skill = {name: 'Tailwind', img: twImg, width: 84}
-export const ts: ISkill = {name: 'TypeScript', img: tsImg, link: 'https://www.typescriptlang.org'}
+export const ts: Skill = {name: 'TypeScript', img: tsImg, link: 'https://www.typescriptlang.org'}
-export const vitest: ISkill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev', width: 55}
+export const vitest: Skill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev', width: 55}
-export const vue: ISkill = {name: 'Vue', img: vueImg, link: 'https://vuejs.org', width: 58}
+export const vue: Skill = {name: 'Vue', img: vueImg, link: 'https://vuejs.org', width: 58}
-export const webstorm: ISkill = {name: 'JetBrains IDEs', img: webstormImg, link: 'https://www.jetbrains.com/webstorm'}
+export const webstorm: Skill = {name: 'JetBrains IDEs', img: webstormImg, link: 'https://www.jetbrains.com/webstorm'}

nuxt.config.ts

@@ -33,6 +33,7 @@ export default defineNuxtConfig({
     '~/assets/css/spoiler.css',
     '~/assets/css/burger.css',
     '~/assets/css/teaser.css',
+    '~/assets/css/project.css',
   ],
 
   postcss: {