Created basic hero banner

main
Samuel ORTION 5 months ago
parent 61b72a7f9c
commit 649571da7b

@ -9,7 +9,7 @@
.dark-mode {
--color: #ebf4f1;
--color-primary: #41b38a;
--color-primary: lightgreen;
--color-secondary: #fdf9f3;
--bg: #091a28;
--bg-secondary: #071521;
@ -53,10 +53,37 @@ p {
flex-direction: row;
}
.container {
.flex {
display: flex;
}
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
}
.center {
text-align: center;
align-items: center;
}
@media screen and (min-width: 768px) {
md:row {
flex-direction: row!important;
}
}
@media screen and (max-width: 768px) {
md:row {
flex-direction: unset;
}
}
.row {
flex-direction: row;
}

@ -1,6 +1,6 @@
<template>
<footer>
<div class="container row separate">
<div class="flex col md:row separate center">
<p class="copyright">
{{ $t('Contenu sous licence') }}
&nbsp;
@ -10,6 +10,10 @@
{{ year }}
</span>.
</p>
<p class="author">
🄯 2022 -
<a href="mailto:samuel+web@ortion.fr">Samuel ORTION</a>
</p>
<p class="techno">
{{ $t('Fait avec') }}
<span class="love">
@ -54,7 +58,12 @@ footer {
align-self: baseline;
}
span, a {
span,
a {
margin: 0 0.1em;
}
.love {
color: red;
}
</style>

@ -1,3 +1,27 @@
<template>
<div class="hero" />
<div class="hero">
<div class="flex row separate">
<h1 class="name large">
Samuel ORTION
</h1>
<p class="flex col">
<span class="studies">
{{ $t('Etudiant en BioInformatique') }} {{ $t('at') }}<span class="univ">{{ $t("Universite Evry - Paris-Saclay") }}.</span>
</span>
</p>
</div>
</div>
</template>
<style>
.hero .large {
font-size: 2rem;
font-weight: bolder;
padding: 2rem;
}
.hero div {
display: flex;
align-items: center;
}
</style>

@ -19,5 +19,11 @@
"Votre message a bien ete envoye": "Your message has been sent",
"Changer de theme": "Switch color theme",
"Mes Projets": "My Projects",
"Curriculum Vitae": "Resume"
"Curriculum Vitae": "Resume",
"Developpeur et Sysadmin junior": "Junior Developper and Sysadmin",
"Developeur et Sysadmin junior": "Junior Developer and Sysadmin",
"l": "Évry - Paris-Saclay University",
"Etudiant en BioInformatique": "BioInformatics Student",
"at": "at",
"Universite Evry - Paris-Saclay": "Évry - Paris-Saclay University"
}

@ -1,4 +1,8 @@
{
"Changer de theme": "Changer de thème",
"Contact": "Contact"
"Contact": "Contact",
"Developeur et Sysadmin junior": "Dévelopeur et Sysadmin Junior",
"Etudiant en BioInformatique": "Étudiant en BioInformatique",
"at": "à",
"Universite Evry - Paris-Saclay": "l'Université d'Évry - Paris-Saclay"
}

@ -34,7 +34,12 @@ export default {
}
main {
width: 50%;
margin: auto;
}
@media only screen and (min-width: 750px) {
main {
width: 50%;
}
}
</style>

Loading…
Cancel
Save