💻 | Working on mobile version #2

This commit is contained in:
2021-04-07 23:01:52 +02:00
parent 4c9f128e61
commit a1596f73ad
6 changed files with 13 additions and 13 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="w-full my-12">
<div class="space-x-12 flex items-center justify-center">
<nuxt-link to="/uses" class="h-84 w-1/2">
<div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-center">
<nuxt-link to="/uses" class="h-84 md:w-1/2">
<Ad color="rose" class="h-full w-full flex flex-col justify-between">
<div>
ILLUSTRATION
@@ -16,7 +16,7 @@
</div>
</Ad>
</nuxt-link>
<nuxt-link to="/contact" class="h-84 w-1/2">
<nuxt-link to="/contact" class="h-84 md:w-1/2">
<Ad color="blue" class="h-full w-full flex flex-col justify-between">
<div>
ILLUSTRATION

View File

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

View File

@@ -5,11 +5,11 @@
<h2 class="font-bold text-3xl">
Derniers articles
</h2>
<p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
<p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
Je redige des articles concernant ma vie, le developpement et mes passions.
</p>
</div>
<div class="my-8 flex w-full space-x-6">
<div class="my-8 md:flex w-full md:space-x-6">
<div v-for="post in posts">
<Post
:title="post.title"

View File

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

View File

@@ -5,11 +5,11 @@
<h2 class="font-bold text-3xl">
Derniers projets
</h2>
<p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
<p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
Quelques projets que j'ai realise dans ma vie de developpeur.
</p>
</div>
<div class="my-8 flex w-full space-x-8">
<div class="my-8 md:flex w-full md:space-x-8">
<div v-for="project in projects">
<Project
:title="project.title"

View File

@@ -5,15 +5,15 @@
<h2 class="font-bold text-3xl">
Workflow
</h2>
<p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
<p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
Je suis ce processus afin d'etre le plus productif et de donner le resultat le plus qualitatif possible.
</p>
</div>
<div class="my-8 flex flex-row-reverse w-full justify-between items-center">
<div class="w-1/2 flex justify-center items-center">
<div class="my-8 flex flex-col md:flex-row-reverse w-full justify-between items-center">
<div class="w-full md:w-1/2 flex justify-center items-center">
La belle image
</div>
<div class="flex justify-center 1/2">
<div class="flex justify-center w-full md:w-1/2">
<div class="flex flex-col space-y-6 w-full">
<StrategyPart
title="#1. Brainstorming"