xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: xdrm-brackets:d154d27c37224d983541d72c249b59bafdd87f02
Branches Tags
xdrm-brackets:master
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
..
compare: xdrm-brackets:d136b9d1e27b29f2fa76a5cd40b426ea5eee5484
Branches Tags
xdrm-brackets:search-engine
xdrm-brackets:feature/yellow
xdrm-brackets:master

No commits in common. "d154d27c37224d983541d72c249b59bafdd87f02" and "d136b9d1e27b29f2fa76a5cd40b426ea5eee5484" have entirely different histories.
d154d27c37 ... d136b9d1e2

4 changed files with 30 additions and 202 deletions
Show Stats Expand all files Collapse all files

77
src/assets/wave.invert.1.svg
View File

@ -1,72 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8"?>
<svg <svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
width="420mm" <defs>
height="20.822mm" <linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse">
version="1.1" <stop stop-color="#fff" stop-opacity=".97647" offset="0"/>
viewBox="0 0 420 20.822" <stop stop-color="#fff" stop-opacity=".89804" offset=".59203"/>
id="svg4984" <stop stop-color="#fff" offset="1"/>
sodipodi:docname="wave.invert.1.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
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> </linearGradient>
</defs> </defs>
<g <g transform="translate(-.83328 -158.95)">
transform="translate(-.83328 -158.95)" <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="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> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 869 B

78
src/assets/wave.invert.2.svg
View File

@ -1,73 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8"?>
<svg <svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg">
width="420mm" <defs>
height="20.822mm" <linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
version="1.1" <stop stop-color="#fff" stop-opacity=".25098" offset="0"/>
viewBox="0 0 420 20.822" <stop stop-color="#fff" stop-opacity=".14902" offset=".22879"/>
id="svg7400" <stop stop-color="#fff" stop-opacity=".05098" offset="1"/>
sodipodi:docname="wave.invert.2.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
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> </linearGradient>
</defs> </defs>
<g <g transform="translate(-.83328 -158.95)">
transform="translate(-.83328 -158.95)" <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="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> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 1019 B

15
src/components/SkillPicker.vue
View File

@ -25,7 +25,7 @@
</div> </div>
<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/> <button v-show='this.sel != null'>Browse projects</button>
</div> </div>
</template> </template>
@ -135,10 +135,6 @@
this.sel = null; this.sel = null;
} }
} }
protected browse(){
document.querySelector("#timeline")!.scrollIntoView();
}
} }
</script> </script>
@ -147,7 +143,6 @@
<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;
@ -155,9 +150,9 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: #{100vh + $bottom-space}; height: 100vh;
background: linear-gradient(0, #564ba4, #745cfc); background: linear-gradient(45deg, #564ba4, #745cfc);
.container { .container {
display: flex; display: flex;
@ -210,10 +205,10 @@
} }
} }
input { button {
display: block; display: block;
position: absolute; position: absolute;
top: calc( 100% - #{$bottom-space} - #{$page-margin} ); top: calc( 100% - #{$page-margin} );
left: 50%; left: 50%;
padding: .6em 2em; padding: .6em 2em;

50
src/components/Timeline.vue
View File

@ -1,9 +1,6 @@
<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 }}
@ -115,32 +112,6 @@
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>
@ -151,25 +122,6 @@
$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;
@ -187,7 +139,7 @@
padding: 0 5rem; padding: 0 5rem;
padding-top: #{$header-height + 2rem}; padding-top: 2em;
.start { grid-column: 1 / 2; } .start { grid-column: 1 / 2; }
.name { grid-column: 3 / 6; } .name { grid-column: 3 / 6; }