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

import tailwindcss v2

Browse Source
This commit is contained in:
Arthur Danjou
2020-11-20 16:57:06 +01:00
parent e3cc1fad84
commit bb18daede2
20 changed files with 671 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/ColorMode.ts
View File

@@ -2,5 +2,5 @@ export default {
preference: 'system',
fallback: 'dark',
classPrefix: '',
classSuffix: '-mode',
classSuffix: '',
}

8
config/Tailwind.ts
View File

@@ -1,7 +1,5 @@
export default {
config: {
plugins: [
require('tailwindcss-dark-mode')
]
}
cssPath: './assets/css/tailwind.css',
configPath: 'tailwind.config.js',
exposeConfig: true
}

7
nuxt.config.js
View File

@@ -14,10 +14,6 @@ export default {
plugins: [
],
purgeCSS: {
whitelist: ["dark-mode"]
},
components: true,
buildModules: [
@@ -41,7 +37,8 @@ export default {
store: 'store',
},
build: {},
build: {
},
pageTransition: {
name: 'page',

4
package.json
View File

@@ -20,7 +20,7 @@
"@nuxt/types": "^2.14.6",
"@nuxt/typescript-build": "^2.0.3",
"@nuxtjs/color-mode": "^2.0.0",
"tailwindcss-dark-mode": "^1.1.7",
"@nuxtjs/tailwindcss": "^3.2.0"
"@nuxtjs/tailwindcss": "^3.2.0",
"tailwindcss": "^2.0.1-compat"
}
}

4
src/assets/css/style.scss
View File

@@ -2,7 +2,3 @@ img, svg, path, g {
z-index: 0;
}
.dark-mode {
@apply bg-gray-800;
@apply text-white;
}

10
src/assets/css/tailwind.css
View File

@@ -1,7 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./style.scss";
@tailwind base;
@tailwind components;
@tailwind utilities;

49
src/components/Experience.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="flex flex-row relative mb-5">
<span class="self-center relative h-4 w-4 mr-4">
<span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
<span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span>
<div class="leading-7 relative">
<p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}} - {{company}}</h1>
<h2 class="text-xl">{{description}}</h2>
</div>
</div>
</template>
<script>
export default {
name: "Experience",
props: {
title: {
type: String,
default: "Title"
},
description: {
type: String,
default: "Description"
},
company: {
type: String,
default: "ArtDanjProduction"
},
location: {
type: String,
default: "France"
},
begin: {
type: String,
default: "Now"
},
end: {
type: String,
default: "Never"
}
}
}
</script>
<style scoped>
</style>

45
src/components/Formation.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="flex flex-row relative mb-5">
<span class="self-center relative h-4 w-4 mr-4">
<span v-if="end === 'Today'" class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-green-500"/>
<span v-else class="inline-flex h-full w-full rounded-full bg-transparent border-2 border-light-accent border-gray-500"/>
</span>
<div class="leading-7 relative">
<p class="text-base text-gray-800 leading-6">{{begin}} - {{end}} <span class="px-3">|</span> {{location}}</p>
<h1 class="text-2xl font-bold">{{title}}</h1>
<h2 class="text-xl">{{description}}</h2>
</div>
</div>
</template>
<script>
export default {
name: "Formation",
props: {
title: {
type: String,
default: "Title"
},
description: {
type: String,
default: "Description"
},
location: {
type: String,
default: "Location"
},
begin: {
type: String,
default: "Now"
},
end: {
type: String,
default: "Never"
}
}
}
</script>
<style scoped>
</style>

6
src/components/Header.vue
View File

@@ -100,6 +100,12 @@ export default {
.header-container {
.nuxt-link-active {
&.green {
@apply text-green-400;
}
}
.nuxt-link-exact-active {
&.red {
@apply text-red-400;

2
src/components/HomePost.vue
View File

@@ -1,5 +1,5 @@
<template>
<article class="border border-solid border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
<article class="border border-solid rounded-xl border-gray-300 w-full lg:w-1/3 h-auto h-blog p-2 flex flex-col justify-between my-5 lg:my-0 lg:mx-5">
<div>
<p class="text-3xl font-bold text-justify leading-7 mb-3">{{title}}</p>
<p class="text-gray-900 text-lg italic text-justify leading-5">{{description}}</p>

4
src/components/Post.vue
View File

@@ -11,7 +11,9 @@
</div>
<div class="self-end flex flex-wrap">
<div v-for="tag in tagsSplit" class="ml-2 py-1 px-2 rounded bg-black text-white font-semibold">
#{{tag}}
<nuxt-link :to="'/blog/tags/' + tag.toLowerCase()">
#{{tag}}
</nuxt-link>
</div>
</div>
</div>

36
src/components/Skill.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div class="m-4 md:w-48 h-32 w-2/3 p-1 md:p-2 skill border-gray-900 border-2 bg-gray-300 duration-300 rounded-3xl" :class="'hover:bg-'+color">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
COVER
</div>
<h1 class="md:text-2xl text-lg font-bold">{{skill}}</h1>
</div>
</div>
</template>
<script>
export default {
name: "Skill",
props: {
skill: {
type: String,
default: "Rien"
},
color: {
type: String,
default: "red-100"
},
cover: {
type: String,
default: "https://api.arthurdanjou.fr/files/default.png"
}
}
}
</script>
<style scoped lang="scss">
.skill {
}
</style>

14
tailwind.config.js → src/tailwind.config.js
View File

@@ -4,12 +4,11 @@ module.exports = {
purgeLayersByDefault: false,
},
purge: [],
target: 'relaxed',
prefix: '',
important: false,
separator: ':',
darkMode: 'class',
theme: {
darkSelector: '.dark-mode',
screens: {
sm: '640px',
md: '768px',
@@ -715,7 +714,7 @@ module.exports = {
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundClip: ['responsive'],
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
backgroundColor: ['hover', 'responsive'],
backgroundImage: ['responsive'],
gradientColorStops: ['responsive', 'hover', 'focus'],
backgroundOpacity: ['responsive', 'hover', 'focus'],
@@ -723,7 +722,7 @@ module.exports = {
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
borderCollapse: ['responsive'],
borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
borderColor: ['hover', 'responsive'],
borderOpacity: ['responsive', 'hover', 'focus'],
borderRadius: ['responsive'],
borderStyle: ['responsive'],
@@ -786,7 +785,7 @@ module.exports = {
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive'],
textColor: ['hover', 'responsive'],
textOpacity: ['responsive', 'hover', 'focus'],
textDecoration: ['responsive', 'hover', 'focus'],
textTransform: ['responsive'],
@@ -820,8 +819,5 @@ module.exports = {
transitionDuration: ['responsive'],
transitionDelay: ['responsive'],
animation: ['responsive'],
},
plugins: [
require('tailwindcss-dark-mode')()
],
}
}

6
src/templates/layouts/default.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<Header />
<Nuxt class="pt-16 lg:pt-24"/>
<Nuxt class="content pt-16 lg:pt-24"/>
<Footer />
</div>
</template>
@@ -15,5 +15,7 @@ export default {
</script>
<style scoped>
.content {
min-height: calc(100vh - (118px + 96px));
}
</style>

93
src/templates/pages/about.vue
View File

@@ -27,13 +27,48 @@
</div>
</div>
<div class="w-full mb-10 mt-4">
<h3 class="font-bold text-2xl md:text-4xl">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Compétences Techniques
<img class="inline skill-img" src="@/assets/img/about/wrench.svg" alt="Skills logo" height="32" width="32"/>
</h3>
<div>
<!-- TODO -->
TODO Insert Skills
<div class="flex flex-col items-center md:items-start md:justify-between md:flex-row flex-wrap">
<!-- TODO Insert Skills -->
<Skill
skill="Java"
color="white" />
<Skill
skill="JavaScript"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
<Skill
skill="Java"
color="white" />
</div>
</div>
<div class="w-full mb-10">
@@ -60,6 +95,10 @@
Startups & Entreprises innovantes
<img class="inline" src="@/assets/img/about/rocket.svg" alt="Dev icon" height="25" width="25" />
</li>
<li class="my-2">
Administration système
<img class="inline" src="@/assets/img/about/server.svg" alt="Dev icon" height="25" width="25" />
</li>
<li class="my-2">
Voyage
<img class="inline" src="@/assets/img/about/airplane.svg" alt="Dev icon" height="25" width="25" />
@@ -90,23 +129,47 @@
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Formation
<img class="inline formation-img" src="@/assets/img/about/formation.svg" alt="Formations logo" height="32" width="32"/>
</h3>
<div>
<!-- TODO -->
TODO Insert Formations
<!-- TODO Insert Formations-->
<Formation
title="Autodidacte"
description="Apprentissage en autodidacte et en pratiquant"
location="At Home 🏠"
begin="2015"
end="Today" />
<Formation
title="Baccalauréat"
description="Examen spécialités maths & Pc"
location="At Passy"
begin="2020"
end="2021" />
</div>
</div>
<div class="w-full mb-10">
<h3 class="font-bold text-2xl md:text-4xl">
<h3 class="font-bold text-2xl md:text-4xl mb-3">
Expériences
<img class="inline experience-img" src="@/assets/img/about/experience.svg" alt="Experience logo" height="32" width="32"/>
</h3>
<div>
<!-- TODO -->
TODO Insert Experiences
<!-- TODO Insert Experiences-->
<Experience
title="Junior Developer"
company="Erisium"
description="Chargé des mini-jeux et de l'infrastructure"
location="At Home 🏠"
begin="2019"
end="Today" />
<Experience
title="FullStack Software & Web Developer"
company="ArtDanjProduction"
description="Création d'applications web et développement de l'infrastructure"
location="At Home 🏠"
begin="2019"
end="2020" />
</div>
</div>
<nuxt-link to="/cv">
@@ -130,7 +193,7 @@
Editeurs de texte
<img class="inline experience-img" src="@/assets/img/about/code.svg" alt="Editor logo" height="32" width="32"/>
</h3>
<ul class="list-disc ml-10 text-gray-800">
<ul class="list-disc ml-10 text-gray-800 text-xl">
<li>
Editeur Java: <span>Intellij Idea Ultimate</span>
</li>
@@ -165,7 +228,7 @@
Apps & Logiciels
<img class="inline experience-img" src="@/assets/img/about/software.svg" alt="Software logo" height="32" width="32"/>
</h3>
<ul class="list-disc ml-10 text-gray-800">
<ul class="list-disc ml-10 text-gray-800 text-xl">
<li>
Email: <span>Courrier by Microsoft</span>
</li>
@@ -194,7 +257,7 @@
Hébergement
<img class="inline-block experience-img" src="@/assets/img/about/server.svg" alt="Server logo" height="32" width="32"/>
</h3>
<ul class="list-disc ml-10 text-gray-800">
<ul class="list-disc ml-10 text-gray-800 text-xl">
<li>
Hébergeur VPS: <span>PulseHeberg</span>
</li>
@@ -208,7 +271,7 @@
Setup bureautique
<img class="inline experience-img" src="@/assets/img/about/lamp.svg" alt="Desktop logo" height="32" width="32"/>
</h3>
<ul class="list-disc ml-10 text-gray-800">
<ul class="list-disc ml-10 text-gray-800 text-xl">
<li>
Bureau: <span>Ikea en bois</span>
</li>
@@ -240,7 +303,7 @@
<script lang="ts">
export default {
name: "about"
name: "about",
}
</script>

66
src/templates/pages/blog/_id.vue Normal file
View File

@@ -0,0 +1,66 @@
<template>
<main class="blog flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
<h1 class="title font-bold text-4xl mr-2 inline mb-4">
Blog
<img class="inline blog-img" src="@/assets/img/sections/quill.svg" height="40" width="40" alt="Blog Logo" />
</h1>
<div class="flex flex-col justify-around items-center py-8 w-full bg-red-100">
<!-- TODO Insert blog's posts -->
<h1>
TITLE
</h1>
<div class="w-1/2">
<div class="flex flex-row justify-between">
<div>
4 min. read
</div>
<div>
14 aout 2020
</div>
</div>
<div class="flex justify-center">
COVER
</div>
</div>
<h3>
DESCRIPTION
</h3>
<p>
CONTENT
</p>
<div class="my-10 border-t border-black border-solid w-full" />
<p class="text-center">
Merci d'avoir lu jusqu'au bout ! 😊<br class="md:hidden"/>
Hésite surtout pas à partager l'article sur Twitter
</p>
</div>
</main>
</template>
<script>
export default {
name: "blog",
data() {
return {
id: this.$route.params.id
}
},
}
</script>
<style scoped lang="scss">
.blog {
.blog-img {
transform: translate(3px, -10px);
}
.title:after {
margin-top: 0.1rem;
content: '';
height: 2px;
width: 100%;
display: block;
@apply bg-green-400;
}
}
</style>

14
src/templates/pages/blog.vue → src/templates/pages/blog/index.vue
View File

@@ -6,11 +6,13 @@
</h1>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
<!-- TODO Insert blog's posts -->
<Post
title="Il était une nouvelle fois la vie"
reading_time="4"
description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
tags="Dev Tech Vie"/>
<nuxt-link to="/blog/1">
<Post
title="Il était une nouvelle fois la vie"
reading_time="4"
description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
tags="Dev Tech Vie"/>
</nuxt-link>
<Post reading_time="12"/>
<Post />
</div>
@@ -19,7 +21,7 @@
<script>
export default {
name: "blog"
name: "blog"
}
</script>

50
src/templates/pages/blog/tags/_id.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<main class="blog flex flex-col items-center mt-16 md:mt-32 px-5 xl:px-64">
<h1 class="title font-bold text-4xl mr-2 inline mb-4">
#{{this.getCapitalizedTag}}
</h1>
<div class="flex flex-col justify-around items-center py-8 w-full md:w-1/2">
<!-- TODO Insert blog's posts -->
<nuxt-link to="/blog/1">
<Post
title="Il était une nouvelle fois la vie"
reading_time="4"
description="Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi. Un tout nouvel article à propos de je ne sais pas quoi."
tags="Dev Tech Vie"/>
</nuxt-link>
</div>
</main>
</template>
<script>
export default {
name: "blog",
data() {
return {
tag: this.$route.params.id
}
},
computed: {
getCapitalizedTag() {
return this.tag[0].toUpperCase() + this.tag.slice(1)
}
}
}
</script>
<style scoped lang="scss">
.blog {
.blog-img {
transform: translate(3px, -10px);
}
.title:after {
margin-top: 0.1rem;
content: '';
height: 2px;
width: 100%;
display: block;
@apply bg-green-400;
}
}
</style>

4
src/templates/pages/index.vue
View File

@@ -1,12 +1,12 @@
<template>
<main class="index mt-10 md:mt-32 bg-gray-100 px-5 xl:px-64">
<section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16">
<section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16 dark:bg-black">
<div class="hidden lg:block flex justify-center items-center lg:w-1/2">
<img src="@/assets/img/computer.png" alt="It's me !" class="me-img" />
</div>
<div class="title flex justify-center flex-col lg:w-1/2 pr-3">
<div class="mb-4 md:mb-10">
<h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4">
<h1 class="text-4xl md:text-5xl text-left font-bold md:w-3/4 dark:text-white">
Bonjour, je suis <br />
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
</h1>

540
yarn.lock
View File

File diff suppressed because it is too large Load Diff