metrics.additional.svg

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="574" class="">
    <defs>
        <style/>
    </defs>
    <style>@keyframes animation-gauge{0%{stroke-dasharray:0 329}}@keyframes animation-rainbow{0%,to{color:#7f00ff;fill:#7f00ff}14%{color:#a933ff;fill:#a933ff}29%{color:#007fff;fill:#007fff}43%{color:#00ff7f;fill:#00ff7f}57%{color:#ff0;fill:#ff0}71%{color:#ff7f00;fill:#ff7f00}86%{color:red;fill:red}}svg{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;color:#777}h2,h3{margin:8px 0 2px;padding:0;color:#0366d6;font-weight:400}h2 svg,h3 svg{fill:currentColor}h2{font-size:16px}h3,svg{font-size:14px}.h-details{margin:0 4px;padding-top:4px;font-size:.8rem}section&gt;.field{margin-left:5px;margin-right:5px}.field{display:flex;align-items:center;margin-bottom:2px;white-space:nowrap}.field.wrap,.row{flex-wrap:wrap}.field svg{margin:0 8px;fill:#959da5;flex-shrink:0}.row{display:flex}.horizontal .field,.row section{flex:1 1 0}.column{display:flex;flex-direction:column;align-items:center}.center{justify-content:center}.horizontal{justify-content:space-around}.horizontal-wrap{flex-wrap:wrap}.no-wrap{white-space:nowrap}#metrics-end,.fill-width{width:100%}.margin-bottom{margin-bottom:16px}svg.bar{margin:4px 0}.field.language{margin:0 8px;flex-grow:0}.chartist .ct-post{fill:rgba(127,127,127,.8)!important;color:rgba(127,127,127,.8)!important;font-size:9px;text-anchor:middle}.topics{display:flex;flex-wrap:wrap}.chart{padding:0 8px}.chart-bars{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin:8px 0 4px;flex-grow:1;min-height:70px}.chart-bars .entry{flex-grow:1;display:flex;flex-direction:column;align-items:center;font-size:10px;color:#666}.chart-bars .entry .value{font-size:6px}.chart-bars .bar{width:7px;background-color:var(--color-calendar-graph-day-bg);border:1px solid var(--color-calendar-graph-day-border);border-radius:5px}.chart-bars.horizontal{flex-direction:column;height:100%}.chart-bars.horizontal .entry{align-items:center;flex-direction:row;width:100%;min-height:1rem}.activity .field,.chart-bars.horizontal .entry .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-bars.horizontal .entry .name{flex-shrink:0;text-align:right;width:34%}.chart-bars .entry .bottom{margin-bottom:-1rem;line-height:1rem}.chart-bars.horizontal .bar{height:7px;width:auto;margin:0 6px}.activity{margin-bottom:12px}.activity .field{width:100%;max-width:450px;margin-bottom:0}:root{--color-calendar-graph-day-bg:#ebedf0;--color-calendar-graph-day-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-bg:#9be9a8;--color-calendar-graph-day-L2-bg:#40c463;--color-calendar-graph-day-L3-bg:#30a14e;--color-calendar-graph-day-L4-bg:#216e39;--color-calendar-halloween-graph-day-L1-bg:#ffee4a;--color-calendar-halloween-graph-day-L2-bg:#ffc501;--color-calendar-halloween-graph-day-L3-bg:#fe9600;--color-calendar-halloween-graph-day-L4-bg:#03001c;--color-calendar-graph-day-L4-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L3-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L2-border:rgba(27,31,35,0.06);--color-calendar-graph-day-L1-border:rgba(27,31,35,0.06)}</style>
    <style/>
    <foreignObject x="0" y="0" width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" class="items-wrapper">
            <section class="habits">
                <h2 class="field wrap">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 01-1.484.211c-.04-.282-.163-.547-.37-.847a8.695 8.695 0 00-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.75.75 0 01-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75zM6 15.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM5.75 12a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"/>
                    </svg>
                    Recent coding habits
                    <small class="h-details">(computed from last 185 commits)</small>
                </h2>
            </section>
            <section class="habits">
                <div class="column chart largeable">
                    <h3>Commit activity per hour of day</h3>
                    <div class="chart-bars">
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            00
                        </div>
                        <div class="entry">
                            <span class="value">1</span>
                            <div class="bar" style="height: 1.5625px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            01
                        </div>
                        <div class="entry">
                            <span class="value">1</span>
                            <div class="bar" style="height: 1.5625px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            02
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            03
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            04
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            05
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            06
                        </div>
                        <div class="entry">
                            <span class="value">6</span>
                            <div class="bar" style="height: 9.375px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            07
                        </div>
                        <div class="entry">
                            <span class="value">8</span>
                            <div class="bar" style="height: 12.5px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            08
                        </div>
                        <div class="entry">
                            <span class="value">32</span>
                            <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                            09
                        </div>
                        <div class="entry">
                            <span class="value">32</span>
                            <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                            10
                        </div>
                        <div class="entry">
                            <span class="value">16</span>
                            <div class="bar" style="height: 25px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            11
                        </div>
                        <div class="entry">
                            <span class="value">6</span>
                            <div class="bar" style="height: 9.375px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            12
                        </div>
                        <div class="entry">
                            <span class="value">6</span>
                            <div class="bar" style="height: 9.375px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            13
                        </div>
                        <div class="entry">
                            <span class="value">4</span>
                            <div class="bar" style="height: 6.25px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            14
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 3.125px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            15
                        </div>
                        <div class="entry">
                            <span class="value">14</span>
                            <div class="bar" style="height: 21.875px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            16
                        </div>
                        <div class="entry">
                            <span class="value">9</span>
                            <div class="bar" style="height: 14.0625px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            17
                        </div>
                        <div class="entry">
                            <span class="value">15</span>
                            <div class="bar" style="height: 23.4375px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                            18
                        </div>
                        <div class="entry">
                            <span class="value">2</span>
                            <div class="bar" style="height: 3.125px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            19
                        </div>
                        <div class="entry">
                            <span class="value">3</span>
                            <div class="bar" style="height: 4.6875px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            20
                        </div>
                        <div class="entry">
                            <span class="value">24</span>
                            <div class="bar" style="height: 37.5px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                            21
                        </div>
                        <div class="entry">
                            <span class="value">4</span>
                            <div class="bar" style="height: 6.25px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                            22
                        </div>
                        <div class="entry">
                            <span class="value"></span>
                            <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                            23
                        </div>
                    </div>
                </div>
                <div class="row largeable">
                    <section class="column chart">
                        <h3>Commit activity per day of week</h3>
                        <div class="chart-bars">
                            <div class="entry">
                                <span class="value">29</span>
                                <div class="bar" style="height: 21.641791044776117px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Sun
                            </div>
                            <div class="entry">
                                <span class="value">25</span>
                                <div class="bar" style="height: 18.65671641791045px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Mon
                            </div>
                            <div class="entry">
                                <span class="value">25</span>
                                <div class="bar" style="height: 18.65671641791045px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Tue
                            </div>
                            <div class="entry">
                                <span class="value">3</span>
                                <div class="bar" style="height: 2.2388059701492535px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Wed
                            </div>
                            <div class="entry">
                                <span class="value">5</span>
                                <div class="bar" style="height: 3.731343283582089px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                Thu
                            </div>
                            <div class="entry">
                                <span class="value">31</span>
                                <div class="bar" style="height: 23.134328358208954px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                Fri
                            </div>
                            <div class="entry">
                                <span class="value">67</span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                Sat
                            </div>
                        </div>
                    </section>
                    <section class="column chart">
                        <h3>Language activity</h3>
                        <div class="chart-bars horizontal">
                            <div class="entry">
                                <span class="name">JavaScript</span>
                                <div class="bar" style="width: 24.537288737880836%; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                <span class="value">31%</span>
                            </div>
                            <div class="entry">
                                <span class="name">Shell</span>
                                <div class="bar" style="width: 1.0210306486308949%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">1%</span>
                            </div>
                            <div class="entry">
                                <span class="name">HTML</span>
                                <div class="bar" style="width: 0.5984223370351729%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">1%</span>
                            </div>
                            <div class="entry">
                                <span class="name">CSS</span>
                                <div class="bar" style="width: 0.10976606331950423%; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                <span class="value">0%</span>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
            <section class="stargazers">
                <h2 class="field">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"/>
                    </svg>
                    Stargazers over the last two weeks
                </h2>
                <div class="row margin-bottom">
                    <section class="column chart chartist">
                        <h3>Total stargazers</h3>
                        <div class="chart-bars">
                            <div class="entry">
                                <span class="value">68</span>
                                <div class="bar" style="height: 2.5px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                29
                                <div class="bottom">Apr.</div>
                            </div>
                            <div class="entry">
                                <span class="value">70</span>
                                <div class="bar" style="height: 12px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                30
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 12px; background-color: var(--color-calendar-graph-day-L1-bg)"></div>
                                1
                                <div class="bottom">May</div>
                            </div>
                            <div class="entry">
                                <span class="value">71</span>
                                <div class="bar" style="height: 16.75px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                2
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 16.75px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                3
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 16.75px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                4
                            </div>
                            <div class="entry">
                                <span class="value">73</span>
                                <div class="bar" style="height: 26.25px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                                5
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 26.25px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                                6
                            </div>
                            <div class="entry">
                                <span class="value">74</span>
                                <div class="bar" style="height: 31px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                                7
                            </div>
                            <div class="entry">
                                <span class="value">77</span>
                                <div class="bar" style="height: 45.24999999999999px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                8
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 45.24999999999999px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                9
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 45.24999999999999px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                10
                            </div>
                            <div class="entry">
                                <span class="value">78</span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                11
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                12
                            </div>
                        </div>
                    </section>
                    <section class="column chart chartist">
                        <h3>New stargazers per day</h3>
                        <div class="chart-bars">
                            <div class="entry">
                                <span class="value">+3</span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                29
                                <div class="bottom">Apr.</div>
                            </div>
                            <div class="entry">
                                <span class="value">+2</span>
                                <div class="bar" style="height: 33.33333333333333px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                                30
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                1
                                <div class="bottom">May</div>
                            </div>
                            <div class="entry">
                                <span class="value">+1</span>
                                <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                2
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                3
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                4
                            </div>
                            <div class="entry">
                                <span class="value">+2</span>
                                <div class="bar" style="height: 33.33333333333333px; background-color: var(--color-calendar-graph-day-L3-bg)"></div>
                                5
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                6
                            </div>
                            <div class="entry">
                                <span class="value">+1</span>
                                <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                7
                            </div>
                            <div class="entry">
                                <span class="value">+3</span>
                                <div class="bar" style="height: 50px; background-color: var(--color-calendar-graph-day-L4-bg)"></div>
                                8
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                9
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                10
                            </div>
                            <div class="entry">
                                <span class="value">+1</span>
                                <div class="bar" style="height: 16.666666666666664px; background-color: var(--color-calendar-graph-day-L2-bg)"></div>
                                11
                            </div>
                            <div class="entry">
                                <span class="value"></span>
                                <div class="bar" style="height: 0px; background-color: var(--color-calendar-graph-day-L0-bg)"></div>
                                12
                            </div>
                        </div>
                    </section>
                </div>
            </section>
            <section>
                <h2 class="field">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"/>
                    </svg>
                    8 Languages
                </h2>
            </section>
            <section class="column">
                <h3 class="field">Most used languages</h3>
                <svg class="bar" xmlns="http://www.w3.org/2000/svg" width="460" height="8">
                    <mask id="languages-bar">
                        <rect x="0" y="0" width="460" height="8" fill="white" rx="5"/>
                    </mask>
                    <rect mask="url(#languages-bar)" x="0" y="0" width="0" height="8" fill="#d1d5da"/>
                    <rect mask="url(#languages-bar)" x="0" y="0" width="406.8248544521567" height="8" fill="#f1e05a"/>
                    <rect mask="url(#languages-bar)" x="406.8248544521567" y="0" width="41.82237408672945" height="8" fill="#3572A5"/>
                    <rect mask="url(#languages-bar)" x="448.64722853888617" y="0" width="6.027407045825248" height="8" fill="#89e051"/>
                    <rect mask="url(#languages-bar)" x="454.67463558471144" y="0" width="4.239242159068811" height="8" fill="#41b883"/>
                    <rect mask="url(#languages-bar)" x="458.91387774378023" y="0" width="1.019132546759849" height="8" fill="#4F5D95"/>
                    <rect mask="url(#languages-bar)" x="459.9330102905401" y="0" width="0.06698970945991531" height="8" fill="#c6538c"/>
                </svg>
                <div class="field center horizontal-wrap fill-width">
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#f1e05a" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        JavaScript
                    </div>
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#3572A5" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        Python
                    </div>
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#89e051" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        Shell
                    </div>
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#41b883" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        Vue
                    </div>
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#4F5D95" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        PHP
                    </div>
                    <div class="field center no-wrap language">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                            <path fill="#c6538c" fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8z"/>
                        </svg>
                        SCSS
                    </div>
                </div>
            </section>
            <section>
                <h2 class="field">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                        <path fill-rule="evenodd" d="M14.184 1.143a1.75 1.75 0 00-2.502-.57L.912 7.916a1.75 1.75 0 00-.53 2.32l.447.775a1.75 1.75 0 002.275.702l11.745-5.656a1.75 1.75 0 00.757-2.451l-1.422-2.464zm-1.657.669a.25.25 0 01.358.081l1.422 2.464a.25.25 0 01-.108.35l-2.016.97-1.505-2.605 1.85-1.26zM9.436 3.92l1.391 2.41-5.42 2.61-.942-1.63 4.97-3.39zM3.222 8.157l-1.466 1a.25.25 0 00-.075.33l.447.775a.25.25 0 00.325.1l1.598-.769-.83-1.436zm6.253 2.306a.75.75 0 00-.944-.252l-1.809.87a.75.75 0 00-.293.253L4.38 14.326a.75.75 0 101.238.848l1.881-2.75v2.826a.75.75 0 001.5 0v-2.826l1.881 2.75a.75.75 0 001.238-.848l-2.644-3.863z"/>
                    </svg>
                    Mastered technologies and topics
                </h2>
                <div class="row">
                    <section>
                        <div class="topics fill-width">
                        </div>
                    </section>
                </div>
            </section>
        </div>
        <div xmlns="http://www.w3.org/1999/xhtml" id="metrics-end"></div>
    </foreignObject>
</svg>