Jude Serena

Projects

Coudre Studio

Coudre Studio projects

Coudre Studio is an interdisciplinary research studio comprised of Valeria Ustárez, Raul Nieves and myself, with an extensive project portfolio. Visit the link above to see a selection of our works, which usually involve ceramics, programming, 3D printing and custom machines.

Coudre Studio's website was also coded by me. You can find more details about the website as a project itself later down below.

Portfolio (this website)

Repository

Built to be accessible and minimal while looking good:

  • Responsive at any level of zoom across any device.
  • Written HTML-first, respecting semantics: readable by screen readers, bots (good for SEO), and those who use custom or no CSS.
  • Navigable with keyboard, with custom focus style (try using the Tab key).
  • Loads fast.

Sample 11ty blog

Website Repository Screenshot of a dark-themed blog, with a column of posts at the center. The posts and header are subtly shaded and appear card-like.

A sample static blog built with the 11ty static site gnerator. Fully responsive, navigable by keyboard and screen reader and featuring pagination, post archive, a light/dark theme switch and share buttons.

Coudre Studio website

Website Repository Screenshot of the Coudre Studio website projects page. The project cards are ordered in a grid-like fashion.

A clean portfolio for Coudre Studio, with the same principles as this portoflio in mind. It's built with 11ty. Being a picture-rich website, care is taken to efficiently serve and compress images, all with purposeful alt text.

Orniteco

Website Repository Screenshot of the Orniteco game screen, showing the quiz options for three different birds accompanied by their pictures.

An interactive quiz to learn to identify birds by their song. The audios are provided by the collaborative recording repository xeno-canto and are fetched through the free xeno-canto API.

It is available in several languages and themes (including dark, high-contrast and unlockable themes), as well as a dyslexia-friendly font. The data for the different levels, languages and themes is pulled from JSON files, making it easy and fast to add new content. User progress and settings are saved to local storage. When the user completes a level, she can easily share through social media links.

This was my first web development project, which served as the final project of the front-end development course I attended at CIFO. It was developed on a tight schedule while I learnt HTML, CSS and advanced Javascript concepts. The project required the use of a free API and was mostly unguided. Although not perfect, it surpassed what was expected from the assignment and had very good reception.

I was recently confirmed by the xeno-canto API's authors that there's a bug in the API, which has broken the filtering of non-song noises that Orniteco made previously to the API's latest change.