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

(&)

(%)

($)

-/\

Works at Tusitala

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

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

(&)

-/\

[!]

Role

Development,

Design,

Visual Communication,

UI/UX,

Website,

Digital tool.

Date

Theme

Context

Karaoke Poetry

A participatory, choose-your-own-ending poetry reading or interactive fiction game

This experience invites a duo to engage with the poem by taking turns reading lines into a microphone, akin to a karaoke setup. Throughout the different scenes, participants will encounter a range of aural and interactive elements, both digital and physical, interspersed throughout the performance.

($)

[*]

[=]

-/\

(&)

($)

(#)

Below is a work-in-progress version of the online reading experience

-/\

(%)

($)

a glimpse into an in-development of the digital experience

I took on the task of making 3D Chinese character backgrounds using React Three Fiber, a React renderer for THREE.js. It turned out to be more complex than I thought because there isn't much support for creating this kind of extruded text in THREE.js. Instead of just loading a font file and passing in the text, I had to convert the font file into a .JSON format, which made the file heavier compared to standard .otf or .ttf fonts. This meant I had to be selective about which Chinese characters to include, to ensure optimal performance.

[+]

[!]

-/\

[=]

[+]

-/\

($)

(#)

As expected, such rotating animation above is pretty tricky as there is no ready-made solution. I had to resort to a hack, which basically involved readjusting the geometry’s center after each React rerender. This way, I could keep the front side stayed put while the back side did all the moving to give the illusion of rotation.

-/\

[=]

[!]

-/\

(%)

-/\

Besides, I also did the QR code page, in which people will scan the QR code to answer some questions and get assigned their role number for the poem reading. It was also my first time using WebSocket to transfer data. To enhance security and prevent external interference, I implemented session IDs to ensure each session had a unique URL.

(&)

-/\

($)

(#)

Souvenirs

A location-based AR experience at Fort Canning Park

This experience invites people to explore Fort Canning Park and uncover hidden AR secrets along the way!

Some of the screenshots from the AR web below:

[=]

-/\

(%)

-/\

[=]

-/\

One of the interesting thing I did was creating this raindrop scene that changes based on the user’s camera angle. When the camera points toward the sky, raindrops appear on the screen gradually.

[+]

-/\

This was also my first time trying to integrate GLSL shaders to perform some post-processing effect. All of this was so new to me. To pull out this raindrop shader, luckily I found a piece on Shadertoy https://www.shadertoy.com/view/ltffzl - Heartfelt by BigWIngs, which was beautifully done! I carefully read through the code but didn't fully understand it 😥. GLSL operates on a level that's still a bit beyond me. So, I ended up copying the code and tweaking some arguments to see what triggers what.

-/\

[!]

[*]

This is the final composite scene, the whole visibility will only be toggled on once the user scans the nearby standing poster.

-/\

(%)

[!]

Here are some images of me conducting on-site testing in nature! Remote development of AR can often miss the mark, so hands-on testing is crucial.

(&)

(%)

($)

-/\

($)

(#)

Company Website

The site is still in progress

Bảo Anh as intern developer

Vaibhav Sidapara as lead developer

Foler as UI/UX designer

Christine as director + publisher

Michelle Lee as project manager

Works are done for Tusitala

Individual Credits

Group Credits

Tusitala, SG

Kasper Florio - Atypical Swiss | Visual Analysis

Vinamilk Freelancing Gigs

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 .--. ** --*

(&)

-/\

[!]

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.

Victoria Hertel Velasco website

2023-11

[!]

(#)

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

--^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~---^~-----^~--Wait a bit-^~~--_---^~-

(%)

($)

Waiting...

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

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

-/\

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.

(&)

(%)

($)

-/\

Works at Tusitala

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

(&)

-/\

[!]

Role

Development,

Design,

Visual Communication,

UI/UX,

Website,

Digital tool.

Date

Theme

Context

Karaoke Poetry

A participatory, choose-your-own-ending poetry reading or interactive fiction game

($)

[*]

[=]

-/\

(&)

($)

(#)

Below is a work-in-progress version of the online reading experience

-/\

(%)

($)

a glimpse into an in-development of the digital experience

[+]

[!]

-/\

[=]

[+]

-/\

($)

(#)

-/\

[=]

[!]

-/\

(%)

-/\

(&)

-/\

($)

(#)

Souvenirs

A location-based AR experience at Fort Canning Park

This experience invites people to explore Fort Canning Park and uncover hidden AR secrets along the way!

Some of the screenshots from the AR web below:

[=]

-/\

(%)

-/\

[=]

-/\

One of the interesting thing I did was creating this raindrop scene that changes based on the user’s camera angle. When the camera points toward the sky, raindrops appear on the screen gradually.

[+]

-/\

[!]

[*]

This is the final composite scene, the whole visibility will only be toggled on once the user scans the nearby standing poster.

-/\

(%)

[!]

Here are some images of me conducting on-site testing in nature! Remote development of AR can often miss the mark, so hands-on testing is crucial.

(&)

(%)

($)

-/\

($)

(#)

Company Website

The site is still in progress

Bảo Anh as intern developer

Vaibhav Sidapara as lead developer

Foler as UI/UX designer

Christine as director + publisher

Michelle Lee as project manager

Works are done for Tusitala

Individual Credits

Group Credits

Tusitala, SG

Kasper Florio - Atypical Swiss | Visual Analysis

Vinamilk Freelancing Gigs

Other works

(&)

-/\

[!]

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.

Victoria Hertel Velasco website

2023-11

[!]

(#)

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

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.

Karaoke Poetry

Souvenirs

Company Website

Individual Credits

Group Credits

Previous

Next

Other works

Victoria Hertel Velasco website

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

Karaoke Poetry

Souvenirs

Company Website

Individual Credits

Group Credits

Previous

Next

Other works

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

Variable-Case modular font

Measure a machine’s heart