feat: custom timeline icons

This commit is contained in:
Bart van der Braak 2023-11-21 03:30:46 +01:00
parent 78ca31132b
commit 5c8ec9d909
12 changed files with 425 additions and 17 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 25 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 22 KiB

View file

@ -0,0 +1,94 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg:svg
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 1000 1000"
xml:space="preserve"
sodipodi:docname="linuxfoundation.svg"
width="1000"
height="1000"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:svg="http://www.w3.org/2000/svg"><svg:defs
id="defs20" /><sodipodi:namedview
id="namedview20"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1"
inkscape:export-bgcolor="#ffffffff" />&#10;<svg:style
type="text/css"
id="style1">&#10; .st0{fill:#003778;}&#10; .st1{fill:#003764;}&#10; .st2{fill:#0094FF;}&#10;</svg:style>&#10;<svg:g
id="g20"
transform="matrix(0.84026685,0,0,0.84026685,79.866575,361.81812)">&#10; <svg:g
id="g3">&#10; <svg:path
class="st0"
d="m 384.2,1.2 h 57.7 V 7.1 H 416.5 V 74 h -6.9 V 7.2 h -25.4 z"
id="path1" />&#10; <svg:path
class="st0"
d="m 448.7,1.2 h 6.9 v 31.6 h 43.2 V 1.2 h 6.9 V 74 h -6.9 V 38.8 H 455.6 V 74 h -6.9 z"
id="path2" />&#10; <svg:path
class="st0"
d="m 520.5,1.2 h 50.3 V 7.1 H 527.5 V 33.4 H 568 v 5.9 H 527.4 V 68 h 43.8 v 6 h -50.8 z"
id="path3" />&#10; </svg:g>&#10; <svg:g
id="g13">&#10; <svg:path
class="st0"
d="m 384.2,254.6 h 46.2 v 5.9 h -39.2 v 26.3 H 426 v 5.9 h -34.9 v 34.7 h -6.9 z"
id="path4" />&#10; <svg:path
class="st0"
d="m 469.4,253.1 c 22.8,0 34.2,17.9 34.2,37.9 0,20 -11.4,37.9 -34.2,37.9 -22.9,0 -34.4,-17.9 -34.4,-37.9 0,-20 11.4,-37.9 34.4,-37.9 z m 0,69.9 c 19.2,0 27.3,-16.1 27.3,-32 0,-15.9 -8.2,-32 -27.3,-32 -19.3,0 -27.4,16.1 -27.4,32 0,15.9 8.1,32 27.4,32 z"
id="path5" />&#10; <svg:path
class="st0"
d="m 513.7,254.6 h 6.9 v 45.1 c 0,16.8 7.8,23.3 21.3,23.3 13.6,0 21.4,-6.5 21.4,-23.3 v -45.1 h 6.9 v 46.6 c 0,15 -8.1,27.7 -28.3,27.7 -20.1,0 -28.2,-12.7 -28.2,-27.7 z"
id="path6" />&#10; <svg:path
class="st0"
d="m 584.2,254.6 h 7.7 l 42.4,61.6 h 0.2 v -61.6 h 6.9 v 72.8 h -7.7 l -42.4,-61.6 h -0.2 v 61.6 h -6.9 z"
id="path7" />&#10; <svg:path
class="st0"
d="m 656.1,254.6 h 25.2 c 22,0.5 33.4,12.3 33.4,36.4 0,24.1 -11.4,35.9 -33.4,36.4 h -25.2 z m 6.9,66.9 h 14.8 c 20.9,0 30,-8.7 30,-30.5 0,-21.8 -9.1,-30.5 -30,-30.5 H 663 Z"
id="path8" />&#10; <svg:path
class="st0"
d="m 747.2,254.6 h 7.7 l 28.5,72.8 H 776 l -8.9,-22.6 H 734 l -8.8,22.6 h -7.4 z m -11,44.3 h 28.6 l -14.1,-37.3 z"
id="path9" />&#10; <svg:path
class="st0"
d="M 775.3,254.6 H 833 v 5.9 h -25.4 v 66.9 h -6.9 v -66.9 h -25.4 z"
id="path10" />&#10; <svg:path
class="st0"
d="m 840.4,254.6 h 6.9 v 72.8 h -6.9 z"
id="path11" />&#10; <svg:path
class="st0"
d="m 893,253.1 c 22.8,0 34.2,17.9 34.2,37.9 0,20 -11.4,37.9 -34.2,37.9 -22.9,0 -34.4,-17.9 -34.4,-37.9 0,-20 11.4,-37.9 34.4,-37.9 z m 0,69.9 c 19.2,0 27.3,-16.1 27.3,-32 0,-15.9 -8.2,-32 -27.3,-32 -19.3,0 -27.4,16.1 -27.4,32 0,15.9 8.1,32 27.4,32 z"
id="path12" />&#10; <svg:path
class="st1"
d="m 937.9,254.6 h 7.7 l 42.4,61.6 h 0.2 v -61.6 h 6.9 v 72.8 h -7.7 L 945,265.8 h -0.2 v 61.6 h -6.9 z"
id="path13" />&#10; </svg:g>&#10; <svg:g
id="g18">&#10; <svg:path
class="st0"
d="m 384.2,95.7 h 40.1 v 96.8 h 57.6 v 33.4 h -97.8 z"
id="path14" />&#10; <svg:path
class="st0"
d="m 508.2,95.7 h 40.1 v 130.2 h -40.1 z"
id="path15" />&#10; <svg:path
class="st0"
d="m 578.2,95.7 h 41 l 37.9,69.7 h 0.4 V 95.7 h 37.9 v 130.2 h -39 l -39.9,-71.1 h -0.4 v 71.1 h -37.9 z"
id="path16" />&#10; <svg:path
class="st0"
d="m 843.7,175.6 c 0,36.3 -19.1,53.4 -59.3,53.4 -40.1,0 -59.5,-17.1 -59.5,-53.4 V 95.7 H 765 v 70.9 c 0,13.1 -0.2,29.9 19.5,29.9 19,0 19,-16.8 19,-29.9 V 95.7 h 40.1 v 79.9 z"
id="path17" />&#10; <svg:path
class="st0"
d="M 907.5,156.6 864.6,95.7 h 47.1 l 19.7,35.4 19.3,-35.4 h 44.5 l -41.7,61.3 46.5,68.9 h -48.3 l -22.2,-38.8 -23,38.8 h -46 z"
id="path18" />&#10; </svg:g>&#10; <svg:g
id="g19">&#10; <svg:polygon
class="st2"
points="0,327.4 196.5,327.4 196.5,261.9 65.6,261.9 65.6,131 0,131 "
id="polygon18" />&#10; <svg:polygon
class="st0"
points="327.3,327.4 327.3,0 0,0 0,98.2 65.5,98.2 65.5,65.8 261.9,65.8 261.9,261.9 229.2,261.9 229.2,327.4 "
id="polygon19" />&#10; </svg:g>&#10;</svg:g>&#10;<script /></svg:svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path fill="#f3f3f3" d="M0 0h23v23H0z"/><path fill="#f35325" d="M1 1h10v10H1z"/><path fill="#81bc06" d="M12 1h10v10H12z"/><path fill="#05a6f0" d="M1 12h10v10H1z"/><path fill="#ffba08" d="M12 12h10v10H12z"/><script xmlns=""/></svg>

After

Width:  |  Height:  |  Size: 290 B

View file

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 250 250"
aria-labelledby="triple-logo"
class="navbar__logo logo"
version="1.1"
id="svg3"
sodipodi:docname="triple.svg"
width="250"
height="250"
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"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs3" />
<sodipodi:namedview
id="namedview3"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#d1d1d1"
inkscape:export-bgcolor="#ffffffff" />
<title
id="triple-logo">Triple Logo</title>
<g
id="g3"
transform="matrix(0.84137882,0,0,0.84137882,27.26152,82.405441)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="m 73.7883,58.1616 4.0599,5.9824 c 0.2003,0.2931 0.5265,0.45 0.8548,0.45 0.2002,0 0.4005,-0.0557 0.578,-0.1775 0.4707,-0.318 0.5967,-0.958 0.2725,-1.4307 l -4.0823,-6.0155 -0.0488,0.0346 z M 103.215,37.3373 v 26.2245 c 0,0.5739 0.462,1.0322 1.032,1.0322 0.572,0 1.03,-0.4583 1.03,-1.0322 V 36.368 c 0,-0.1516 -0.032,-0.2957 -0.091,-0.4255 z M 231.031,62.5274 H 213.929 V 50.9909 h 12.69 c 0.57,0 1.031,-0.4583 1.031,-1.0322 0,-0.5636 -0.461,-1.0282 -1.031,-1.0282 h -12.69 V 37.394 h 17.102 c 0.568,0 1.03,-0.4583 1.03,-1.0322 0,-0.5678 -0.462,-1.0261 -1.03,-1.0261 h -18.135 c -0.569,0 -1.03,0.4583 -1.03,1.0261 v 27.1979 c 0,0.5698 0.461,1.0323 1.03,1.0323 h 18.135 c 0.568,0 1.03,-0.4625 1.03,-1.0323 0,-0.5677 -0.462,-1.0323 -1.03,-1.0323 z m -40.718,0.0021 H 175.308 V 36.3638 c 0,-0.5677 -0.463,-1.026 -1.034,-1.026 -0.57,0 -1.031,0.4583 -1.031,1.026 v 27.198 c 0,0.5698 0.461,1.0322 1.031,1.0322 h 16.039 c 0.572,0 1.032,-0.4624 1.032,-1.0322 0,-0.5678 -0.46,-1.0323 -1.032,-1.0323 z M 143.63,35.3378 h -12.753 c -0.571,0 -1.032,0.4624 -1.032,1.0302 v 27.1938 c 0,0.5739 0.461,1.0322 1.032,1.0322 0.568,0 1.031,-0.4583 1.031,-1.0322 V 53.0616 h 11.722 c 4.889,0 8.865,-3.9742 8.865,-8.8629 0,-4.8867 -3.976,-8.8609 -8.865,-8.8609 z m 0,15.6593 H 131.908 V 37.4002 h 11.722 c 3.753,0 6.8,3.0493 6.8,6.7985 0,3.7512 -3.047,6.7984 -6.8,6.7984 z"
fill="#0e0940"
class="logo__text"
id="path1" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="m 66.8258,63.0902 -2.2152,1.5679 h -10.43 v -2.3742 l 3.4209,-0.929 V 38.4904 L 54.1806,37.613 v -2.3742 h 15.4323 c 5.9354,0 9.0322,2.8903 9.0322,8.0516 0,5.6774 -6.9677,7.7419 -6.9677,7.7419 l 3.7366,5.9786 -3.9142,2.7708 -0.4317,0.3056 -4.2423,-8.2808 h -3.871 v 9.5484 l 3.871,0.929 z m 39.2162,-27.7534 -4.744,3.3572 v -0.183 l -4.0722,-0.7948 v -2.3794 h 7.2262 z M 67.2903,48.4517 H 63.1612 V 38.1291 h 3.6129 c 3.7492,0 6.1936,1.4121 6.1936,5.1613 0,3.7512 -1.9283,5.1613 -5.6774,5.1613 z m -55.742,-3.9536 v -9.1602 l 25.4091,-0.0011 v 9.1613 h -2.6013 l -1.2955,-6.1058 h -6.1729 v 22.9213 l 4.3045,0.9755 v 2.3639 h -6.7406 -7.1381 v -2.3639 l 4.2994,-0.9755 V 38.3923 h -6.2091 l -1.2748,6.1058 z"
fill="#0e0940"
class="logo__text"
id="path2" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M 18.7432,97.1164 2.35918,3.2738 108.944,32.9615 l 0.326,0.0909 -33.8476,23.9525 -3.9226,2.7768 -8.5925,6.082 z M 118.998,31.1283 2.11144,0.333934 C 0.949115,-0.0686463 0.127437,0.600257 0.288469,1.82245 L 17.1576,99.7383 c 0.1611,1.2227 1.1252,1.6577 2.1471,0.9637 l 55.4405,-37.487 1.7095,-1.1562 26.7623,-18.0954 2.062,-1.3957 13.979,-9.4513 c 1.022,-0.6896 0.902,-1.5835 -0.26,-1.9881 z"
fill="#ff4f68"
id="path3" />
</g>
<metadata
id="metadata3">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>Triple Logo</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

After

Width:  |  Height:  |  Size: 4 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#555555;}
</style>
<polygon class="st0" points="292.5,52.8 434.7,134.9 434.7,348.1 265,446.1 265,10.6 235,25 235,446.1 65.3,348.2 65.3,106.3
36.4,120.1 35.3,365.6 250,489.4 464.7,365.5 464.7,117.5 292.5,18.1 "/>
</svg>

After

Width:  |  Height:  |  Size: 605 B

View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#0080C9;}
</style>
<rect class="st0" width="400" height="400"/>
<circle class="st0" cx="200" cy="200" r="200"/>
<g>
<g>
<polygon points="70.2,252.8 31.5,148.3 54.7,148.3 84.7,229.2 113.8,148.3 129.4,148.3 91.9,252.8 "/>
<path d="M142,148.3h21.8v64.1c0,11.6,2,19.3,5.9,23c3.9,3.8,9,5.7,15.3,5.7c6.2,0,11.1-1.9,14.7-5.6c3.7-3.7,5.5-10.9,5.5-21.6 v-65.7h18.9v64.2c0,12.1-1.5,20.8-4.6,26c-3,5.3-7.4,9.4-13.2,12.4c-5.7,3-13,4.5-21.8,4.5c-8.7,0-16.1-1.4-22.3-4.2 c-6.2-2.8-11.1-7-14.8-12.5c-3.6-5.5-5.4-14.4-5.4-26.4V148.3z"/>
<path class="st1" d="M253.9,227.3v2.8l0.8-0.7c-0.2-0.8-0.4-1.5-0.5-2.3L253.9,227.3z"/>
<path class="st1" d="M267.9,196.5c0-0.5,0.4-0.9,0.8-0.9c0.5,0,0.8,0.5,0.8,0.9c0,0.5-0.3,0.8-0.8,0.8 C268.2,197.3,267.9,196.9,267.9,196.5"/>
<path class="st1" d="M319.4,221.9c-1.3-3.5-4.6-5.8-9.2-5.4c-2.5-4.8-6.6-2.5-7.7-1.1c1.3,1.1,2.3,1.6,3.8,1.8v1 c-2.9-0.1-3.8-1.3-5.8-3.3c-0.8,6.9,7.3,9.4,9.8,3.7c3.8-0.1,6.1,1.6,6.9,4c0.8,2.4,0,5.1-1.3,6.4c-2.3,2.8-6,2.8-9.3,1 c-2.1-1-4.3-3.2-6.2-5.3c-2.9-3.2-4.5-4.6-6.7-5.8c-1.2-0.6-2.4-0.9-3.6-1c-0.7-0.1-1.4-0.2-2.1-0.2c-0.7,0-1.3,0.1-1.8,0.2 c-4.9,0.5-9.9,3-15.9,3.5h-3.2c-2,1.7-3.8,3.3-5.3,4.7l-3.8,3.3c0,0,0,0,0,0.1c-1.6,1.5-2.6,2.3-2.6,2.3c0.5,3.6,0.6,5.3,0.6,8.5 c0,2.7-0.1,3.9-0.1,5.1c-0.1,1.1-0.4,2.1-0.7,3c-0.2,0.8-0.9,1.5-2.1,1.6c-1,0.2-3.5-1.6-4.3-0.5c-0.7,0.9,0.1,3.1,0.8,3.7h6.8 c0.8-1.7,1.2-2.8,1.6-3.8c0.6-0.8,1-2.1,1.5-2.9c0.5-0.8,0.9-2,1.2-2.8c0.1-0.8,0.5-1.6,0.6-2.2c0.5-1.3,1.1-2.4,1.6-3.1 c0.1-0.2,0.2-0.4,0.4-0.6c0.3,0.4,0.6,0.9,0.8,1.3c1.6,2.5,3,4.5,5.3,5.4c0.9,0.5,1.5,0.8,1.8,1.2c0.4,0.3,0.4,1.4,0.2,2.1 c0,0.9-0.4,1.7-1.3,2.1c-1.5,0.6-3.9-1.6-4.8-0.5c-0.8,0.9,0.1,2.6,0.9,3.8h6.2c1.5-2.4,2.1-5.8,2.1-8.5c0-2.9,0-3.6-1.7-4.3 c-0.6-0.4-1.2-1.7-1.6-3.2c0-0.2,0-0.5,0-0.8c3-1,6.3-2.7,9.8-5.4c0,0.5,0,1,0.1,1.4c0.6,3.9,1,7.5,4,10.4 c0.8,0.8,1.5,1.6,1.6,2.1c0,0.3-0.5,1.6-0.8,2.2c-0.7,1.5-2.2,2.8-3.3,2.9c-1.5,0.2-3.2-1.7-4.4-0.6c-1,1,0.4,3.2,1,3.8h6.3 c2.1-3.8,5-7,6-9.1c0.6-1.5,0.6-2.1-0.6-2.5c-2.1-1.2-1.8-3.7-1.3-6.6c0.2-0.5,0.4-1,0.7-1.4c1.6,4.4,3.6,8.5,8.4,9.7 c0.8,0.1,2,0.7,2.1,0.9c0,0.2,0,1.1-0.1,1.8c-0.2,1.4-1,3-2.1,3.8c-1.2,0.9-4-2.1-5-0.4c-0.7,1.4,0.5,3.2,1,3.7h6.1 c1.7-3.8,3.2-7.2,3.7-9.6c0.5-2.9,0.5-3.9-1.7-4.4c-1.2-0.1-2.1-0.6-2.4-2.2c-0.8-2.9-0.7-7.7-2.9-11.1c2.4,2.9,5.1,5,7.4,6.1 c5.3,2.9,10.8,1.8,13.5-2C320.1,227.2,320.1,223.9,319.4,221.9"/>
<path class="st1" d="M291.7,189.8c13.7-13,32.5-26.9,56.3-32.8C328,164.2,300.4,183,291.7,189.8 M252.5,183.1 c2.2-23.5,12.9-40.8,20.2-48.8C262.2,149.8,256.2,171.2,252.5,183.1 M262.6,186.3c-0.1-0.9-0.6-1.5-1.4-2c1.6-3.9,3.2-7,6.3-11.2 C264.6,178.9,263.2,183.8,262.6,186.3 M372.4,148.7c-4.7-0.6-15.5,0.6-24.7,2.6c5.8-2.9,7.4-3.3,9.5-4.6c0.6-0.3,0.9-1.2,0.9-2.4 c0-1.4-1.3-1.6-2.8-1.4c-1.5,0.1-4.7,1.3-8.7,2.6c-7.8,3.2-19.1,8.5-32.5,17.5c-11.8,8.1-19.6,15-28.2,23.6 c-2.2,2.3-4.8,5.1-7.5,8.3c-0.6-1-1-1.3-2-1c3-6.8,3.3-7.2,5-11.1c0.7-1.9,0.3-3.2-0.3-4c-0.9-1.6-2.2-0.5-3,0.1 c-1.3,1.5-1.6,1.8-4.4,5.3c3.5-11.5,5.3-12.5,8.5-19c0.4-0.8,0.4-2.2-0.1-3.2c-0.3-0.8-0.8-1.3-1.5-0.9c-1.3,0.6-1.6,1.3-4,4.1 c3.5-6.6,8.2-14.3,8.7-15.6c0.6-1.4,1.4-1.6-0.1-3.7c-1.2-1.7-2.2-0.5-3,0.3c-0.7,0.3-2.1,2-4.5,4.9c5.1-9.5,9.8-13.8,10.7-15.5 c1.1-1.8,1.3-2.3,0.3-4.4c-0.8-1.9-2.4-1-3.2,0c-3.6,3.4-3.3,2.6-9.3,9.6c3.1-8.2,8.5-14.4,10.5-17.7c0.8-1.3,0.9-1.7,0.1-4.9 c-0.5-1.4-1.6-1.9-2.8-1.7c-1.7,0.4-3.3,1.3-6.6,4c-6.6,5.9-15.3,14.4-22.5,29.8c-6.9,14.4-8.4,28-8.4,37.4 c0,14.5,3.8,27.1,7.3,35c0-0.3,0-0.5,0-0.8c-0.2-3.9,0.5-8.4,1.2-10.6c1.5-5.8,3.4-8.9,5-11.4l-2.8-3.8l3.7,1.1l-2.2-4.8 c0,0,2.8,0.3,4.9,3.2c1.3-1.2,4.1-2.3,6.7-0.2c1.7-0.1,2.8,0.2,3.7,0.7c2,1.1,1.7,3.2,1.6,3.7c-1-0.9-3.9-2.8-7-0.4l5.8,2 l-7.3,0.6v7.5l-8.7,7.7v3l5.9-5.2v2.7l-10.4,9.4v2.8l13.2-11.8v0l3.3-3c0,0,0,0,0,0c2-1.6,2.8-2.4,3.9-3c1.4-0.9,1.6,0.1,1.8,1.6 c0.3,1.3,1.8,2.5,5-0.3c9.2-8.3,18.9-12.8,29.2-17.7c-5.6,3.8-15.8,9.4-19.3,13.3c-1.5,1.7,0,6,2.4,4.1c4.4-2.9,10.2-3.3,13-3.2 c1.4,0,2.9-0.9,3.7-2.1c0.8-1,0.8-2.2-1-2.3c9.5-2.9,11.9-3.7,19.7-4.4c2.1-0.1,3.3-1.3,3.7-3c0.4-1.6-0.5-2.1-2.4-2.3 c-2.3-0.3-6.3,0.4-10.4,1c9.1-3.9,20.2-6,29-8.5c2.8-0.8,3.1-1.6,3.2-3.2c0.3-1.7-1.1-1.7-4.2-1.7c-6.3,0.3-15.8,0.9-30.2,5.1 c13.6-6.8,21.2-10,33.6-13.1c3.3-0.9,3.9-1.7,4.2-3.5c0.6-2-1-2-2.2-1.7c-1.7,0.1-5.9,0-14.3,2.5c8.2-3.6,17.2-7.7,23.7-9.8 c1.4-0.5,2.2-1.4,2.2-2.9c0-1.1-0.3-1.3-1.7-1.3c-2.8,0-7.3,0.9-12.7,2.5c11.1-4.7,14.4-6.3,21.8-7.6c2.4-0.6,2.9-1.4,3-2.9 C375.4,148.7,374,148.8,372.4,148.7"/>
</g>
</g>
<script xmlns=""/></svg>

After

Width:  |  Height:  |  Size: 4.8 KiB

View file

@ -27,8 +27,8 @@
<div
class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent"
>
{#each timelineItems as item}
<TimelineItem title={item.title} description={item.description} date={item.date} />
{#each timelineItems as { title, logo, description, date }}
<TimelineItem {title} {logo} {description} {date} />
{/each}
</div>
</div>

View file

@ -1,5 +1,6 @@
<script lang="ts">
export let title: string;
export let logo: string;
export let description: string;
export let date: string;
</script>
@ -8,14 +9,9 @@
class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
>
<div
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2"
class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 gro up-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 overflow-hidden"
>
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
<path
fill-rule="nonzero"
d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z"
/>
</svg>
<img src={logo} alt="{title} logo" loading="lazy" />
</div>
<div

View file

@ -1,5 +1,14 @@
import linuxFoundationLogo from '$lib/assets/timeline/linuxfoundation.svg';
import microsoftLogo from '$lib/assets/timeline/microsoft.svg';
import tripleLogo from '$lib/assets/timeline/triple.svg';
import urbanDealLogo from '$lib/assets/timeline/urbandeal.svg';
import diastaseLogo from '$lib/assets/timeline/diastase.svg';
import vuLogo from '$lib/assets/timeline/vu.svg';
import bijlmerweideLogo from '$lib/assets/timeline/bijlmerweide.svg';
export interface TimelineItem {
title: string;
logo?: string;
link?: string;
image?: string;
description: string;
@ -9,48 +18,51 @@ export interface TimelineItem {
const timelineItems: TimelineItem[] = [
{
title: 'The Linux Foundation',
logo: linuxFoundationLogo,
description: 'Certified Kubernetes Administrator',
date: '2022'
},
{
title: 'Microsoft Certified',
logo: microsoftLogo,
description: 'Administrator Associate (AZ-104)',
date: '2021'
},
{
title: 'Triple',
logo: tripleLogo,
description: 'DevOps Engineer',
date: '2021'
},
{
title: 'Urban Deal',
logo: urbanDealLogo,
description: 'Full Stack Developer',
date: '2019'
},
{
title: 'Diastase Netwerk',
logo: diastaseLogo,
description: 'Volunteer Web Administrator',
date: '2019'
},
{
title: 'Vrije Universiteit Amsterdam',
logo: vuLogo,
description: 'Master Information Sciences',
date: '2018'
},
{
title: 'Vrije Universiteit Amsterdam',
description: 'Bachelor Information Sciences',
date: '2014'
},
{
title: 'Kinderboerderij Bijlmerweide',
logo: bijlmerweideLogo,
description: 'Volunteer Web Administrator',
date: '2016'
},
{
title: 'Zaanlands Lyceum',
description: 'Pre-university education (VWO)',
date: '2008'
title: 'Vrije Universiteit Amsterdam',
logo: vuLogo,
description: 'Bachelor Information Sciences',
date: '2014'
}
];