Compare commits
2 Commits
d136b9d1e2
...
d154d27c37
| Author | SHA1 | Date |
|---|---|---|
 Adrien Marquès
|
d154d27c37
|
|
|
Adrien Marquès
|
0b3c4654ba
|
|
|
@ -1,13 +1,72 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
<defs>
|
width="420mm"
|
||||||
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse">
|
height="20.822mm"
|
||||||
<stop stop-color="#fff" stop-opacity=".97647" offset="0"/>
|
version="1.1"
|
||||||
<stop stop-color="#fff" stop-opacity=".89804" offset=".59203"/>
|
viewBox="0 0 420 20.822"
|
||||||
<stop stop-color="#fff" offset="1"/>
|
id="svg4984"
|
||||||
</linearGradient>
|
sodipodi:docname="wave.invert.1.svg"
|
||||||
</defs>
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
<g transform="translate(-.83328 -158.95)">
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z" fill="url(#a)" stroke-width=".56894"/>
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
</g>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview4986"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.79815972"
|
||||||
|
inkscape:cx="793.70079"
|
||||||
|
inkscape:cy="38.839344"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1006"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="42"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg4984" />
|
||||||
|
<defs
|
||||||
|
id="defs4978">
|
||||||
|
<linearGradient
|
||||||
|
id="a"
|
||||||
|
x1="787.57"
|
||||||
|
x2="787.57"
|
||||||
|
y1="4.8222"
|
||||||
|
y2="78.695"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".97647"
|
||||||
|
offset="0"
|
||||||
|
id="stop4971"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.98000002;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".89804"
|
||||||
|
offset="0.59202999"
|
||||||
|
id="stop4973"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.89999998;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
offset="1"
|
||||||
|
id="stop4975"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:1;" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
transform="translate(-.83328 -158.95)"
|
||||||
|
id="g4982">
|
||||||
|
<path
|
||||||
|
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
||||||
|
d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z"
|
||||||
|
fill="url(#a)"
|
||||||
|
stroke-width=".56894"
|
||||||
|
id="path4980" />
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 869 B After Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,13 +1,73 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
|
<svg
|
||||||
<defs>
|
width="420mm"
|
||||||
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
|
height="20.822mm"
|
||||||
<stop stop-color="#fff" stop-opacity=".25098" offset="0"/>
|
version="1.1"
|
||||||
<stop stop-color="#fff" stop-opacity=".14902" offset=".22879"/>
|
viewBox="0 0 420 20.822"
|
||||||
<stop stop-color="#fff" stop-opacity=".05098" offset="1"/>
|
id="svg7400"
|
||||||
</linearGradient>
|
sodipodi:docname="wave.invert.2.svg"
|
||||||
</defs>
|
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||||
<g transform="translate(-.83328 -158.95)">
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z" fill="url(#a)" stroke-width=".56894"/>
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
</g>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7402"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#eeeeee"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.86745536"
|
||||||
|
inkscape:cx="659.97633"
|
||||||
|
inkscape:cy="39.195101"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1006"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="42"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg7400" />
|
||||||
|
<defs
|
||||||
|
id="defs7394">
|
||||||
|
<linearGradient
|
||||||
|
id="a"
|
||||||
|
x1="775"
|
||||||
|
x2="775"
|
||||||
|
y1="78.695"
|
||||||
|
y2="-.00018898"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".25098"
|
||||||
|
offset="0"
|
||||||
|
id="stop7387"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.25;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".14902"
|
||||||
|
offset="0.22879"
|
||||||
|
id="stop7389"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.15000001;" />
|
||||||
|
<stop
|
||||||
|
stop-color="#fff"
|
||||||
|
stop-opacity=".05098"
|
||||||
|
offset="1"
|
||||||
|
id="stop7391"
|
||||||
|
style="stop-color:#745cfc;stop-opacity:0.05;" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
transform="translate(-.83328 -158.95)"
|
||||||
|
id="g7398">
|
||||||
|
<path
|
||||||
|
transform="matrix(.26458 0 0 .26458 .83328 158.95)"
|
||||||
|
d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z"
|
||||||
|
fill="url(#a)"
|
||||||
|
stroke-width=".56894"
|
||||||
|
id="path7396" />
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 1019 B After Width: | Height: | Size: 2.4 KiB |
|
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button v-show='this.sel != null'>Browse projects</button>
|
<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -135,6 +135,10 @@
|
||||||
this.sel = null;
|
this.sel = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected browse(){
|
||||||
|
document.querySelector("#timeline")!.scrollIntoView();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -143,6 +147,7 @@
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
$page-margin: 3rem;
|
$page-margin: 3rem;
|
||||||
|
$bottom-space: 10vh;
|
||||||
|
|
||||||
#skill-picker {
|
#skill-picker {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -150,9 +155,9 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: #{100vh + $bottom-space};
|
||||||
|
|
||||||
background: linear-gradient(45deg, #564ba4, #745cfc);
|
background: linear-gradient(0, #564ba4, #745cfc);
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -205,10 +210,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
input {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc( 100% - #{$page-margin} );
|
top: calc( 100% - #{$bottom-space} - #{$page-margin} );
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
||||||
padding: .6em 2em;
|
padding: .6em 2em;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div id='timeline'>
|
<div id='timeline'>
|
||||||
|
|
||||||
|
<div id='search-header' ref='header'>
|
||||||
|
</div>
|
||||||
|
|
||||||
<template class='project' v-for='(proj) of projects'>
|
<template class='project' v-for='(proj) of projects'>
|
||||||
<div :key="'start-'+proj.name" class='start'>
|
<div :key="'start-'+proj.name" class='start'>
|
||||||
{{ proj.started_at | short_date }}
|
{{ proj.started_at | short_date }}
|
||||||
|
|
@ -112,6 +115,32 @@
|
||||||
export default class Timeline extends Vue {
|
export default class Timeline extends Vue {
|
||||||
private projects: Project[] = Projects;
|
private projects: Project[] = Projects;
|
||||||
private skills: tSkills = Skills;
|
private skills: tSkills = Skills;
|
||||||
|
|
||||||
|
private mounted() {
|
||||||
|
|
||||||
|
document.body.addEventListener('scroll', this.onScroll, { passive: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
private onScroll(e: Event) {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
const header = this.$refs.header as HTMLElement;
|
||||||
|
if( target == undefined || header == undefined ){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const el = this.$el as HTMLElement;
|
||||||
|
if( el == null ){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// when scrolling after this limit, make the header fixed
|
||||||
|
const limit = el.offsetTop;
|
||||||
|
|
||||||
|
if( target.scrollTop >= limit ){
|
||||||
|
header.classList.add('fixed');
|
||||||
|
} else {
|
||||||
|
header.classList.remove('fixed');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -122,6 +151,25 @@
|
||||||
$icon-width: 2.3rem;
|
$icon-width: 2.3rem;
|
||||||
$space-width: 1rem;
|
$space-width: 1rem;
|
||||||
$bg-color: #202228;
|
$bg-color: #202228;
|
||||||
|
$header-height: 6rem;
|
||||||
|
|
||||||
|
#search-header {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: $header-height;
|
||||||
|
|
||||||
|
background: #564ba4;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
z-index: 500;
|
||||||
|
|
||||||
|
&.fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#timeline {
|
#timeline {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -139,7 +187,7 @@
|
||||||
|
|
||||||
padding: 0 5rem;
|
padding: 0 5rem;
|
||||||
|
|
||||||
padding-top: 2em;
|
padding-top: #{$header-height + 2rem};
|
||||||
|
|
||||||
.start { grid-column: 1 / 2; }
|
.start { grid-column: 1 / 2; }
|
||||||
.name { grid-column: 3 / 6; }
|
.name { grid-column: 3 / 6; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue