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

(&)

(%)

($)

-/\

Measure a machine’s heart

Visualization of human passion inside web developer tools.

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

(&)

-/\

[!]

Role

Project Direction,

Development,

Experimental,

Visual Communication.

Date

Theme

Context

In this project, I gave a machine a kind of human-like passion and showed how that passion either ramps up (lights up) or fades away (burns out) depending on a few factors. The visual style is reminiscent of the data you see on an ECG machine, and all of that can be explored within the developer tools.

Visit the site here vanghoa.github.io/bonghoanho/.

Take a look at the github repository.

($)

[*]

1/ Concept – Web Development Tools:

The idea to utilize the developer tool as an output display had been on my mind for quite some time. In fact, the inspiration for this concept traces back to the moment I first came across Everest Pipkin's work–bodies.html at ifyoulived.org/bodies. This project replicates the human body within the console log, as the name suggests, and it left a lasting impression on me.

[=]

-/\

My project deals with similar concept of exposing the internal structure of digital entities with the Web Development Tools. I find that web browsers' built-in WebDev tools are the easiest for regular folks to use without having to install anything extra. Plus, since developers use them a lot, they're pretty like everyday objects and have the potential to be repurposed for things other than development, like art.

On top of using developer tools as an output display, I introduced an additional layer of concept by transforming the website interface into a remote control (resembling a TV or aircon remote control). This twist effectively switched the roles, with the front-end now operating as the back-end and the back-end serving as the front-end.

(&)

($)

(#)

2/ Concept – Light up and burn out one’s passion:

The remote control featured a variety of buttons, each with a specific function. Each button had a distinct effect on the 'passion' visualizer, simulating how one's enthusiasm and passion could either intensify (light up) or diminish (burn out). These effects were influenced by a range of internal and external factors, mirroring the complexities of real-life experiences where passion can fluctuate due to various influences.

-/\

(%)

($)

Visualizing in the Styles panel

[+]

[!]

Visualizing in the Console panel

-/\

[=]

Visualizing camera projection into ASCII art and microphone recording into the remote size (viewed inside the <head></head> tag), this was added when I tried to improve this project as a submission to HTML Review 2024

[+]

-/\

($)

(#)

3/ Development:

This website was a valuable learning experience for me in creating ASCII animations using JavaScript. I divided the animation process into three key parts: position calculation, mapping to an array, and rendering it on the DOM so that it can be displayed into the Element window of the Dev Tool.

Thank you Tường Vi Ng for reaching out to me for showing it at the Bông Hoa Nhỏ exhibition 2023 by Bắp Xào

Thank you Max & Shelby for allowing me to show and improve this work on HTML Review 2024.

Individual Credits

Bao Anh

Tường Vi Ng

Group Credits

Bắp Xào, VN

Variable-Case modular font

Google Translate: Uncut

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

[!]

(#)

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

--^~-----^~--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.

(&)

(%)

($)

-/\

Measure a machine’s heart

Visualization of human passion inside web developer tools.

(&)

-/\

[!]

Role

Project Direction,

Development,

Experimental,

Visual Communication.

Date

Theme

Context

Visit the site here vanghoa.github.io/bonghoanho/.

Take a look at the github repository.

($)

[*]

1/ Concept – Web Development Tools:

[=]

-/\

(&)

($)

(#)

2/ Concept – Light up and burn out one’s passion:

-/\

(%)

($)

Visualizing in the Styles panel

[+]

[!]

Visualizing in the Console panel

-/\

[=]

[+]

-/\

($)

(#)

3/ Development:

Thank you Tường Vi Ng for reaching out to me for showing it at the Bông Hoa Nhỏ exhibition 2023 by Bắp Xào

Thank you Max & Shelby for allowing me to show and improve this work on HTML Review 2024.

Individual Credits

Bao Anh

Tường Vi Ng

Group Credits

Bắp Xào, VN

Variable-Case modular font

Google Translate: Uncut

Other works

(&)

-/\

[!]

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

[!]

(#)

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

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/ Concept – Web Development Tools:

2/ Concept – Light up and burn out one’s passion:

3/ Development:

Individual Credits

Group Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

Variable-Case modular font

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

1/ Concept – Web Development Tools:

2/ Concept – Light up and burn out one’s passion:

3/ Development:

Individual Credits

Group Credits

Previous

Next

Other works

Works at Tusitala

Victoria Hertel Velasco website

Open Systems website

Form & Agency exhibition website

Nam Bắc Một Nhà

Variable-Case modular font