webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: Start of extraction of Project Card

Browse source 
Still WIP though
This commit is contained in:
webfussel 2025-06-02 07:40:21 +02:00
parent 4852fc45b0
commit aa4b3002c4
5 changed files with 43 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/assets/css/project.css Normal file
View file

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

26
app/assets/css/skills.css
View file

@ -20,32 +20,8 @@
} }
@media (width <= 1601px) { @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;
}
}
} }

17
app/components/Project.vue Normal file
View file

@ -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>

38
app/utils/skills.ts
View file

@ -17,28 +17,28 @@ const flutterImg = '/img/skills/flutter.svg'
const dartImg = '/img/skills/dart.svg' const dartImg = '/img/skills/dart.svg'
const androidImg = '/img/skills/android.svg' const androidImg = '/img/skills/android.svg'
export type ISkill = { export type Skill = {
name: string name: string
img: string img: string
link ?: string link ?: string
width ?: number 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'}

1
nuxt.config.ts
View file

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