arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-25 17:30:34 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Fix colors

Browse Source
This commit is contained in:
Arthur Danjou
2020-12-15 18:15:34 +01:00
parent da769dc714
commit 78d9197044
10 changed files with 146 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/HomeLink.vue
View File

@@ -1,14 +1,15 @@
<template>
<nuxt-link :to="link">
<div
class="home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
:class="color ? 'hover:bg-' + color + '-400 dark:hover:bg-' + color + '-600 active:bg-' + color + '-400 dark:active:bg-' + color + '-600' : ''">
class="group home-link h-full duration-500 cursor-pointer flex flex-row justify-between py-3 w-full md:w-96 items-center"
:class="getColor"
>
<div class="ml-4">
<h1 class="text-2xl md:text-3xl font-bold my-2">
{{ $t(title) }}
<slot />
</h1>
<p class="w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
<p class="group-hover:dark:text-white w-5/6 text-gray-900 dark:text-dark-100 text-justify duration-300">{{ $t(description) }}</p>
</div>
<div class="mr-10 arrow duration-300">
<svg class="inline icon" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -39,16 +40,26 @@ export default {
default: "/",
type: String
}
},
computed: {
getColor() {
switch (this.color) {
case 'orange':
return 'hover:bg-orange-400 dark:hover:bg-orange-600 active:bg-orange-400 dark:active:bg-orange-600'
case 'purple':
return 'hover:bg-purple-400 dark:hover:bg-purple-600 active:bg-purple-400 dark:active:bg-purple-600'
case 'blue':
return 'hover:bg-blue-400 dark:hover:bg-blue-600 active:bg-blue-400 dark:active:bg-blue-600'
case 'green':
return 'hover:bg-green-400 dark:hover:bg-green-600 active:bg-green-400 dark:active:bg-green-600'
}
}
}
}
</script>
<style scoped lang="scss">
.home-link:hover {
p {
@apply dark:text-white;
}
.arrow {
transform: translateX(15px);
}

54
components/Skill.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
@@ -25,6 +25,58 @@ export default {
type: String,
default: "logo.jpg"
}
},
computed: {
getColor() {
switch (this.color) {
case 'orange':
return 'hover:bg-orange-400'
case 'purple':
return 'hover:bg-purple-400'
case 'blue':
return 'hover:bg-blue-400'
case 'green':
return 'hover:bg-green-400'
case 'yellow':
return 'hover:bg-yellow-400'
case 'cyan':
return 'hover:bg-cyan-400'
case 'teal':
return 'hover:bg-teal-400'
case 'amber':
return 'hover:bg-amber-400'
case 'blueGray':
return 'hover:bg-blueGray-400'
case 'emerald':
return 'hover:bg-emerald-400'
case 'lightBlue':
return 'hover:bg-lightBlue-400'
case 'lime':
return 'hover:bg-lime-400'
case 'rose':
return 'hover:bg-rose-400'
case 'black':
return 'hover:bg-black-400'
case 'white':
return 'hover:bg-white-400'
case 'pink':
return 'hover:bg-pink-400'
case 'fuchsia':
return 'hover:bg-fuchsia-400'
case 'violet':
return 'hover:bg-violet-400'
case 'indigo':
return 'hover:bg-indigo-400'
case 'warmGray':
return 'hover:bg-warmGray-400'
case 'trueGray':
return 'hover:bg-trueGray-400'
case 'gray':
return 'hover:bg-gray-400'
case 'coolGray':
return 'hover:bg-coolGray-400'
}
}
}
}
</script>

53
components/Work.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer" :class="'hover:bg-'+color+ '-600'">
<div class="mb-3 mr-3 p-1 md:p-2 h-64 w-64 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25 hover:scale-105 transform cursor-pointer"
:class="getColor">
<div class="w-full h-full flex flex-col justify-center items-center">
<div class="text-center">
<img alt="Project Img" class="rounded-md" width="150" :src="'http://localhost:5555/files/' + cover">
@@ -36,6 +37,56 @@ export default {
computed: {
formatLink() {
return this.url.replace('https://', '').replace('http://', '')
},
getColor() {
switch (this.color) {
case 'orange':
return 'hover:bg-orange-600'
case 'purple':
return 'hover:bg-purple-600'
case 'blue':
return 'hover:bg-blue-600'
case 'green':
return 'hover:bg-green-600'
case 'yellow':
return 'hover:bg-yellow-600'
case 'cyan':
return 'hover:bg-cyan-600'
case 'teal':
return 'hover:bg-teal-600'
case 'amber':
return 'hover:bg-amber-600'
case 'blueGray':
return 'hover:bg-blueGray-600'
case 'emerald':
return 'hover:bg-emerald-600'
case 'lightBlue':
return 'hover:bg-lightBlue-600'
case 'lime':
return 'hover:bg-lime-600'
case 'rose':
return 'hover:bg-rose-600'
case 'black':
return 'hover:bg-black-600'
case 'white':
return 'hover:bg-white-600'
case 'pink':
return 'hover:bg-pink-600'
case 'fuchsia':
return 'hover:bg-fuchsia-600'
case 'violet':
return 'hover:bg-violet-600'
case 'indigo':
return 'hover:bg-indigo-600'
case 'warmGray':
return 'hover:bg-warmGray-600'
case 'trueGray':
return 'hover:bg-trueGray-600'
case 'gray':
return 'hover:bg-gray-600'
case 'coolGray':
return 'hover:bg-coolGray-600'
}
}
}
}