Marcelo Terreni :: Portfolio

Plastic toy of cartoon character Cheburashka in blue

I’m a front⁠-⁠end developer specialized in CSS, Javascript, UI/UX and web accessibility.

I enjoy building things that live on the web and put my problem-solving skills into play. I spend most of my time on the front-end of the stack, transforming beautiful UX designs into lean, user-friendly digital experiences.

I’m currently focused on developing ReactJS user interfaces that work for everyone.

Get my resume in PDF format

Some things I’ve built.

This is a selection of some the projects I've been involved with in the recent years.

Accessibility

ReactJS literary bot with accessible user experience

Everyday, a bot posts a new sentence from the book Autoportrait by Edóuard Levé. A small but thorough ReactJS project conceived to explore real-world solutions to common accessibility challenges when building SPAs: client-side routing, state change notifications, focus management, modal windows, etc. The back-end is simulated with a JSON file, one of its key-value pairs is used to schedule the publishing of each post. The data was scraped with PHP from English and Spanish editions of the book.

View source on GitHub Visit Autoportrait
  • ReactJS
  • Accessibility
  • CSS
  • UX Design

Media art restoration

A Javascript version of Pn=n! (2006) by Iván Marino

First exhibited in March 2006, Pn=n! was a media art installation developed in Flash by the argentinian artist Iván Marino. For this restoration, I re-wrote the code from scratch with ES6 and MSE, built a modern web layout with CSS and recompressed the video using the HandBrake CLI. Pn=n! repurposes a sequence from the film “La Passion de Jeanne d'Arc” to reflect upon the idea of torture as an algorithm, a piece of software. Shots are randomly selected and reedited into a new sequence that follows a strict semantic procedure: victims, victimizers and torture instruments.

View source on GitHub Visit the Pn=n! restoration
  • ES6
  • CSS
  • HandBrakeCLI
  • UX Design

Media art restoration

A javascript version of Naranjas (2002) by Julia Masvernat

I picked the “purple level” from Naranjas (2002), an interactive work developed in Flash by Julia Masvernat, and had a try at rewriting it using modern web technologies like ES6 and CSS Animations. Part puzzle, part toy, Naranjas proved to be a student favorite during my times teaching creative coding with web technologies at UNTREF. Being a 2002 project, I also had to come up with new solutions on how to make it responsive or compatible with touch devices.

View source on GitHub Visit the Naranjas restoration
  • ES6
  • CSS
  • UX Design

Front⁠-⁠end development

A TV channel for kids gets its front⁠-⁠end developed with Sass & jQuery

I worked with a team of one UX Architect, one UI Designer and a Back-end Developer to build the 2015–2021 version of pakapaka.gob.ar, still used to this day with a minor facelift of logo and background images. For the front⁠-⁠end I used a combination of Sass and jQuery. I also handled the adaptation to mobile viewports of the desktop views provided by the UI Designer.

Visit pakapaka.gob.ar
  • CSS
  • jQuery
  • UX Design

WordPress customization

An online portfolio built with WordPress & Bootstrap

Highly prolific visual artist and engraver, Gabriela was looking for an online portfolio that would allow her to easily add and remove works to accommodate their changing relevance over time. I designed a minimalist UI with diferent views (portrait, landscape and series) to let her work shine and developed a WordPress custom backend that simplified the organization of her work.

Visit gabrielazelentcher.com.ar
  • WordPress
  • UX Design
  • Bootstrap
  • jQuery

Internet video

A video conversation between four artists in Vanilla Javascript

Start-to-end WordPress assignment where I designed and developed the final installment of a project where four artists living in four different cities kept an epistolary exchange in video format over a period of four years. Users can opt for several ways to navigate through the conversation other than chronological: a series of keywords engineered into the custom backend such as “rain” or “friendship” are processed by an algorithm in ES5 to create semantically related playlists on-the-fly.

Visit thisisjusttosay.net
  • ES5
  • WordPress
  • FFMPEG
  • CSS
  • UX Design

Accessibility

A video introduction to Web Accessibility

I was commissioned by the Ministry of Education of Argentina to write ten screenplays (together with shooting script style ideas and suggestions) for a group of animations that would introduce Web Accessibility to young audiences. The videos were part of a series of two to three-minute animations targeted to high school students who are taking their first steps into the world of web development.

Watch episode on Assistive Tech
  • Accessibility
  • Teaching

Some places where I’ve worked.

This is a selection of some cool companies I was part of.

2002–2021

Freelance Front-end Developer and UX Designer

  • CSS
  • Javascript (ES5 & ES6)
  • WordPress
  • HTML5
  • jQuery
  • Bootstrap

I currently work as a full-time freelancer doing custom WordPress development, UX/UI design and front-end jobs for company websites, creative projects and artistic portfolios.

  • Used a variety of different languages, frameworks, and content management systems such as JavaScript, Bootstrap, WordPress and Laravel.
  • During the 2018–2020 period I was able to work in several start-to-end WordPress projects that allowed me to get in touch again with the joys of UX/UI design.
  • Clients include ACE Seguros, Techint, Editorial Momofuku, UNTREF and The Ministry of Education of Argentina

This is just to say project designed and developed with Javascript (ES5), CSS, FFMPEG and WordPress

2005–2017

Front-end Developer and Accessibility Lead at Educ.ar S.E.

  • CSS
  • HTML5
  • jQuery
  • Bootstrap
  • WordPress
  • FFMPEG
  • Laravel

Educ.ar S.E. is a state-owned enterprise that holds a series of educational ventures like a web portal with more than one million monthly unique visitors (educ.ar) and three locally renowned educational television channels (Encuentro, Pakapaka and DeporTV). My responsibilities covered a broad range of projects that coupled the worlds of IT and education. I worked mainly as a Front-end Developer with some forays into more specialized roles as Web Accessibility Lead and Internet video Specialist.

  • Collaborated with small teams of designers and engineers to implement the institutional websites for Encuentro Channel (2012–2016), Pakapaka Channel (2015–2021) and the InfinitoxDescubrir project (2016).
  • Oversaw the in-house implementation of the WCAG 2.0 AA Success Criteria ruled under the 26.653rd Law on Web Accessibility for the Public Sector as Accessibility Lead (2011–2014). I also worked as accessible components developer and accessibility consultant/code reviewer for outsourced projects.
  • Worked as UI developer (XHTML 1.0, CSS 2.1, ES3) and cross-platform mastering engineer for the offline distribution in CD-ROM format of educational web content for elementary school students (Colección Educ.ar). More than one million copies were delivered country-wide for its first 23 issues (2004–2008).
Screenshot of Encuentro Channel homepage, highlights are the logo over a light blue background and a shows carousel

Canal Encuentro website. I was responsible for the front-end development and accessibility implementation of the 2012–2016 version of its website. I worked together with a team of one UX Architect, one UI Designer and a Back-end Developer.

Screenshot of an Infinito por descubrir news article, picture of kids using VR glasses

infinitoxdescubrir.gob.ar (2016). Front-end development for a country-wide network of innovation centers in Argentina.

2008–2020

Creative coding instructor at UNTREF and other institutions

  • HTML5
  • CSS
  • jQuery
  • FFMPEG

Between 2008 and 2015 I served as full professor for a workshop on creative coding with web technologies for the Bachelor in Media Arts hosted by the Tres de Febrero University. The course was divided in two sections: in the first part, students were taught the ins and outs of web development with W3C standards; for the second phase they were encouraged to push the boundaries of what was possible with these same technologies, and assignments were aimed at experimenting with new forms of navigation and interaction.

  • Nearly 10% of my students ended up getting into front-end development jobs even though the course was (at the time) the only one included in the Bachelor's program syllabus that covered web technologies (Hypermedia Technology, UNTREF, 2008–2015)
  • Was able to travel abroad to give lectures on Non-Linear Languages in Media Arts in Saint Petersburg, Russia (4hs, CYLAND MediaArtLab, 2015) and Transmedia and Interactive Narratives in Tandil (36hs, UNICEN, 2018)
  • Worked alongside three other professors on an Introduction to Media Arts course for freshmen students. It attained a high level of engagement and remarkable feedback among students notwithstanding the 2020 pandemic (Lab I, UNTREF, 2019–2020)
Face of a woman with bangs covered by dozens of cursors, text says “Make a mask”

Classroom exercise that combined HTML5 Video, Canvas, jQuery and JSON to understand the basic dynamics behind the crowdsourced music video donottouch.org (2013) by Studio Moniker.

Professor with a beard and a green t-shirt speaking to his class, there's a slide projected in the background

Lesson on net.art and other old school art practices in the web during my course on Non⁠-⁠Linear Languages (2011–2020) at UNTREF. Picture by Anita Piñero (2019)

Purple screen and a line of squares also purple getting smaller in the center by action of the mouse cursor

Recreating Naranjas (2002) by Julia Masvernat gave us a great excuse to learn about loops, events and animation with jQuery and CSS.

2004

Web Designer and Assistant Professor at MECAD / ESDI

  • Flash (AS2)
  • HTML
  • Fireworks
  • After Effects

Located in the city of Barcelona, the Media Center d’ Art i Disseny (ESDI) was an educational center that hosted three Master programs and was involved in the development of specific new media arts projects for different institutions. There, I worked as a Web Designer on several projects for e-learning, new media art & video festivals and net.art grants.

  • Built and dictated online courses for the MECAD/ESDI/UNESCO new media arts e-learning platform.
  • Tutored students on their MA assignments and took my first steps into teaching with special courses on Flash (AS2), Macromedia Director and After Effects.
  • Assisted interns in the development of interactive catalogues for the Caixa Forum media center (Flash, AS2).
Tutorial screenshot with a menu on the left and two Director interface screenshots with explainatory text in the main text area

Online course on Interface Design with Macromedia Director that I prepared for the MECAD/ESDI/UNESCO new media arts e-learning platform. Each course was developed using HTML 4.01 with tables and frames, ES3, cross-platform video (Windows Media, Quicktime, Real) and a little CSS.

2002–2003

Web Designer and Rich Media Developer at Repsol-YPF

  • ActionScript 2
  • HTML
  • ASP + SQLServer 2000
  • Fireworks

Over the course of two years, I worked for the marketing department of the leading oil and gas company in Argentina. My role shifted from design to development and included several Flash and HTML projects within the company's websites and intranets. I was also involved in e-mail marketing campaigns, newsletter deliveries and promotional microsites that required simple CRUD functionality in ASP and SQL Server 2000.

  • Designed and developed in AS2 the front-end of an interactive catalog for the loyalty program Serviclub (2003) together with a team of two back-end engineers.
  • Built a Flash puzzle for Guia YPF (a guide book with maps and recommendations on hotels and restaurants) and a Flash trivia game that celebrated the launching of the new YPF Chile website (awards included t-shirts, helmets and a sports motorcycle).
  • Designed and animated banner ads and interactive iframes that run on the most popular online newspapers in Argentina (Clarín, Infobae, La Nación, Yahoo! News)
Screenshoot of a quiz question with four options, to the right we see the face of the motorcycle rider Carlo de Gavardo

I single-handedly built, designed and animated a trivia game for YPF Chile with Macromedia Flash (AS2), ASP and SQL Server 2000. The process also included user registration, validating coupons and keeping participants scores.