Project</th>	Stack</th>	Status</th></tr></thead>
nest</td>	Rust / Python</td>	Active</td></tr>
AutoSauce</td>	TypeScript / AI</td>	In development</td></tr>
PrettyEyes</td>	React / Vite</td>	WIP ~65%</td></tr>
CryptoControl</td>	Next.js / Figma</td>	Shipped V2</td></tr>
Flashed</td>	Mobile / AI</td>	Shipped MVP</td></tr> </tbody></table> let</span> highlight</span> =</span> true</span>;</span></span></code></pre>10</span>pre</span> mark</span> {</span></span> 12</span> display</span>:</span> block</span>;</span></span> 13</span> color</span>:</span> currentcolor</span>;</span></span> 14</span>}</span></span> 15</span>pre</span> table</span> td</span>:</span>nth-of-type</span>(</span>1</span>)</span> {</span></span> 17</span> color</span>:</span> #</span>6b6b6b</span>;</span></span> 18</span> font-style</span>:</span> italic</span>;</span></span> 19</span>}</span></span></code></pre> useful information that users should know, even when skimming content.</p> </blockquote> helpful advice for doing things better or more easily.</p> </blockquote> key information users need to know to achieve their goal.</p> </blockquote> urgent info that needs immediate user attention to avoid problems.</p> </blockquote> advises about risks or negative outcomes of certain actions.</p> </blockquote> extra</h2> KaTeX</h3> i can render LaTeX with the KaTeX</a> library, enabled by the extra.katex</code> config variable.</p> $$</span>\</span>relax</span> f</span>(</span>x</span>)</span> = </span>\</span>int</span>_</span>{</span>-</span>\</span>infty</span>}</span>^</span>\</span>infty</span>\</span>hat</span>{</span>f</span>}</span>(</span>\</span>xi</span>)</span>\</span>,</span>e</span>^</span>{</span>2</span> \</span>pi</span> i </span>\</span>xi</span> x</span>}</span>\</span>,</span>d</span>\</span>xi</span>$$</span></span></code></pre> $$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$</p> shortcodes</h3> i have a few useful shortcodes</a> that simplify some tasks, usable on any page.</p> alerts</h4> github-style</a> alerts. wrap the alert text inside the shortcode to get the look.</p> available alert types:</p> note</code>: useful information that users should know, even when skimming content.</li> tip</code>: helpful advice for doing things better or more easily.</li> important</code>: key information users need to know to achieve their goal.</li> warning</code>: urgent info that needs immediate user attention to avoid problems.</li> caution</code>: advises about risks or negative outcomes of certain actions.</li> </ul> {% alert(note=true) %}</span></span> -> Alert text <-</span></span> {% end %}</span></span></code></pre> useful information that users should know, even when skimming content.</p> </blockquote> helpful advice for doing things better or more easily.</p> </blockquote> key information users need to know to achieve their goal.</p> </blockquote> urgent info that needs immediate user attention to avoid problems.</p> </blockquote> advises about risks or negative outcomes of certain actions.</p> </blockquote> images and videos</h4> by default, images and videos come with generic styling, like rounded corners and shadow. to fine-tune that, use shortcodes with different variable combinations.</p> available variables:</p> url</code>: url to an image.</li> url_min</code>: url to a compressed version, the original opens by clicking the image.</li> alt</code>: alt text, same as text inside square brackets in markdown.</li> full</code>: forces the image to full-width.</li> full_bleed</code>: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.</li> start</code>: floats the image to the start of the paragraph and scales it down.</li> end</code>: floats the image to the end of the paragraph and scales it down.</li> pixels</code>: nearest neighbor scaling, keeps pixel-art sharp.</li> transparent</code>: removes rounded corners and shadow, useful for images with transparency.</li> no_hover</code>: removes zoom on hover.</li> spoiler</code>: blurs the image until hovered/pressed, useful for plot rich game screenshots.</li> spoiler</code> with solid</code>: ditto, but hides the image completely.</li> </ul> {{/* image(url="image.png", alt="This is an image", no_hover=true) /%}}</span></span></code></pre> image with alt text and no zoom on hover</figcaption> </figure> </a> image with a compressed version, alt text, and no zoom on hover</figcaption> </figure> alternatively, you can append the following URL anchors. handier in some cases, e.g. these render normally in any markdown editor, unlike the Zola shortcodes.</p> #full</code>: forces the image to full-width.</li> #full-bleed</code>: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.</li> #start</code>: floats the image to the start of the paragraph and scales it down.</li> #end</code>: floats the image to the end of the paragraph and scales it down.</li> #pixels</code>: nearest neighbor scaling, keeps pixel-art sharp.</li> #transparent</code>: removes rounded corners and shadow, useful for images with transparency.</li> #no-hover</code>: removes zoom on hover.</li> #spoiler</code>: blurs the image until hovered/pressed, useful for plot rich game screenshots.</li> #spoiler</code> with #solid</code>: ditto, but hides the image completely.</li> </ul> </a></p> full-width image with alt text, pixel-art rendering, no shadow or rounded corners, and no zoom on hover</figcaption> </figure> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.</p> </a></p> for videos it’s all the same, with a few differences: the no_hover</code> and url_min</code> variables aren’t available.</p> you can also set the following attributes</a>:</p> autoplay</code>: start playing the video automatically.</li> controls</code>: show video controls like volume, seeking and pause/resume.</li> loop</code>: play the video again once it ends.</li> muted</code>: turn off audio by default.</li> playsinline</code>: prevent the video from playing fullscreen by default (depends on the browser).</li> </ul> {{/ video(url="video.webm", alt="This is a video", controls=true) /%}}</span></span></code></pre> </video> webm video example from MDN</figcaption> </figure> CRT</h4> this one doesn’t simplify anything, it just adds a CRT-like effect around markdown code blocks.</p> {% crt() %}</span></span> -> Markdown code block <-</span></span> {% end %}</span></span></code></pre> _____________________________________________</span></span> \|.'', Public_Library_Halls ,''.\|</span></span> \|.'.'', ,''.'.\|</span></span> \|.'.'.'', ,''.'.'.\|</span></span> \|.'.'.'.'', ,''.'.'.'.\|</span></span> \|.'.'.'.'.\| \|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|===; ;===\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|:::\|', ,'\|:::\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|---\|'.\|, _______ ,\|.'\|---\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|:::\|'.\|'\|???????\|'\|.'\|:::\|.'.'.'.'.\|</span></span> \|,',',',',\|---\|',\|'\|???????\|'\|,'\|---\|,',',',',\|</span></span> \|.'.'.'.'.\|:::\|'.\|'\|???????\|'\|.'\|:::\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|---\|',' /%%%\ ','\|---\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|===:' /%%%%%\ ':===\|.'.'.'.'.\|</span></span> \|.'.'.'.'.\|%%%%%%%%%%%%%%%%%%%%%%%%%\|.'.'.'.'.\|</span></span> \|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.\|</span></span> \|.'.'.',' /%%%%%%%%%%%\ ','.'.'.\|</span></span> \|.'.',' /%%%%%%%%%%%%%\ ','.'.\|</span></span> \|.',' /%%%%%%%%%%%%%%%\ ','.\|</span></span> \|;____________/%%%%%Spicer%%%%%%\____________;\|</span></span></code></pre> </div> there’s also a cursor</code> class you can add to a span with e.g. the █</code> character to simulate the terminal cursor. it doesn’t work inside markdown code blocks though.</p> YouTube</h4> embeds a YouTube video using youtube-nocookie.</p> available variables:</p> autoplay</code>: whether the video should autoplay.</li> start</code>: which second the video starts on.</li> </ul> {{/ youtube(id="0Da8ZhKcNKQ") /%}}</span></span></code></pre> </iframe> Vimeo</h4> embeds a Vimeo video.</p> available variables:</p> autoplay</code>: whether the video should autoplay.</li> </ul> {{/ vimeo(id="869483483") /%}}</span></span></code></pre> </iframe> Mastodon</h4> embeds a Mastodon post.</p> available variables:</p> host</code>: the instance the post lives on. if not set, falls back to the one in the [extra.comments]</code> section of config.toml</code>.</li> user</code>: the poster. if not set, falls back to the one in the [extra.comments]</code> section of config.toml</code>.</li> id</code>: the post id, usually at the end of the URL.</li> </ul> {{/ mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") */%}}</span></span></code></pre> </iframe> description list (<dl></code>)</h3> <</span>dl</span>></span></span> <</span>dt</span>></span>Something</span></</span>dt</span>></span></span> <</span>dd</span>></span>And its description</span></</span>dd</span>></span></span> </</span>dl</span>></span></span></code></pre> Name</dt> Brenner Cruvinel</dd> Role</dt> AI Researcher / Product Designer</dd> Location</dt> Brazil</dd> Philosophy</dt> Make it simple, but significant.</dd> </dl> form input (<input></code>)</h3> <</span>input</span> type</span>=</span>"</span>checkbox</span>"</span> /></span></span> <</span>label</span>></span>Checkbox</span></</span>label</span>></span></span></code></pre> Ship AutoSauce</label> </li> Finish PrettyEyes</label> </li> Write more posts</label> </li> Rewrite homepage</label> </li> Invent cold fusion</label> </li> </ul> with the switch</code> class:</p> <</span>input</span> class</span>=</span>"</span>switch</span>"</span> type</span>=</span>"</span>checkbox</span>"</span> /></span></span> <</span>label</span>></span>Checkbox</span></</span>label</span>></span></span></code></pre> Dark mode</label> </li> Reading time</label> </li> </ul> figure captions (<figcaption></code>)</h3> <</span>figure</span>></span></span> -> Whatever content <-</span></span> <</span>figcaption</span>></span>Caption of content above</span></</span>figcaption</span>></span></span> </</span>figure</span>></span></span></code></pre> </p> CryptoControl V2 dashboard</figcaption> </figure> accordion (<details></code>)</h3> <</span>details</span>></span></span> <</span>summary</span>></span>Accordion title</span></</span>summary</span>></span></span> -> Contents here <-</span></span> </</span>details</span>></span></span></code></pre> reveal project list</summary> nest</li> AutoSauce</li> PrettyEyes</li> CryptoControl</li> Flashed</li> </ul> </details> side comment (<small></code>)</h3> <</span>small</span>></span>Small, cute text that doesn't catch attention.</span></</span>small</span>></span></span></code></pre> Small, cute text that doesn’t catch attention.</small></p> abbreviation (<abbr></code>)</h3> <</span>abbr</span> title</span>=</span>"</span>Artificial Intelligence</span>"</span>></span>AI</span></</span>abbr</span>></span></span></code></pre> the AI</abbr> tools are getting better every day.</p> aside (<aside></code>)</h3> <</span>aside</span>></span></span> </span> -> Contents here </span><</span>-</span></span> </</span>aside</span>></span></span></code></pre> Brenner Cruvinel</p> </aside> AI researcher and product designer working at the intersection of computer science and mental health.</p> keyboard input (<kbd></code>)</h3> <</span>kbd</span>></span>⌘ Command</span></</span>kbd</span>></span>.</span></span></code></pre> to open the command palette, press ⌘ Command</kbd> + Shift</kbd> + P</kbd>.</p> mark text (<mark></code>)</h3> <</span>mark</span>></span>Marked text</span></</span>mark</span>></span></span></code></pre> you know what? i’m gonna say some very important</mark> stuff, so important</mark> that even bold</strong> is not enough.</p> deleted and inserted text (<del></code> and <ins></code>)</h3> <</span>del</span>></span>Something deleted</span></</span>del</span>></span> <</span>ins</span>></span>Something added</span></</span>ins</span>></span></span></code></pre> Old homepage</del> New homepage based on GitHub</ins></p> progress indicator (<progress></code>)</h3> <</span>progress</span>></span></</span>progress</span>></span></span> <</span>progress</span> value</span>=</span>"</span>33</span>"</span> max</span>=</span>"</span>100</span>"</span>></span></</span>progress</span>></span></span></code></pre> </progress> </progress></p> sample output (<samp></code>)</h3> <</span>samp</span>></span>Sample Output</span></</span>samp</span>></span></span></code></pre> Sample Output</samp></p> inline quotation (<q></code>)</h3> <</span>q</span>></span>Someone said something</span></</span>q</span>></span></span></code></pre> blah blah make it simple, but significant</q> hmm.</p> unarticulated annotation (<u></code>)</h3> <</span>u</span>></span>Gmarrar mitsakes</span></</span>u</span>></span></span></code></pre> Build</u> the thing</u> that matters</u>.</p> external links</h3> <</span>a</span> class</span>=</span>"</span>external</span>"</span> href</span>=</span>"</span>https://example.org</span>"</span>></span>External link</span></</span>a</span>></span></span></code></pre> GitHub profile</a></p> spoilers</h3> <</span>span</span> class</span>=</span>"</span>spoiler</span>"</span>></span>Some spoiler</span></</span>span</span>></span></span></code></pre> you know, the best code is the code you don’t have to write.</span> i know, crazy.</p> with the solid</code> class:</p> <</span>span</span> class</span>=</span>"</span>spoiler solid</span>"</span>></span>Some spoiler</span></</span>span</span>></span></span></code></pre> you know, the best code is the code you don’t have to write.</span> i know, crazy.</p> buttons dialog</h3> <div class="buttons"></span></span> <a href="#top">Go to Top</a></span></span> <a class="colored external" href="https://example.org">Example</a></span></span> </div></span></span></code></pre> Go to Top</a> GitHub</a> </div> with the centered</code> and big</code> classes:</p> <div class="buttons centered"></span></span> <button class="big colored">Do Something…</button></span></span> </div></span></span></code></pre>

Loooooong Loooooong Loooooong Loooooong Loooooong Man

2017-01-01T00:00:00+00:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.

Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.

demo page

2008-01-02T00:00:00+00:00

markdown</h2>
text can be bold, italic, strikethrough</del>, and all at the same time</del>.
link to another page</a>.
there should be whitespace between paragraphs 1</a>.

Heading 1</h1>
Heading 2</h2>
Heading 3</h3>
Heading 4</h4>
Heading 5</h5>
Heading 6</h6>
this is a normal paragraph 2</a> following a header.
😭😂🥺🤣❤️✨🙏😍🥰😊
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>“Make it simple, but significant.” my own design philosophy </blockquote> </blockquote> Item 1</li> Item 2 Item 2.1</li> Item 2.2</li> </ul> </li> Item 3</li> Item 4</code></li> </ul> Perform step #1</li> Proceed to step #2</li> Conclude with step #3</li> </ol> Ship AutoSauce V2</li> Publish nest post</li> Rewrite homepage</li> Sleep</li> Drink coffee</li> </ul> </a> Project</th> Stack</th> Status</th></tr></thead> nest</td> Rust / Python</td> Active</td></tr> AutoSauce</td> TypeScript / AI</td> In development</td></tr> PrettyEyes</td> React / Vite</td> WIP ~65%</td></tr> CryptoControl</td> Next.js / Figma</td> Shipped V2</td></tr> Flashed</td> Mobile / AI</td> Shipped MVP</td></tr> </tbody></table> let highlight = true;</code></pre>10pre mark { 12 display: block; 13 color: currentcolor; 14} 15pre table td:nth-of-type(1) { 17 color: #6b6b6b; 18 font-style: italic; 19}</code></pre> useful information that users should know, even when skimming content. </blockquote> helpful advice for doing things better or more easily. </blockquote> key information users need to know to achieve their goal. </blockquote> urgent info that needs immediate user attention to avoid problems. </blockquote> advises about risks or negative outcomes of certain actions. </blockquote> extra</h2> KaTeX</h3> i can render LaTeX with the KaTeX</a> library, enabled by the extra.katex</code> config variable. $$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$</code></pre> $$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$ shortcodes</h3> i have a few useful shortcodes</a> that simplify some tasks, usable on any page. alerts</h4> github-style</a> alerts. wrap the alert text inside the shortcode to get the look. available alert types: note</code>: useful information that users should know, even when skimming content.</li> tip</code>: helpful advice for doing things better or more easily.</li> important</code>: key information users need to know to achieve their goal.</li> warning</code>: urgent info that needs immediate user attention to avoid problems.</li> caution</code>: advises about risks or negative outcomes of certain actions.</li> </ul> {% alert(note=true) %} -> Alert text <- {% end %}</code></pre> useful information that users should know, even when skimming content. </blockquote> helpful advice for doing things better or more easily. </blockquote> key information users need to know to achieve their goal. </blockquote> urgent info that needs immediate user attention to avoid problems. </blockquote> advises about risks or negative outcomes of certain actions. </blockquote> images and videos</h4> by default, images and videos come with generic styling, like rounded corners and shadow. to fine-tune that, use shortcodes with different variable combinations. available variables: url</code>: url to an image.</li> url_min</code>: url to a compressed version, the original opens by clicking the image.</li> alt</code>: alt text, same as text inside square brackets in markdown.</li> full</code>: forces the image to full-width.</li> full_bleed</code>: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.</li> start</code>: floats the image to the start of the paragraph and scales it down.</li> end</code>: floats the image to the end of the paragraph and scales it down.</li> pixels</code>: nearest neighbor scaling, keeps pixel-art sharp.</li> transparent</code>: removes rounded corners and shadow, useful for images with transparency.</li> no_hover</code>: removes zoom on hover.</li> spoiler</code>: blurs the image until hovered/pressed, useful for plot rich game screenshots.</li> spoiler</code> with solid</code>: ditto, but hides the image completely.</li> </ul> {{/* image(url="image.png", alt="This is an image", no_hover=true) */%}}</code></pre> image with alt text and no zoom on hover</figcaption> </figure> </a> image with a compressed version, alt text, and no zoom on hover</figcaption> </figure> alternatively, you can append the following URL anchors. handier in some cases, e.g. these render normally in any markdown editor, unlike the Zola shortcodes. #full</code>: forces the image to full-width.</li> #full-bleed</code>: forces the image to fill all available screen width. removes shadow, rounded corners and zoom on hover.</li> #start</code>: floats the image to the start of the paragraph and scales it down.</li> #end</code>: floats the image to the end of the paragraph and scales it down.</li> #pixels</code>: nearest neighbor scaling, keeps pixel-art sharp.</li> #transparent</code>: removes rounded corners and shadow, useful for images with transparency.</li> #no-hover</code>: removes zoom on hover.</li> #spoiler</code>: blurs the image until hovered/pressed, useful for plot rich game screenshots.</li> #spoiler</code> with #solid</code>: ditto, but hides the image completely.</li> </ul> </a> full-width image with alt text, pixel-art rendering, no shadow or rounded corners, and no zoom on hover</figcaption> </figure> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. </a> for videos it’s all the same, with a few differences: the no_hover</code> and url_min</code> variables aren’t available. you can also set the following attributes</a>: autoplay</code>: start playing the video automatically.</li> controls</code>: show video controls like volume, seeking and pause/resume.</li> loop</code>: play the video again once it ends.</li> muted</code>: turn off audio by default.</li> playsinline</code>: prevent the video from playing fullscreen by default (depends on the browser).</li> </ul> {{/* video(url="video.webm", alt="This is a video", controls=true) */%}}</code></pre> </video> webm video example from MDN</figcaption> </figure> CRT</h4> this one doesn’t simplify anything, it just adds a CRT-like effect around markdown code blocks. {% crt() %} -> Markdown code block <- {% end %}</code></pre> _____________________________________________ |.'', Public_Library_Halls ,''.| |.'.'', ,''.'.| |.'.'.'', ,''.'.'.| |.'.'.'.'', ,''.'.'.'.| |.'.'.'.'.| |.'.'.'.'.| |.'.'.'.'.|===; ;===|.'.'.'.'.| |.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.| |.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.| |.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.| |,',',',',|---|',|'|???????|'|,'|---|,',',',',| |.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.| |.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.| |.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.| |.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.| |.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.| |.'.'.',' /%%%%%%%%%%%\ ','.'.'.| |.'.',' /%%%%%%%%%%%%%\ ','.'.| |.',' /%%%%%%%%%%%%%%%\ ','.| |;____________/%%%%%Spicer%%%%%%\____________;|</code></pre> </div> there’s also a cursor</code> class you can add to a span with e.g. the █</code> character to simulate the terminal cursor. it doesn’t work inside markdown code blocks though. YouTube</h4> embeds a YouTube video using youtube-nocookie. available variables: autoplay</code>: whether the video should autoplay.</li> start</code>: which second the video starts on.</li> </ul> {{/* youtube(id="0Da8ZhKcNKQ") */%}}</code></pre> </iframe> Vimeo</h4> embeds a Vimeo video. available variables: autoplay</code>: whether the video should autoplay.</li> </ul> {{/* vimeo(id="869483483") */%}}</code></pre> </iframe> Mastodon</h4> embeds a Mastodon post. available variables: host</code>: the instance the post lives on. if not set, falls back to the one in the [extra.comments]</code> section of config.toml</code>.</li> user</code>: the poster. if not set, falls back to the one in the [extra.comments]</code> section of config.toml</code>.</li> id</code>: the post id, usually at the end of the URL.</li> </ul> {{/* mastodon(host="toot.community", user="sungsphinx", id="111789185826519979") */%}}</code></pre> </iframe> description list (<dl></code>)</h3> <dl> <dt>Something</dt> <dd>And its description</dd> </dl></code></pre> Name</dt> Brenner Cruvinel</dd> Role</dt> AI Researcher / Product Designer</dd> Location</dt> Brazil</dd> Philosophy</dt> Make it simple, but significant.</dd> </dl> form input (<input></code>)</h3> <input type="checkbox" /> <label>Checkbox</label></code></pre> Ship AutoSauce</label> </li> Finish PrettyEyes</label> </li> Write more posts</label> </li> Rewrite homepage</label> </li> Invent cold fusion</label> </li> </ul> with the switch</code> class: <input class="switch" type="checkbox" /> <label>Checkbox</label></code></pre> Dark mode</label> </li> Reading time</label> </li> </ul> figure captions (<figcaption></code>)</h3> <figure> -> Whatever content <- <figcaption>Caption of content above</figcaption> </figure></code></pre> CryptoControl V2 dashboard</figcaption> </figure> accordion (<details></code>)</h3> <details> <summary>Accordion title</summary> -> Contents here <- </details></code></pre> reveal project list</summary> nest</li> AutoSauce</li> PrettyEyes</li> CryptoControl</li> Flashed</li> </ul> </details> side comment (</code>)</h3> <small>Small, cute text that doesn't catch attention.</small></code></pre> Small, cute text that doesn’t catch attention. abbreviation (<abbr></code>)</h3> <abbr title="Artificial Intelligence">AI</abbr></code></pre> the AI</abbr> tools are getting better every day. aside (<aside></code>)</h3> <aside> -> Contents here <- </aside></code></pre> Brenner Cruvinel </aside> AI researcher and product designer working at the intersection of computer science and mental health. keyboard input (<kbd></code>)</h3> <kbd>⌘ Command</kbd>.</code></pre> to open the command palette, press ⌘ Command</kbd> + Shift</kbd> + P</kbd>. mark text (</code>)</h3> <mark>Marked text</mark></code></pre> you know what? i’m gonna say some very important stuff, so important that even bold is not enough. deleted and inserted text (<del></code> and <ins></code>)</h3> <del>Something deleted</del> <ins>Something added</ins></code></pre> Old homepage</del> New homepage based on GitHub</ins> progress indicator (<progress></code>)</h3> <progress></progress> <progress value="33" max="100"></progress></code></pre> </progress> </progress> sample output (<samp></code>)</h3> <samp>Sample Output</samp></code></pre> Sample Output</samp> inline quotation (<q></code>)</h3> <q>Someone said something</q></code></pre> blah blah make it simple, but significant</q> hmm. unarticulated annotation (</code>)</h3> <u>Gmarrar mitsakes</u></code></pre> Build the thing that matters. external links</h3> <a class="external" href="https://example.org">External link</a></code></pre> GitHub profile</a> spoilers</h3> <span class="spoiler">Some spoiler</span></code></pre> you know, the best code is the code you don’t have to write. i know, crazy. with the solid</code> class: <span class="spoiler solid">Some spoiler</span></code></pre> you know, the best code is the code you don’t have to write. i know, crazy. buttons dialog</h3> <div class="buttons"> <a href="#top">Go to Top</a> <a class="colored external" href="https://example.org">Example</a> </div></code></pre> Go to Top</a> GitHub</a> </div> with the centered</code> and big</code> classes: <div class="buttons centered"> <button class="big colored">Do Something…</button> </div></code></pre>

extra</h2>

shortcodes</h3>
i have a few useful shortcodes</a> that simplify some tasks, usable on any page.</p>

Mods

No Edge Highlight</h2>
Hate the skeuomorphic edge highlight on all semi-transparent elements? Let’s get rid of it using the `no-edge-highlight</code> mod:</p>`
`@</span>use</span> "</span>../themes/brennercruvinel.com/sass/mods/no-edge-highlight</span>"</span>;</span></span></code></pre>`

Lorem

Brenner

Como eu escrevo e construo

O que é este post?</h2>
Este é um post-exemplo. Ele serve para demonstrar formatação do tema e, ao mesmo tempo, falar um pouco sobre como eu aproximo problemas complexos.</p>

Loooooong Loooooong Loooooong Loooooong Loooooong Man

demo page

markdown</h2>
text can be bold</strong>, italic</em>, strikethrough</del>, and all at the same time</del></strong></em>.</p>
link to another page</a>.</p>
there should be whitespace between paragraphs 1</a></sup>.</p>

Heading 2</h2>

Heading 3</h3>

Heading 4</h4>

Heading 5</h5>

Brenner

Como eu escrevo e construo

O que é este post?</h2> Este é um post-exemplo. Ele serve para demonstrar formatação do tema e, ao mesmo tempo, falar um pouco sobre como eu aproximo problemas complexos.</p>

Loooooong Loooooong Loooooong Loooooong Loooooong Man

demo page

markdown</h2> text can be bold</strong>, italic</em>, strikethrough</del>, and all at the same time</del></strong></em>.</p> link to another page</a>.</p> there should be whitespace between paragraphs1</a></sup>.</p>

Heading 2</h2>

Heading 3</h3>

Heading 4</h4>

Heading 5</h5>

CRT</h4> this one doesn’t simplify anything, it just adds a CRT-like effect around markdown code blocks.</p>

Mods

No Edge Highlight</h2> Hate the skeuomorphic edge highlight on all semi-transparent elements? Let’s get rid of it using the no-edge-highlight</code> mod:</p> @</span>use</span> "</span>../themes/brennercruvinel.com/sass/mods/no-edge-highlight</span>"</span>;</span></span></code></pre>

Lorem

O que é este post?</h2>
Este é um post-exemplo. Ele serve para demonstrar formatação do tema e, ao mesmo tempo, falar um pouco sobre como eu aproximo problemas complexos.</p>

markdown</h2>
text can be bold</strong>, italic</em>, strikethrough</del>, and all at the same time</del></strong></em>.</p>
link to another page</a>.</p>
there should be whitespace between paragraphs 1</a></sup>.</p>

No Edge Highlight</h2>
Hate the skeuomorphic edge highlight on all semi-transparent elements? Let’s get rid of it using the `no-edge-highlight</code> mod:</p>`
`@</span>use</span> "</span>../themes/brennercruvinel.com/sass/mods/no-edge-highlight</span>"</span>;</span></span></code></pre>`