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

Fix footer + Add Posts preview + fix header + about + blog + index page

Browse Source
This commit is contained in:
Arthur Danjou
2020-10-29 23:35:18 +01:00
parent 9933439ee8
commit 181ea0bba3
52 changed files with 1514 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,31 +1,31 @@
<template>
<main class="index">
<section class="banner w-full flex justify-between flex-row-reverse items-center mb-16">
<div class="flex justify-center items-center w-1/2">
<main class="index mt-10 md:mt-32 dark:bg-gray-900 dark:text-white px-5 xl:px-64">
<section class="banner w-full flex justify-between flex-col lg:flex-row-reverse items-center mb-16">
<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 w-1/2 pr-3">
<div class="mb-10">
<h1 class="text-5xl text-left font-bold w-3/4">
Bonjour, je suis
<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">
Bonjour, je suis <br />
<span class="text-red-700 font-black">Arthur Danjou</span> 👋
</h1>
<p class="text-3xl my-5 font-semibold">
<p class="dark:text-white dark:bg-black text-2xl md:text-3xl my-5 font-semibold">
Développeur & étudiant
</p>
<p class="text-2xl text-justify mb-8 leading-7 text-gray-700">
<p class="text-lg md:text-2xl text-justify mb-8 leading-7 text-gray-700">
Je suis un jeune développeur autodidacte de 17 ans. J'habite à Paris 🇫🇷. J'adore créer des applications et des logiciels plus ou moins utiles.
J'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨
</p>
</div>
<div class="flex flex-row justify-around items-center">
<nuxt-link to="about">
<p class="about-btn rounded-full bg-red-400 hover:bg-red-700 duration-300 px-10 py-1 cursor-pointer">
<div class="flex flex-col md:flex-row justify-around items-center">
<nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="about">
<p class="about-btn rounded-full bg-red-400 hover:bg-red-700 duration-300 px-3 md:px-10 py-1 cursor-pointer">
En savoir plus
<img class="inline arrow-img" src="@/assets/img/icons/arrow-down.svg" alt="Go Down" height="32" width="32" />
</p>
</nuxt-link>
<nuxt-link to="contact">
<nuxt-link class="mb-3 w-full text-center md:mb-0 md:w-auto" to="contact">
<p class="rounded-full hover:bg-gray-400 duration-300 px-12 py-1 bg-gray-300 cursor-pointer">
Me contacter
</p>
@@ -41,8 +41,22 @@
<p class="mt-2 mb-8">
Parfois, je rédige des articles concernant le développement, ma vie, le design ou bien encore l'apprentissage !
</p>
<div>
TODO Insert blogs request
<div class="flex flex-col">
<!-- TODO Max 3 articles -->
<div class="flex flex-col lg:flex-row justify-space-evenly mb-10">
<HomePost
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"/>
<HomePost />
<HomePost />
</div>
<div class="text-center">
<nuxt-link to="/blog" class="px-3 py-3 border-2 border-solid border-black rounded-full font-semibold hover:bg-black hover:text-white duration-300">
Retrouvez mes autres articles
</nuxt-link>
</div>
</div>
</section>
<section class="my-16 border-t border-solid border-black pt-16">
@@ -54,6 +68,7 @@
Ayez une vision de mon travail, de mes projets personnels et professionnels ou de mes expérimentations !
</p>
<div>
<!-- TODO -->
TODO Insert Works request
</div>
</section>
@@ -66,6 +81,7 @@
Vous avez une idée révolutionnaire ?
</p>
<div>
<!-- TODO -->
TODO Services
</div>
</section>
@@ -75,13 +91,12 @@
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
export default Vue.extend({
})
</script>
<style lang="scss" scoped>
.index {
margin-top: 6rem;
padding: 0 15%;
.title {
line-height: 3rem;