profile-card.svg

<svg fill="none" viewBox="0 0 1000 500" width="1000" height="500" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                :root{
                    /* Colors generated with mycolor.space */
                    --proficiency-proficient:   #46B30C;
                    --proficiency-good:         #00a353;
                    --proficiency-average:      #008e75;
                    --proficiency-belowaverage: #7f986f;
                    --proficiency-accquainted:  #a66a24;
                    --proficiency-learning:     #9999cc;

                    --text-color: grey;
                    --text-color-negative: #DDD;
                    
                    --shadow: 16,16,16;
                    --highlight: 200,200,200;
                    --light-shadow: #444;
                    --text-shadow: #555;

                    --low-opacity: 0.25;
                    --medium-opacity: 0.5;
                    --high-opacity: 0.75;
                    --full-opacity: 1;

                    --border-radius-verymild: calc(var(--border-radius) / 4);
                    --border-radius-mild: calc(var(--border-radius) / 2);
                    --border-radius: 2rem;

                    --character-limit: 20ch;

                    /* Relative to the current size of the readme */
                    font-size: 1.5em;
                    font-family: Arial;
                    color: var(--text-color);
                }

                *, *::after, *::before {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }

                /* The containing card */
                #language-card{
                    display: flex;
                    flex-direction: column;
                    --gap: calc(var(--radius) / 2);
                    margin-bottom: calc(-1*var(--gap));

                    width: 100%;
                    height: fit-content;

                    background-color: rgba(var(--shadow),var(--medium-opacity));
                    animation: 1s flash 0s linear;

                    --radius: var(--border-radius-mild);
                    border-radius: var(--radius);
                    padding: calc(var(--radius) / 2);
                }

                #language-card > * {
                    margin-bottom: var(--gap); 
                }

                @supports ((aspect-ratio: 1 / 1) and (gap: 0)) { /* Devices that support gap */
                    #language-card {
                        gap: var(--gap);
                        margin: 0;
                    }

                    #language-card > * {
                        margin: 0;
                    }
                }
                
                /* * * * * * * */
                /* Typewriter  */
                /* * * * * * * */
                #typewriter {
                    color: var(--text-color-negative);
                    overflow: hidden;
                    text-wrap: nowrap;
                }

                #typewriter::before {
                    content: "";
                    background-color: transparent;
                    animation: typing-speak, typing-write, typing-know, typing-speak;
                    animation-duration: 10s, 10s, 10s, 10s;
                    animation-delay: .5s, 7s, 14s, 24s;
                    animation-iteration-count: 1, 1, 1, infinite;
                }

                /* The inner text */
                #typewriter-container p{
                    display: inline-block;
                    width: 1ch;
                    margin-left: .1em;
                    border-bottom: solid .2em var(--text-color-negative);
                    animation: .75s blink-caret 1s step-end infinite;
                }

                @keyframes reveal{
                    from { opacity: 0; filter: brightness(160%) }
                    to { opacity: 1; filter: brightness(100%) }
                }

                @keyframes flash{
                    from, to { filter: brightness(100%) }
                    50% { filter: brightness(150%) }
                }

                @keyframes blink-caret {
                    from, to { border-color: transparent }
                    50% { border-color: var(--text-color-negative); }
                }
                
                /* Inspired by https://codepen.io/alvaromontoro/pen/rNwVpdd */
                @keyframes typing-speak {
                    00.00%, 65.00% { content: ""; background-color: transparent}
                    06.25%, 63.00% { content: "I"; }
                    12.50%, 61.00% { content: "I "; }
                    18.75%, 59.00% { content: "I s"; }
                    25.00%, 57.00% { content: "I sp"; }
                    31.25%, 55.00% { content: "I spe"; }
                    37.50%, 53.00% { content: "I spea"; }
                    43.75%, 50.00% { content: "I speak"; }
                }

                @keyframes typing-write {
                    00.00% { content: ""; }
                    06.25% { content: "I"; }
                    12.50% { content: "I "; }
                    18.75% { content: "I w"; }
                    25.00% { content: "I wr"; }
                    31.25% { content: "I wri"; }
                    37.50% { content: "I writ"; }
                    43.75% { content: "I write"; background-color: rgba(0,0,0,0)}
                    50.00% {content: "I write"; background-color: rgba(0,0,0,0)}
                    50.01% {content: "I write"; background-color: rgba(0,50,200,0.5)}
                    65% {content: ""; background-color: rgba(0,50,200,0.5)}
                }

                @keyframes typing-know {
                    00.00%, 93.75% { content: ""; background-color: rgba(0,0,0,0) }
                    06.25%, 87.50% { content: "I"; }
                    12.50%, 81.25% { content: "I "; }
                    18.75%, 75.00% { content: "I k"; }
                    25.00%, 68.75% { content: "I kn"; }
                    31.25%, 62.50% { content: "I kno"; }
                    37.50%, 56.25% { content: "I know"; }
                    43.75%, 50.00% { content: "I know"; }
                }

                /* * * * * * * * * * * */
                /* Category containers */
                /* * * * * * * * * * * */

                .category-container{
                    --_height: var(--height, 2rem);
                    width: 100%;
                    min-height: var(--_height);

                    display: flex;
                    align-items: center;

                    --radius: var(--border-radius-mild);
                    border-radius: var(--radius);
                    padding: calc(var(--radius) / 4);

                    background-color: rgba(var(--shadow),var(--medium-opacity));
                }

                /* Category containers */
                .category-container h4 {
                    display: flex;
                    align-items: center;
                    --gap: calc(var(--radius) / 4);
                    margin-right: calc(-1*var(--gap));
                    padding-left: calc(0.25*var(--gap));

                    flex-basis: var(--character-limit); /* Needs to be changed if supporting more characters */

                    color: var(--text-color-negative);
                    font-weight: 600;
                    text-wrap: nowrap;
                }

                .category-container h4 > * {
                    margin-right: var(--gap); 
                }

                @supports ((aspect-ratio: 1 / 1) and (gap: 0)) { /* Devices that support gap */
                    .category-container h4 {
                        gap: var(--gap);
                        margin: 0;
                    }

                    .category-container h4 > * {
                        margin: 0;
                    }
                }

                /* The emoji in each category */
                .category-container .emoji {
                    --size: calc(0.75 * var(--_height));
                    font-size: calc(var(--size) / 2); 

                    height: var(--size);
                    width: var(--size);
                    line-height: var(--size); /* Center vertically */
                    text-align: center; /* Center horizontally */
                    
                    background-color: rgba(var(--shadow),var(--high-opacity));
                    border-radius: calc(var(--size) / 2); /* Perfectly round */
                }

                /* * * * * * * */
                /* Skills list */
                /* * * * * * * */

                /* The list of skills */
                .skill-list {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;

                    --spacing: calc(var(--radius) / 4);
                    padding: 0 var(--spacing);
                    margin: 0 calc(-1*var(--spacing)) calc(-1*var(--spacing)) 0;

                    list-style: none;

                    opacity: 0;
                    animation: .75s linear .75s 1 reveal;
                    animation-fill-mode: forwards;
                }

                .skill-list > * {
                    margin: 0 var(--spacing) var(--spacing) 0;
                }
                
                @supports ((aspect-ratio: 1 / 1) and (gap: 0)) { /* Devices that support gap */
                    .skill-list {
                        gap: var(--spacing);
                        margin: 0;
                    }

                    .skill-list > * {
                        margin: 0;
                    }
                }

                .skill-list li{
                    color: var(--text-color-negative);
                    text-wrap: nowrap;
                    overflow: hidden;

                    --font-size: 0.8em;
                    font-size: 0.8em;
                    opacity: var(--high-opacity);

                    --line-height: 1.25;
                    line-height: var(--line-height);
                    min-height: calc(var(--line-height) * var(--font-size));

                    --radius: var(--border-radius-verymild);
                    padding: calc(var(--radius) / 2) calc(var(--radius));
                    border-radius: var(--border-radius-mild);
                }
                
                /* * * * * */
                /* Legend  */
                /* * * * * */

                #legend{
                    --height: 1.5rem;

                    font-size: .75rem;
                    
                    background-color: rgba(var(--highlight), var(--low-opacity));
                }

                #legend h4 {
                    flex-grow: 2; /* Push legend skills to the end */
                }

                #legend .emoji{
                    background-color: rgba(var(--highlight), var(--low-opacity));
                }

                /* * * * * * * * * * * */
                /* Proficiency classes */
                /* * * * * * * * * * * */

                [level="proficient"]{
                    background-color: var(--proficiency-proficient);
                }

                [level="good"]{
                    background-color: var(--proficiency-good);
                }

                [level="average"]{
                    background-color: var(--proficiency-average);
                }

                [level="belowaverage"]{
                    background-color: var(--proficiency-belowaverage);
                }

                [level="accquainted"]{
                    background-color: var(--proficiency-accquainted);
                }

                [level="learning"]{
                    background-color: var(--proficiency-learning);
                }
            </style>

            <figure id="language-card">
                <h3 id="typewriter-container">💬 <span id="typewriter"></span><p></p></h3>
                <section class="category-container">
                    <h4><span class="emoji">🐵</span> Human readable</h4>
                    <ul class="skill-list">
                        <li level="proficient">🇸🇪 Swedish</li>
                        <li level="proficient">🇬🇧 English</li>
                    </ul>
                </section>
                <section class="category-container">
                    <h4><span class="emoji">📦</span> Object oriented</h4>
                    <ul class="skill-list">
                        <li level="proficient">☕ Java</li>
                        <li level="proficient">❤️ Scala</li>
                        <li level="learning">#️⃣ C#</li>
                    </ul>
                </section>
                <section class="category-container">
                    <h4><span class="emoji">🌐</span> Web development</h4>
                    <ul class="skill-list">
                        <li level="proficient">🖥️ HTML</li>
                        <li level="proficient">👔 CSS</li>
                        <li level="good">🤖 JavaScript</li>
                        <li level="good">#️⃣ TypeScript</li>
                    </ul>
                </section>
                <section class="category-container">
                    <h4><span class="emoji">✏️</span> Writing</h4>
                    <ul class="skill-list">
                        <li level="proficient">📝 Markdown</li>
                        <li level="average">📄 LaTeX</li>
                    </ul>
                </section>
                <section class="category-container">
                    <h4><span class="emoji">➕</span> Math/Functional</h4>
                    <ul class="skill-list">
                        <li level="good">✖️ KaTeX</li>
                        <li level="average">🔗 Haskell</li>
                        <li level="belowaverage">🟰 R</li>
                        <li level="belowaverage">🐍 Python</li>
                        <li level="accquainted">🤯 Clojure</li>
                    </ul>
                </section>
                <section class="category-container">
                    <h4><span class="emoji">🔧</span> Other</h4>
                    <ul class="skill-list">
                        <li level="accquainted">💲 Shell scripting</li>
                        <li level="accquainted">🔩 RISC-V Assembly</li>
                        <li level="accquainted">🦀 Rust</li>
                    </ul>
                </section>
                <section class="category-container" id="legend">
                    <h4><span class="emoji">🗺️</span> Legend</h4>
                    <ul class="skill-list">
                        <li level="proficient">💪 Proficient</li>
                        <li level="good">👍 Good</li>
                        <li level="average">👌 Average</li>
                        <li level="belowaverage">🤏 Below average</li>
                        <li level="accquainted">💡 Accquainted</li>
                        <li level="learning">🧠 Learning</li>
                    </ul>
                </section>
            </figure>
        </div>
    </foreignObject>
</svg>