Devlog #1

---

Context & What I built

I made a website to showcase a font I drew using Calligraphr and ibis Paint.

Unfortunately I didn’t use Lapse to record my font drawing process 😭 so I am unable to publish the font itself as a project.

Process

I learned how to add a editable text block using contenteditable="true" within the div. I also learned how to add a coding snippet using <pre><code>...</code></pre>.

Marquee Feature

Since the marquee tag was deprecated, I built a marquee of text using an animation keyframe that I defined in CSS. I used white-space: no-wrap in order to stop the text in the marquee from wrapping and instead flow on one horizontal line. overflow-x: auto was used to fix a bug where the text would overflow to the right side of the screen.

Bugs

I ran into an issue where the vines background image in hero section was distracting and made the font unreadable. I fixed this by adding the linear gradient property to background in CSS.

I initially deployed the website using Github pages, but I ran into a https issue that I wasn’t sure how to fix, so I decided to switch to Vercel deployment instead which was a lot more convenient and straightforward.

Aesthetics

I made the website transition from green (at the hero section) to brown (at the footer) to resemble the green grass and brown soil.

I plan to make more fonts in the future!