*--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--**--.--'``'-...__...-'``'--.--*

(&)

(%)

($)

-/\

Victoria Hertel Velasco website

An artist website focusing on claiming the traces left behind during a web development process, pondering the question of how we can observe the growth of a web page.

---~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~----~--^---~----~--=--~~--+----~-

(&)

-/\

[!]

Role

Development,

Design,

Project Direction,

Visual Communication,

Experimental,

Website.

Date

Theme

Context

Visit the site here victoria-hertel-site.vercel.app

Take a look at the github repository.

A porfolio website I had the chance to create from the concept, design & to development for Victoria Hertel, a Singapore-based German-Venezuelan artist.

This site packs a lot of my thoughts on how a website and its iterations through time can be tracked and viewed, much like the act of capturing and storing physical images.

1/ Website concept:

Victoria is an artist, whose installations combine sensor technology, trace and motion to construct distilled sensory encounters that heighten our awareness of the material network we inhabit, as she stated on her bio.

I really like the idea of interconnectedness present in each of her works. the idea of people entering the space, connecting with a work, and having an experience with it became really important to Victoria. Within each connection, lie the traces left by the connectings and the connecteds. Thus, leaving traces is also a prominent part in her works as well. As Victoria puts it, “Mark making is at the core of painting, because that gesture is the bridge between the viewer and the artist, which makes it especially powerful.”

Traces are present here and there in Victoria's works, in fact, a prominent part, which left me a question of how such concept can be translated holistically to a 'website'?. I'm not talking about traces passively coming from visitors (maybe by filling out forms or interacting with the site?). This should be the other way around. Is there a way for visitors to feel the presence of the developers? Is there a way traces from the development and maintenance process be reflected onto the front-end? Is there a way website (and its iterations through the length of time) can leave traces on its own, organically?

($)

[*]

Then I looked into The Wayback Machine, a digital archive of the World Wide Web founded by the Internet Archive. Simply put, it allows the user to go "back in time" to see how websites looked in the past.

[=]

-/\

(&)

($)

(#)

That idea resonated so much with what I felt about traces on the net. I wanted to make something like that, something that reflects the site growth/development on the site itself, showing the traces of the owner/developer behind this site. It for sure intrigues me as a visitor to know that someone has been behind the scenes, fixing bugs and maintaining a site all the time, with proper care and determination.

Then I wondered how I could actually make this happen (obviously I don’t expect myself to build something like wayback machine from scratch). I needed to find a way to pull it off with my web development skills (& time budget). Fortunately, Git commit history came to mind. Git, a version control system for tracking file changes, was a perfect fit for what I wanted. GitHub should expose APIs that allow me to extract this data and visualise it in whatever way I want!

(It also tied in with another cool idea I’d been thinking about: a website that shows Git commit messages to reveal the developers' sufferings and efforts behind the scenes.)

-/\

(%)

($)

During the development process, those commits are like snapshots, capturing the site's growth. Each time I finished development for something, it felt pretty intimate looking back at all of them.

2/ Visual concept:

We had a hard time deciding on this aspect, but finally settled on using visual cues from polaroids. They fit perfectly with the concept of capturing and storing website snapshots. Additionally, from a personal perspective, Victoria mentioned that she always took polaroids at each of her shows and exhibitions.

[+]

[!]

Observing the polaroids, I wanted to elevate this polaroid concept to another level. I specifically took notice of the developing process of polaroids…

-/\

[=]

…It came to me that in digital space, there is a similar concept - the Progressive Loading method of JPEG! The internet nowadays is so fast that we often fail to notice all these artifacts operating in the background.

[+]

-/\

($)

(#)

By integrating this mechanism into the polaroids, I tried to draw parallel between the analog and digital, which has always been my point of interest.

3/ Final site:

Here is the JPEG progressive loading in action!

-/\

[=]

[!]

-/\

Here is the git commit history/website snapshot history visualiser!

-/\

(%)

-/\

Some screenshots:

(&)

-/\

($)

(#)

[=]

-/\

(%)

-/\

[=]

-/\

Tech Stack: Next.js web framework, curtainsjs + TextTexture.js for shader effects, Github REST/GraphQL API for fetching the way-back-machine thing, Vercel for server.

Bao Anh as designer & developer

This work is done for Victoria Hertel Velasco

Individual Credits

Bao Anh

Victoria Hertel Velasco

Vinamilk Freelancing Gigs

trămđốt platform

Other works

*-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --**-- ** .--. aa ._. uu .--. ** --*

(&)

-/\

[!]

Various development works I contributed to during the time in Tusitala, a creative storytelling/literary art company based in Singapore

Works at Tusitala

2024-02

[!]

(#)

Backend development for a website exploring the impacts of digital culture on creative expression, by Singapore Art Museum.

Open Systems website

2023-11

-/\

($)

[*]

A typeface designed with generative ligatures, complemented by a website that maximizes this concept.

Form & Agency exhibition website

2023-06

[=]

($)

[*]

My final year project, delving into the longlasting division between North and South Vietnam, intricately woven with my family's personal stories.

Nam Bắc Một Nhà

2023-01

(&)

(%)

[!]

A font that when moved up, it becomes uppercase; moved down, it's lowercase.

Variable-Case modular font

2023-02

[+]

-/\

($)

-/\

Visualization of human passion inside web developer tools.

Measure a machine’s heart

2023-05

**********************************************************************************************************************************

--^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~---^~-----^~--_-~----^~~--_---^~-

-/\

Site is built on Next.js with Tailwind CSS. CMS is from Notion API with react-notion-render ↗︎ by @9gustin for data rendering and upload-notion-images-to-cloudinary ↗︎ by @guillermodlpa for hosting images form Notion to Cloudinary. You can view the database on Notion here notion link ↗︎. Other dependencies include Prisma + PostgreSQL, Framer Motion, probe-image-size, seedrandom, react-lazy-load, ... See the Github repository of the site here github link ↗︎.

Typeface is Alegreya ↗︎ designed by Juan Pablo del Peral, Huerta Tipográfica. Mono typeface is Select Mono ↗︎ designed by MICHAEL McMASTER.

The idea of the site can be observed via the 3D View of the developer tool of Microsoft Edge. Inspect the site to see.

08/2019 →05/2023 (expected)	LASALLE COLLEGE OF THE ARTS Singapore Diploma in Design for Communication and Experiences For the AY 2021 - 2022, I take a gap year to return to my hometown, Vietnam. I will be coming back to Singapore this August 2022 to resume my study.
09/2016 →05/2019	HIGHSCHOOL FOR THE GIFTED—VNUHCM Vietnam High School Diploma

08/2022 →10/2022	PRACTICE THEORY Graphic Design Intern – Communication & Visual Designer for the Singapore-based creative studio
07/2021 →12/2021	THE LAB SAIGON Junior Graphic Designer – Communication & Visual Designer for the Saigon-based creative agency
05/2019	INTEL PRODUCTS VIETNAM Independent Freelance Illustrator – Stage Background Illustrator for the company’s year-end event.
2017 →Now	SMALL MEDIUM ENTERPRISES Freelancer in Graphic Design – Responsible for the visual images, graphics, illustrations and concepts for clients’ needs.

07/2022	D&AD New Blood Academy – Participant.
01/2022 →03/2022	Google Developer Solution Challenge 2022 – Participant.
09/2021 →04/2022	Google Developer Student Club - UIT – Development team.
05/2021 →10/2021	Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts. – Graphic Design Consultation.
10/2020 →01/2021	Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam. – Website Development, Graphic Design.
10/2017 →01/2018	Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues. – Graphic Design, Illustration.
08/2017 →08/2018	Project Sugar—a non-profit student-run organisation dedicated to underprivileged children – Graphic Design, Illustration, Art Direction.

2022	D&AD NEW BLOOD YELLOW PENCIL – Awarded 2022 Yellow Pencil by D&AD New Blood for the entry Duolingo: Non-fungible Efforts.
2021	RED DOT JUNIOR AWARD – Awarded “Red Dot Junior Award” under Red Dot Award: Brands & Communication Design by Red Dot Award in 2021.
2021	CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67 – Awarded “Certificate of Typographic Excellence” in TDC67 by Type Directors Club and will be included in the Annual of the Type Directors Club, The World’s Best Typography.
2020	LASALLE SCHOLARSHIP 2020-2021 – Awarded LASALLE Scholarship 2020–2021 to cover my tuition fee for my great performance at LASALLE College of the Arts.
2019	LASALLE TUITION GRANT – Awarded 60% merit-based tuition grant for my tuition fee in the diploma at LASALLE College of the Arts.

1/ Website concept:

2/ Visual concept:

3/ Final site:

Individual Credits

Previous

Next

Other works

Works at Tusitala

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

Variable-Case modular font

Measure a machine’s heart

LASALLE COLLEGE OF THE ARTS

HIGHSCHOOL FOR THE GIFTED—VNUHCM

PRACTICE THEORY

THE LAB SAIGON

INTEL PRODUCTS VIETNAM

SMALL MEDIUM ENTERPRISES

– Proficient with the following Digital Softwares:

– Familiar with the following Digital Softwares:

– Technical Skills:

D&AD New Blood Academy

Google Developer Solution Challenge 2022

Google Developer Student Club - UIT

Project Vietnamme—a non-profit organisation dedicated to the relationship of young Vietnamese and the Arts.

Vietnamme Magazine—magazine.vietnamme.me, an online magazine dedicated to the contemporary arts in Vietnam.

Human Library Vietnam—a non-profit organisation dedicated to raising awareness to societal issues.

Project Sugar—a non-profit student-run organisation dedicated to underprivileged children

D&AD NEW BLOOD YELLOW PENCIL

RED DOT JUNIOR AWARD

CERTIFICATE OF TYPOGRAPHIC EXCELLENCE TDC67

LASALLE SCHOLARSHIP 2020-2021

LASALLE TUITION GRANT