Improve design 🛤

This commit is contained in:
2020-12-05 11:21:07 +01:00
parent 25f5969d69
commit 51e3fa1a65
5 changed files with 41 additions and 39 deletions

View File

@@ -56,10 +56,10 @@
</nuxt-link>
</ul>
</div>
<ul class="dark:text-white dark:bg-dark-200 z-index-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link class="w-1/5 red" to="/">
<ul class="dark:text-white dark:bg-dark-200 text-sm z-50 bg-white md:hidden fixed bottom-0 left-0 w-full flex items-center justify-around h-20 border-t border-gray-200 border-solid navbar-bottom-items">
<nuxt-link to="/" class="w-1/5 red">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-block" height="20" width="20" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
{{ $t('part_home') }}
@@ -67,7 +67,7 @@
</nuxt-link>
<nuxt-link to="/about" class="w-1/5 orange">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-block" height="20" width="20" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
{{ $t('part_about') }}
@@ -75,7 +75,7 @@
</nuxt-link>
<nuxt-link to="/blog" class="w-1/5 green">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-block" height="20" width="20" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
{{ $t('part_blog') }}
@@ -83,7 +83,7 @@
</nuxt-link>
<nuxt-link to="/work" class="w-1/5 blue">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-block" height="20" width="20" 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
{{ $t('part_work') }}
@@ -91,7 +91,7 @@
</nuxt-link>
<nuxt-link to="/contact" class="w-1/5 purple">
<li class="font-bold flex flex-col items-center justify-center">
<svg class="inline-block" height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-block" height="20" width="20" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>

View File

@@ -1,8 +1,8 @@
<template>
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="mb-3 mr-3 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-400'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
<img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
</div>
<h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
</div>

View File

@@ -2,9 +2,9 @@
<div class="m-4 p-1 md:p-2 h-48 w-48 border-gray-900 dark:border-dark-800 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="'hover:bg-'+color+'-600'">
<div class="w-full h-full flex flex-col justify-center items-center">
<div>
<img class="rounded-full" alt="Skill Img" width="95" height="95" :src="'http://localhost:5555/files/' + cover">
<img class="rounded-sm" alt="Skill Img" :src="'http://localhost:5555/files/' + cover">
</div>
<h1 class="md:text-2xl text-lg font-bold">{{ $t(skill) }}</h1>
<h1 class="md:text-xl text-lg font-bold text-center">{{ $t(skill) }}</h1>
</div>
</div>
</template>