arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-20 06:51:48 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

💻 | Working and finishing

Browse Source
This commit is contained in:
Arthur Danjou
2021-04-16 23:24:58 +02:00
parent 8450d8bebf
commit 3fa4a08d59
15 changed files with 33 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/logo-header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 21 KiB

2
src/components/AboutHome.vue
View File

@@ -2,7 +2,7 @@
<section v-if="info && info.age" class="w-full flex items-center justify-center my-12">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-12 md:mb-0 md:w-1/2 flex justify-center">
<img src="@/assets/images/Logo.jpg" alt="Logo Image" class="w-1/2 rounded-2xl border-2 border-gray-100 dark:border-transparent">
<img src="@/assets/images/memojies/Hey.png" alt="It's me !" class="w-1/2">
</div>
<div class="md:w-1/2 text-justify">
<h2 class="text-4xl font-bold text-center md:text-justify">

2
src/components/Ad.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="rounded-3xl p-2 lg:p-8 text-center shadow-md" :class="getColor">
<div class="rounded-3xl p-2 lg:p-8 text-center" :class="getColor">
<slot />
</div>
</template>

6
src/components/AdHome.vue
View File

@@ -2,13 +2,13 @@
<section class="w-full my-12">
<div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
<nuxt-link to="/uses" class="md:w-1/3 h-full">
<Ad color="rose" class="h-96 w-full flex flex-col justify-between items-center">
<Ad color="rose" class="w-full flex flex-col justify-between items-center">
<div>
<img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
</div>
<div>
<h1 class="font-bold text-black text-4xl">
Usages
Comment je travaille ?
</h1>
<h3 class="px-4 text-xl text-gray-700">
Venez decouvrir mon environnement de developpement
@@ -17,7 +17,7 @@
</Ad>
</nuxt-link>
<nuxt-link to="/contact" class="md:w-1/3 h-full">
<Ad color="blue" class="h-96 w-full flex flex-col justify-between items-center">
<Ad color="blue" class="w-full flex flex-col justify-between items-center">
<div>
<img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
</div>

2
src/components/Button.vue
View File

@@ -1,5 +1,5 @@
<template>
<nuxt-link :to="link" class="duration-150 transform hover:scale-110">
<nuxt-link :to="link" class="duration-150 transform hover:scale-105">
<div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
{{ content }}
</div>

4
src/components/ContactForm.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="w-full flex items-center justify-center flex-col">
<h2 class="mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
Fill in the form or <a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
<h2 class="text-center mb-10 font-bold text-gray-700 text-2xl md:text-3xl my-4 dark:text-gray-400">
Fill in the form or <br class="lg:hidden"/><a class="email text-black dark:text-white" href="mailto:me@arthurdanjou.fr" target="_blank">Send an email</a> 📬
</h2>
<form class="w-full lg:w-1/2">
<div class="w-full lg:flex lg:space-x-4 justify-center mb-8 lg:mb-12">

8
src/components/Footer.vue
View File

@@ -10,8 +10,8 @@
<span class="link">Twitch</span>
</a>,
<a class="font-semibold" href="https://github.com/ArthurDanjou" target="_blank" rel="noopener noreferrer">
<img v-if="!isDarkMode" class="inline black" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
<img v-else class="inline black" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
<img v-if="!isDarkMode" class="inline" src="@/assets/images/socials/github-black.svg" alt="Github logo" height="20" width="20" />
<img v-else class="inline" src="@/assets/images/socials/github-white.svg" alt="Github logo" height="20" width="20" />
<span class="link">Github</span>
</a> &
<a class="font-semibold" href="https://twitter.com/ArthurDanj" target="_blank" rel="noopener noreferrer">
@@ -72,9 +72,5 @@ export default {
.link {
@apply border-b-2 border-gray-200 hover:border-black dark:border-gray-700 dark:hover:border-white;
}
.black {
@apply fill-black dark:fill-white dark:text-white dark:stroke-black
}
}
</style>

2
src/components/Post.vue
View File

@@ -1,6 +1,6 @@
<template>
<nuxt-link :to="`/blog/${slug}`">
<div class="rounded-lg shadow-xl h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
<div class="rounded-lg shadow-xl h-116 w-full lg:w-100 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
<div class="h-2/5 post rounded-t-lg"
:style="{ backgroundImage: `url(${getBackgroundCover})` }">
</div>

2
src/components/PresentationAbout.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="flex flex-col 2xl:flex-row justify-center items-center py-8">
<div class="lg:mr-12">
<img class="logo-img rounded-full my-5 shadow-lg" src="@/assets/images/Logo.jpg" alt="It's me !" />
<img class="logo-img rounded-full my-5" src="@/assets/images/memojies/Hey.png" alt="It's me !" />
</div>
<div class="ml-2 text-lg leading-6 xl:w-2/3 text-justify dark:text-gray-400 text-gray-700">
<p>{{ $t('about.banner.hello') }} <span class="text-indigo-600 font-bold">Arthur DANJOU</span> 👋.</p> <br/>

10
src/components/Project.vue
View File

@@ -1,6 +1,6 @@
<template>
<nuxt-link :to="`/projects/${slug}`">
<div class="rounded-lg shadow-xl h-80 w-full lg:w-84 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
<a :href="url" target="_blank" rel="noopener noreferrer">
<div class="rounded-lg shadow-xl h-80 w-full lg:w-84 text-left bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
<div class="h-2/5 post rounded-t-lg flex justify-center">
<img :src="getCover" alt="Project Image" class="h-full"/>
</div>
@@ -16,7 +16,7 @@
</div>
</div>
</div>
</nuxt-link>
</a>
</template>
<script lang="ts">
@@ -53,6 +53,10 @@ export default {
tags: {
type: Array,
default: () => ['tags.web', 'tags.software']
},
url: {
type: String,
default: 'https://arthurdanjou.fr'
}
},
setup(props: ProjectProp) {

41
src/content/projects.json
View File

@@ -5,13 +5,7 @@
"description": "works.erisium",
"url": "https://erisium.com",
"cover": "erisium.png",
"color": "fuchsia",
"skills": [
"java",
"git",
"redis",
"mariadb"
]
"color": "fuchsia"
},
{
"slug": "artsite",
@@ -19,18 +13,7 @@
"description": "works.artsite",
"url": "https://arthurdanjou.fr",
"cover": "artsite.png",
"color": "trueGray",
"skills": [
"typescript",
"nuxtjs",
"vuejs",
"git",
"tailwindcss",
"sass",
"html",
"css",
"nodejs"
]
"color": "trueGray"
},
{
"slug": "artapi",
@@ -38,16 +21,7 @@
"description": "works.artapi",
"url": "https://api.arthurdanjou.fr",
"cover": "artapi.png",
"color": "trueGray",
"skills": [
"typescript",
"adonisjs",
"git",
"docker",
"nodejs",
"redis",
"mariadb"
]
"color": "trueGray"
},
{
"slug": "artclick",
@@ -55,13 +29,6 @@
"description": "works.artclick",
"url": "https://artdanj.to",
"cover": "artclick.png",
"color": "trueGray",
"skills": [
"adonisjs",
"git",
"redis",
"mariadb",
"typescript"
]
"color": "trueGray"
}
]

6
src/content/skills.json
View File

@@ -21,7 +21,7 @@
"title": "Go",
"color": "cyan",
"cover": "GoLang",
"slug": "go"
"slug": "golang"
},
{
"title": "NuxtJs",
@@ -33,7 +33,7 @@
"title": "VueJs",
"color": "emerald",
"cover": "VueJs",
"slug": "vueJs"
"slug": "vuejs"
},
{
"title": "AdonisJs",
@@ -99,7 +99,7 @@
"title": "TailwindCss",
"color": "teal",
"cover": "TailwindCss",
"slug": "tailwind"
"slug": "tailwindcss"
},
{
"title": "Docker",

6
src/pages/about.vue
View File

@@ -13,7 +13,11 @@
<LanguagesAbout />
<FormationsAbout />
<ExperiencesAbout />
<Button content="about.cv" link="/cv" />
<a href="/resume.pdf" target="_blank" class="duration-150 transform hover:scale-105">
<div class="text-lg cursor-pointer px-8 py-4 rounded-xl border-2 border-indigo-600 hover:(bg-indigo-600 text-white) dark:hover:text-black text-indigo-600 duration-300">
Télécharger mon cv
</div>
</a>
</main>
</template>

3
src/pages/projects/index.vue → src/pages/projects.vue
View File

@@ -20,6 +20,7 @@
:slug="project.slug"
:tags="project.tags"
:company="project.company"
:url="project.url"
/>
</div>
</div>
@@ -30,7 +31,7 @@
<script lang="ts">
import {useAsync, useContext, useMeta} from "@nuxtjs/composition-api";
import {Project} from "../../../@types/types";
import {Project} from "../../@types/types";
export default {
name: "index",

170
src/pages/projects/_slug.vue
View File

@@ -1,170 +0,0 @@
<template>
<main v-if="project" class="px-5 xl:px-64 mb-16 md:mb-32">
<div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
<div class="w-full lg:w-1/2 flex flex-col items-center">
<div class="md:mb-24">
<div class="mb-4 flex">
<nuxt-link to="/projects" class="back-arrow flex">
<div class="duration-300 arrow">
<svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</div>
<div class="ml-2">
{{ $t('projects.go_back') }}
</div>
</nuxt-link>
</div>
</div>
<img class="w-72 rounded-xl" :src="require(`@/assets/images/projects/${project.cover}`)" alt="Project Img" />
<a
class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
:class="getColor"
:href="project.url"
>{{project.url.replace('https://', '').replace('http://', '')}}</a>
</div>
<div class="w-full lg:w-1/2 ml-5 ">
<h1 @click="debug" class="text-xl lg:text-3xl font-bold">
{{ project.title }}
</h1>
<p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
{{ $t(project.description) }}
</p>
<div>
<h3 class="text-md lg:text-lg font-bold">
{{ $t('projects.tech_used') }}
</h3>
<div v-if="skills && skills.length > 0" class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
<div v-for="skill in skills">
<WorkSkill
:skill="skill.title"
:color="skill.color"
:cover="skill.cover"
/>
</div>
</div>
</div>
</div>
</div>
</main>
</template>
<script lang="ts">
import {
computed, onUpdated, useAsync, useContext,
useMeta,
useRoute,
useStatic, watch, watchEffect,
} from "@nuxtjs/composition-api";
import {Project, Skill} from "../../../@types/types";
import {IContentDocument} from "@nuxt/content/types/content";
export default {
head: {},
setup() {
const {$content, app, i18n} = useContext()
const route = useRoute()
const slug = computed(() => route.value.params.slug)
const project = useStatic((slug) => {
return $content('projects', slug)
.fetch<Project>()
.catch(() => {
app.error({statusCode: 404, message: "Project not found"})
}) as Promise<Project>
}, slug, 'projects')
const skills = useAsync(() => {
return $content('skills')
.where({
slug: {
$in: project.value?.skills
}
})
.fetch<Skill>()
.catch(() => {
app.error({statusCode: 404, message: "Skills in project not found"});
}) as Promise<Skill>
})
useMeta({
title: `${i18n.t('header.projects')} - Arthur Danjou - ${project.value?.title}`
})
const debug = () => {
console.log(project)
console.log(skills)
}
const getColor = computed(() => {
switch (project.value?.color) {
case 'red':
return 'bg-red-400 hover:bg-red-600'
case 'orange':
return 'bg-orange-400 hover:bg-orange-600'
case 'purple':
return 'bg-purple-400 hover:bg-purple-600'
case 'blue':
return 'bg-blue-400 hover:bg-blue-600'
case 'green':
return 'bg-green-400 hover:bg-green-600'
case 'yellow':
return 'bg-yellow-400 hover:bg-yellow-600'
case 'cyan':
return 'bg-cyan-400 hover:bg-cyan-600'
case 'teal':
return 'bg-teal-400 hover:bg-teal-600'
case 'amber':
return 'bg-amber-400 hover:bg-amber-600'
case 'blueGray':
return 'bg-blueGray-400 hover:bg-blueGray-600'
case 'emerald':
return 'bg-emerald-400 hover:bg-emerald-600'
case 'lightBlue':
return 'bg-lightBlue-400 hover:bg-lightBlue-600'
case 'lime':
return 'bg-lime-400 hover:bg-lime-600'
case 'rose':
return 'bg-rose-400 hover:bg-rose-600'
case 'black':
return 'bg-black hover:bg-black'
case 'white':
return 'bg-white hover:bg-white'
case 'pink':
return 'bg-pink-400 hover:bg-pink-600'
case 'fuchsia':
return 'bg-fuchsia-400 hover:bg-fuchsia-600'
case 'violet':
return 'bg-violet-400 hover:bg-violet-600'
case 'indigo':
return 'bg-indigo-400 hover:bg-indigo-600'
case 'warmGray':
return 'bg-warmGray-400 hover:bg-warmGray-600'
case 'trueGray':
return 'bg-trueGray-400 hover:bg-trueGray-600'
case 'gray':
return 'bg-gray-400 hover:bg-gray-600'
case 'coolGray':
return 'bg-coolGray-400 hover:bg-coolGray-600'
}
})
return {
project,
skills,
getColor,
debug
}
}
}
</script>
<style scoped lang="scss">
.back-arrow:hover .arrow {
transform: translate(-8px, -1px);
}
.arrow {
transform: translate(3px, -1px);
}
</style>