feat: create the multiple banner/theme homepage
This commit is contained in:
parent
8d542aa85f
commit
24baa3c5c4
GPG Key ID:
D75243CA236D825E
11
src/App.vue
11
src/App.vue
|
|
@ -1,22 +1,19 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<Banner/>
|
||||
<Home/>
|
||||
<Skills/>
|
||||
<Experiences/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Banner from './components/Banner.vue';
|
||||
import Home from './components/Home.vue';
|
||||
import Skills from './components/Skills.vue';
|
||||
import Experiences from './components/Experiences.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Banner,
|
||||
Home,
|
||||
Skills,
|
||||
Experiences,
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {
|
||||
|
|
@ -39,6 +36,6 @@ export default class App extends Vue {
|
|||
|
||||
overflow: hidden;
|
||||
|
||||
background: #1a1a1a;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="a" d="m2.1173 0c-1.1611 0-2.1173 0.95625-2.1173 2.1173 0 1.1611 0.95626 2.116 2.1173 2.116s2.116-0.95493 2.116-2.116c0-1.1611-0.95493-2.1173-2.116-2.1173zm-6.4e-4 0.67548a1.4418 1.4418 0 0 1 0.0445 6.38e-4 1.4418 1.4418 0 0 1 0.0445 0.0019 1.4418 1.4418 0 0 1 0.0442 0.0034 1.4418 1.4418 0 0 1 0.0442 5e-3 1.4418 1.4418 0 0 1 0.0442 0.0062 1.4418 1.4418 0 0 1 0.0438 0.0072 1.4418 1.4418 0 0 1 0.0435 9e-3 1.4418 1.4418 0 0 1 0.0432 0.01024 1.4418 1.4418 0 0 1 0.0429 0.01152 1.4418 1.4418 0 0 1 0.0426 0.0128 1.4418 1.4418 0 0 1 0.0421 0.01408 1.4418 1.4418 0 0 1 0.0418 0.0152 1.4418 1.4418 0 0 1 0.0411 0.0168 1.4418 1.4418 0 0 1 0.0405 0.01779 1.4418 1.4418 0 0 1 0.0402 0.01944 1.4418 1.4418 0 0 1 0.0392 0.02042 1.4418 1.4418 0 0 1 0.0389 0.02141 1.4418 1.4418 0 0 1 0.0382 0.02272 1.4418 1.4418 0 0 1 0.0373 0.02403 1.4418 1.4418 0 0 1 0.037 0.02504 1.4418 1.4418 0 0 1 0.0355 0.02635 1.4418 1.4418 0 0 1 0.0352 0.02733 1.4418 1.4418 0 0 1 0.0339 0.02832 1.4418 1.4418 0 0 1 0.0336 0.02931 1.4418 1.4418 0 0 1 0.0323 0.03062 1.4418 1.4418 0 0 1 0.0314 0.03128 1.4418 1.4418 0 0 1 0.0302 0.03227 1.4418 1.4418 0 0 1 0.0296 0.03326 1.4418 1.4418 0 0 1 0.0283 0.03426 1.4418 1.4418 0 0 1 0.0274 0.03491 1.4418 1.4418 0 0 1 0.0261 0.0359 1.4418 1.4418 0 0 1 0.0254 0.03656 1.4418 1.4418 0 0 1 0.0237 0.03755 1.4418 1.4418 0 0 1 0.0227 0.03821 1.4418 1.4418 0 0 1 0.0218 0.03853 1.4418 1.4418 0 0 1 0.0203 0.03952 1.4418 1.4418 0 0 1 0.0192 0.04018 1.4418 1.4418 0 0 1 0.0181 0.04051 1.4418 1.4418 0 0 1 0.0165 0.04117 1.4418 1.4418 0 0 1 0.016 0.0415 1.4418 1.4418 0 0 1 0.0144 0.04216 1.4418 1.4418 0 0 1 0.0128 0.04248 1.4418 1.4418 0 0 1 0.0112 0.04315 1.4418 1.4418 0 0 1 0.01 0.04315 1.4418 1.4418 0 0 1 8e-3 0.04347 1.4418 1.4418 0 0 1 8e-3 0.04381 1.4418 1.4418 0 0 1 6e-3 0.04381 1.4418 1.4418 0 0 1 5e-3 0.04446 1.4418 1.4418 0 0 1 3e-3 0.04413 1.4418 1.4418 0 0 1 2e-3 0.04446 1.4418 1.4418 0 0 1 6.4e-4 0.04413 1.4418 1.4418 0 0 1-6e-3 0.13306 1.4418 1.4418 0 0 1-0.0184 0.13206 1.4418 1.4418 0 0 1-0.0304 0.12942 1.4418 1.4418 0 0 1-0.0426 0.12646 1.4418 1.4418 0 0 1-0.0536 0.12186 1.4418 1.4418 0 0 1-0.065 0.11626 1.4418 1.4418 0 0 1-0.075 0.11 1.4418 1.4418 0 0 1-0.0853 0.10243 1.4418 1.4418 0 0 1-0.0939 0.09419 1.4418 1.4418 0 0 1-0.10272 0.08498 1.4418 1.4418 0 0 1-0.1096 0.07509 1.4418 1.4418 0 0 1-0.11632 0.06488 1.4418 1.4418 0 0 1-0.12176 0.05402 1.4418 1.4418 0 0 1-0.1264 0.04216 1.4418 1.4418 0 0 1-0.12944 0.03062 1.4418 1.4418 0 0 1-0.132 0.01845 1.4418 1.4418 0 0 1-0.13312 0.0059 1.4418 1.4418 0 0 1-0.13312-0.0059 1.4418 1.4418 0 0 1-0.13168-0.01845 1.4418 1.4418 0 0 1-0.12976-0.03062 1.4418 1.4418 0 0 1-0.12608-0.04216 1.4418 1.4418 0 0 1-0.12192-0.05402 1.4418 1.4418 0 0 1-0.11632-0.06488 1.4418 1.4418 0 0 1-0.10992-0.07509 1.4418 1.4418 0 0 1-0.1024-0.08498 1.4418 1.4418 0 0 1-0.0942-0.09419 1.4418 1.4418 0 0 1-0.085-0.10243 1.4418 1.4418 0 0 1-0.0754-0.11 1.4418 1.4418 0 0 1-0.0648-0.11626 1.4418 1.4418 0 0 1-0.0536-0.12186 1.4418 1.4418 0 0 1-0.0422-0.12646 1.4418 1.4418 0 0 1-0.0307-0.12942 1.4418 1.4418 0 0 1-0.0184-0.13206 1.4418 1.4418 0 0 1-6e-3 -0.13306 1.4418 1.4418 0 0 1 6e-3 -0.13272 1.4418 1.4418 0 0 1 0.0184-0.13206 1.4418 1.4418 0 0 1 0.0307-0.12976 1.4418 1.4418 0 0 1 0.0422-0.12614 1.4418 1.4418 0 0 1 0.0536-0.12186 1.4418 1.4418 0 0 1 0.0648-0.11626 1.4418 1.4418 0 0 1 0.0754-0.11 1.4418 1.4418 0 0 1 0.085-0.10243 1.4418 1.4418 0 0 1 0.0942-0.09419 1.4418 1.4418 0 0 1 0.1024-0.08498 1.4418 1.4418 0 0 1 0.10992-0.07542 1.4418 1.4418 0 0 1 0.11632-0.06454 1.4418 1.4418 0 0 1 0.12192-0.05402 1.4418 1.4418 0 0 1 0.12608-0.04216 1.4418 1.4418 0 0 1 0.12976-0.03063 1.4418 1.4418 0 0 1 0.13168-0.01845 1.4418 1.4418 0 0 1 0.13312-0.0059z" color="#000000" fill="#f8f8f8" stroke-linecap="round" stroke-width=".63731" style="paint-order:stroke fill markers"/>
|
||||
<circle id="b" cx="2.1167" cy="2.1171" r=".73799" fill="#f8f8f8" style="paint-order:stroke fill markers"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".97647" offset="0"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".89804" offset=".59203"/>
|
||||
<stop stop-color="#1a1a1a" offset="1"/>
|
||||
<stop stop-color="#fff" stop-opacity=".97647" offset="0"/>
|
||||
<stop stop-color="#fff" stop-opacity=".89804" offset=".59203"/>
|
||||
<stop stop-color="#fff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-.83328 -158.95)">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 921 B After Width: | Height: | Size: 869 B |
|
|
@ -1,10 +1,10 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".25098" offset="0"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".14902" offset=".22879"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".05098" offset="1"/>
|
||||
<stop stop-color="#fff" stop-opacity=".25098" offset="0"/>
|
||||
<stop stop-color="#fff" stop-opacity=".14902" offset=".22879"/>
|
||||
<stop stop-color="#fff" stop-opacity=".05098" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-.83328 -158.95)">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1019 B |
|
|
@ -1,310 +0,0 @@
|
|||
<template>
|
||||
<div id='banner'>
|
||||
|
||||
<div class='wave'></div>
|
||||
<div class='wave w2'></div>
|
||||
|
||||
<div class='border-card'></div>
|
||||
|
||||
<div class='content'>
|
||||
<h3>Hello, I'm</h3>
|
||||
<h1 class='name'>
|
||||
{{ model.firstname.toUpperCase() }}
|
||||
{{ model.lastname.toUpperCase() }}
|
||||
</h1>
|
||||
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||
|
||||
<form class='themes'>
|
||||
<input type='radio' name='theme' id='bw' checked/>
|
||||
<label for='bw'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='gooey'/>
|
||||
<label for='gooey'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='flat'/>
|
||||
<label for='flat'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<input type='radio' name='theme' id='glass'/>
|
||||
<label for='glass'>
|
||||
<div class='spacer'>
|
||||
<div class='tick'></div>
|
||||
</div>
|
||||
</label>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import BannerModel from '../model/banner';
|
||||
|
||||
@Component({})
|
||||
export default class Banner extends Vue {
|
||||
private model: any = BannerModel;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '../global.scss';
|
||||
|
||||
$banner-size: 100vh;
|
||||
$wave-height: 6.3rem;
|
||||
$bg-color: #f8f8f8;
|
||||
$themes-spacing: 2rem;
|
||||
|
||||
// horizontal spacing between theme chips
|
||||
$theme-chip-spacing: 1rem;
|
||||
// full size of a theme chip
|
||||
$theme-chip-size: 1.8rem;
|
||||
// empty space inside the chip (relative to the chip size)
|
||||
$theme-chip-void: 1.2rem;
|
||||
// size of the inner (checked) circle (relative to the chip void)
|
||||
$theme-chip-inner: .6rem;
|
||||
|
||||
// MEDIA QUERIES
|
||||
// optimize vertical space
|
||||
$mq-vert: 590px;
|
||||
|
||||
#banner {
|
||||
flex: #{$banner-size * 0.999} 0 0;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
color: #3d3d3d;
|
||||
font-size: 1rem;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
@keyframes wave-x {
|
||||
from{ background-position-x: 1px; }
|
||||
to{ background-position-x: 100vw; }
|
||||
}
|
||||
|
||||
.wave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc( #{$banner-size} - #{$wave-height} );
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: $wave-height;
|
||||
|
||||
background-image: url('../assets/wave.invert.1.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position-y: 101%;
|
||||
background-size: auto 100%;
|
||||
|
||||
animation: 18s ease-in-out wave-x infinite alternate;
|
||||
|
||||
&.w2{
|
||||
background-image: url('../assets/wave.invert.2.svg');
|
||||
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.border-card {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -20vw;
|
||||
left: 70vw;
|
||||
width: 60vw;
|
||||
height: 60vw;
|
||||
|
||||
background: #1a1a1a;
|
||||
|
||||
border-radius: 3rem;
|
||||
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: auto 0 1;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: column nowrap;
|
||||
|
||||
margin: 0 10rem;
|
||||
margin-bottom: $wave-height;
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.themes {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
input[type=radio]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: $theme-chip-size;
|
||||
height: $theme-chip-size;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 #{$theme-chip-spacing};
|
||||
|
||||
background: transparent;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: transform .2s ease-in;
|
||||
|
||||
// hide the center to make a ring
|
||||
.spacer {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: $theme-chip-void;
|
||||
height: $theme-chip-void;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: $bg-color;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
}
|
||||
|
||||
.tick {
|
||||
opacity: 0;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: $theme-chip-inner;
|
||||
height: $theme-chip-inner;
|
||||
|
||||
background: transparent;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
label:nth-child(2) { margin-left: 0; }
|
||||
label:last-child { margin-right: 0; }
|
||||
|
||||
input:checked + label .tick {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
input#bw + label {
|
||||
background: #3d3d3d;
|
||||
.tick{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
input#gooey + label {
|
||||
background: linear-gradient(#7936dc, #bd8eff);
|
||||
.tick{
|
||||
background: linear-gradient(#7936dc, #bd8eff);
|
||||
}
|
||||
}
|
||||
input#flat + label {
|
||||
background: #3d3d3d;
|
||||
.tick{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
input#glass + label {
|
||||
background: #3d3d3d;
|
||||
.tick{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// not enough vertical space
|
||||
@media screen and (max-height: 615px){
|
||||
#banner {
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// not enough horizontal space
|
||||
@media screen and (max-width: 740px){
|
||||
#banner {
|
||||
font-size: 2vw;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.content {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// not enough vertical space
|
||||
@media screen and (max-height: 615px){
|
||||
#banner {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
// border-card overlaps with the text
|
||||
@media screen and (max-width: 1010px){
|
||||
.border-card {
|
||||
left: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div id='banner1'>
|
||||
|
||||
<div class='border-card'></div>
|
||||
|
||||
<div class='content'>
|
||||
<h3>Hello, I'm</h3>
|
||||
<h1 class='name'>
|
||||
{{ model.firstname.toUpperCase() }}
|
||||
{{ model.lastname.toUpperCase() }}
|
||||
</h1>
|
||||
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import BannerModel from '../model/banner';
|
||||
|
||||
@Component({})
|
||||
export default class Banner1 extends Vue {
|
||||
private model: any = BannerModel;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '../global.scss';
|
||||
|
||||
$banner-size: 100vh;
|
||||
$bg-color: #ededed;
|
||||
|
||||
// MEDIA QUERIES
|
||||
// optimize vertical space
|
||||
$mq-vert: 590px;
|
||||
|
||||
#banner1 {
|
||||
flex: #{$banner-size * 0.999} 0 0;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
color: #3d3d3d;
|
||||
font-size: 1rem;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
.border-card {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -20vw;
|
||||
left: 70vw;
|
||||
width: 60vw;
|
||||
height: 60vw;
|
||||
|
||||
background: linear-gradient(45deg, #1a1a1a, #292929);
|
||||
|
||||
border-radius: 3rem;
|
||||
|
||||
transform: rotate(35deg);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: auto 0 1;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex-flow: column nowrap;
|
||||
|
||||
margin: 0 10rem;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// not enough vertical space
|
||||
@media screen and (max-height: 615px){
|
||||
#banner1 {
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// not enough horizontal space
|
||||
@media screen and (max-width: 740px){
|
||||
#banner1 {
|
||||
font-size: 2vw;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.content {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// not enough vertical space
|
||||
@media screen and (max-height: 615px){
|
||||
#banner1 {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
// border-card overlaps with the text
|
||||
@media screen and (max-width: 1010px){
|
||||
.border-card {
|
||||
left: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div id='experiences'>
|
||||
<div class='experience' v-for='(experience, si) of experiences' :key='si'>
|
||||
<h2>{{ experience.title.toUpperCase() }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import ExperiencesModel from '../model/experiences';
|
||||
|
||||
@Component
|
||||
export default class Experiences extends Vue {
|
||||
private experiences = ExperiencesModel;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
@import '../global';
|
||||
|
||||
$timeline-width: .25rem;
|
||||
$timeline-dot-size: 1rem;
|
||||
$timeline-spacing: 1rem;
|
||||
|
||||
#experiences {
|
||||
flex: auto 0 1;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 5%;
|
||||
|
||||
margin-top: 3em;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
// timeline
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $timeline-width;
|
||||
height: 100%;
|
||||
|
||||
border-radius: #{$timeline-width} / #{$timeline-width};
|
||||
|
||||
background: #07142d;
|
||||
}
|
||||
|
||||
.experience {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
margin-left: $timeline-spacing;
|
||||
|
||||
border: 1px solid red;
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
font-weight: normal;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: calc( 1em - #{$timeline-dot-size});
|
||||
left: calc( #{-$timeline-spacing} - #{$timeline-dot-size} / 2 + #{$timeline-width} / 5 );
|
||||
width: $timeline-dot-size;
|
||||
height: $timeline-dot-size;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
border: 2px solid white;
|
||||
|
||||
background: #07142d;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<div id='home'>
|
||||
|
||||
<div class='wave'></div>
|
||||
<div class='wave w2'></div>
|
||||
|
||||
<div id='banner-container'>
|
||||
<Banner1 v-if='theme == `black_white`' />
|
||||
<Banner2 v-if='theme == `blue`' />
|
||||
<Banner2 v-if='theme == `orange`' />
|
||||
</div>
|
||||
|
||||
<form class='themes' @change="onThemeSelected" ref='theme_form'>
|
||||
<h2>THEMES</h2>
|
||||
|
||||
<template v-for='t in themes'>
|
||||
<input :key='`${t.name}-input`' type='radio' name='theme' :id='t.name' :value='t.name' :checked='t.default'/>
|
||||
<label :key='`${t.name}-label`' :for='t.name'>
|
||||
<svg width="16" height="16" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id='blue-gradient'>
|
||||
<stop offset='0' style='stop-color: var(--color0); stop-opacity: 1'/>
|
||||
<stop offset='1' style='stop-color: var(--color1); stop-opacity: 1'/>
|
||||
</linearGradient>
|
||||
<linearGradient id='orange-gradient'>
|
||||
<stop offset='0' style='stop-color: var(--color0); stop-opacity: 1'/>
|
||||
<stop offset='1' style='stop-color: var(--color1); stop-opacity: 1'/>
|
||||
</linearGradient>
|
||||
<linearGradient id='green-gradient'>
|
||||
<stop offset='0' style='stop-color: var(--color0); stop-opacity: 1'/>
|
||||
<stop offset='1' style='stop-color: var(--color1); stop-opacity: 1'/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-157.14 -77.615)">
|
||||
<g transform="matrix(0 -.11388 -.11388 0 185.25 96.78)" stroke="#1a1a1a" stroke-width="11.855">
|
||||
<path d="m168.29 228.24c0 10.195-8.3886 18.587-18.585 18.587s-18.59-8.3921-18.59-18.587c0-10.195 8.3931-18.587 18.59-18.587s18.585 8.3921 18.585 18.587zm-5.9273 0c0-6.9441-5.7129-12.661-12.658-12.661s-12.662 5.7168-12.662 12.661c0 6.9441 5.7175 12.661 12.662 12.661s12.658-5.7168 12.658-12.661z" color="#000000" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
|
||||
<circle cx="149.71" cy="228.24" r="6.4803" fill="#1a1a1a" stroke="none" style="paint-order:stroke fill markers"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</label>
|
||||
</template>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { Themes, Theme } from '@/model/themes';
|
||||
import Banner1 from '@/components/Banner1.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Banner1,
|
||||
},
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
private themes: Theme[] = Themes;
|
||||
private theme: string = Themes[0].name;
|
||||
|
||||
private onThemeSelected() {
|
||||
const fd = new FormData(this.$refs.theme_form as HTMLFormElement);
|
||||
console.log(fd);
|
||||
this.theme = fd.get('theme') as string;
|
||||
console.log(this.theme);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
$width: 100vw;
|
||||
$height: 100vh;
|
||||
|
||||
$wave-height: 6.3rem;
|
||||
|
||||
// horizontal spacing between theme chips
|
||||
$theme-chip-spacing: 1rem;
|
||||
// full size of a theme chip
|
||||
$theme-chip-size: 1.8rem;
|
||||
// empty space inside the chip (relative to the chip size)
|
||||
$theme-chip-void: 1.2rem;
|
||||
// size of the inner (checked) circle (relative to the chip void)
|
||||
$theme-chip-inner: .6rem;
|
||||
|
||||
|
||||
|
||||
#home {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
@keyframes wave-x {
|
||||
from{ background-position-x: 1px; }
|
||||
to{ background-position-x: 100vw; }
|
||||
}
|
||||
|
||||
.wave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc( #{$height*1.001} - #{$wave-height} );
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: $wave-height;
|
||||
|
||||
background-image: url('../assets/wave.invert.1.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position-y: 101%;
|
||||
background-size: auto 100%;
|
||||
|
||||
animation: 18s ease-in-out wave-x infinite alternate;
|
||||
|
||||
&.w2{
|
||||
background-image: url('../assets/wave.invert.2.svg');
|
||||
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||
}
|
||||
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.themes {
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: calc( #{$height} - #{$wave-height} );
|
||||
width: $width;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transform: translateY(-100%);
|
||||
|
||||
input[type=radio]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
flex: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
& > label {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: $theme-chip-size;
|
||||
height: $theme-chip-size;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 #{$theme-chip-spacing};
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: transform .2s ease-in;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg circle {
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
label:nth-child(2) { margin-left: 0; }
|
||||
label:last-child { margin-right: 0; }
|
||||
|
||||
input:checked + label svg circle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// define our custom svg gradients
|
||||
#blue-gradient {
|
||||
--color0: #3d4ba3;
|
||||
--color1: #5768f8;
|
||||
}
|
||||
#orange-gradient {
|
||||
--color0: #fcb67b;
|
||||
--color1: #c54556;
|
||||
}
|
||||
#green-gradient {
|
||||
--color0: #00d89f;
|
||||
--color1: #00a2d8;
|
||||
}
|
||||
|
||||
input[value='black_white'] + label {
|
||||
circle, path{ fill: #1a1a1a; }
|
||||
}
|
||||
input[value='blue'] + label {
|
||||
circle, path{ fill: url(#blue-gradient); }
|
||||
}
|
||||
input[value='forest'] + label {
|
||||
circle, path{ fill: url(#orange-gradient); }
|
||||
}
|
||||
input[value='glass'] + label {
|
||||
circle, path{ fill: url(#green-gradient); }
|
||||
}
|
||||
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#banner-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
|
||||
<div class='stack'>
|
||||
<template v-for='(skill,i) of skillset.skills'>
|
||||
<a class='label' :key='i' :href='skill.link' v-html='skill.label'></a>
|
||||
<span class='level' :key='i'>
|
||||
<a class='label' :key='`${i}-link`' :href='skill.link' v-html='skill.label'></a>
|
||||
<span class='level' :key='`${i}-span`'>
|
||||
<span :style='{ width: (skill.level*100)+"%" }'></span>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
export default [
|
||||
{
|
||||
title: 'LogAuth',
|
||||
link: `https://git.xdrm.io/logauth`,
|
||||
when: [ '2014', '2018' ],
|
||||
description: `Système de régulation évolutif pour système embarqués avec plateforme de gestion`,
|
||||
tags: [ `php`, `js`, `python`, `raspberry`, `rest`, `electronics`, `systemd`, `linux` ],
|
||||
},
|
||||
{
|
||||
title: 'LogAuth 2',
|
||||
link: `https://git.xdrm.io/logauth`,
|
||||
when: [ '2015', '2018' ],
|
||||
description: `Système de régulation évolutif pour système embarqués avec plateforme de gestion`,
|
||||
tags: [ `php`, `js`, `python`, `raspberry`, `rest`, `electronics`, `systemd`, `linux` ],
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
export interface Theme {
|
||||
name: string;
|
||||
default: boolean;
|
||||
}
|
||||
|
||||
export const Themes: Theme[] = [
|
||||
{
|
||||
name: 'black_white',
|
||||
default: true,
|
||||
}, {
|
||||
name: 'blue',
|
||||
default: false,
|
||||
}, {
|
||||
name: 'forest',
|
||||
default: false,
|
||||
}, {
|
||||
name: 'glass',
|
||||
default: false,
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue