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

(&)

(%)

($)

-/\

Personal website 2022

My first personal website ever!

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

(&)

-/\

[!]

Role

Project Direction,

Development,

Design,

UI/UX,

Website,

Experimental.

Date

Theme

Context

Visit the vanghoa.github.io to see the website.

Take a look at the github repository.

This marked my first time developing a website entirely from scratch, without the use of plugins or web-building tools. I hand-coded the site using only plain HTML, CSS, and vanilla JavaScript, then slapped it up on Github Pages as a static website. All that stuff I'd been accumulating from my past projects, from Semplice, from Webflow, from Javascriptinfo and more, it all clicked into place. This experience was like connecting the dots and seeing my knowledge come to life. Plus, it wasn't just about making sense of what I already knew – I got to build more on top of it during the process. Amazing!

($)

[*]

The coolest feature of the website has to be the navigation bar that encircles all four sides of the page. It's like a window frame or an old-school television, and everything unfolds in the center, where all the information is displayed. The purpose of this website is to serve as a portfolio, a place where I can showcase all my previous projects. That's why the navigation bar is loaded with tabs for each project, making it super easy to find and explore. Other things like an "About Me" section, additional info, and my resume will all be conveniently tucked into the home page.

[=]

-/\

Each project tab on hover will toggle down a preview of the corresponding project. During this interaction, the styling of the window frame is altered to create the illusion that you're looking in a different direction. Achieving this smooth transition between the various grid and flexbox elements took me about a week of CSS work, but the result was worth the effort.

(&)

($)

(#)

-/\

(%)

($)

[+]

[!]

-/\

[=]

In the top right corner, there's a button that allows users to filter the projects by various categories. However, there was initially a problem with this interaction. Because it involved an animation created through DOM manipulation with JavaScript rather than CSS, clicking multiple times in quick succession would interrupt the ongoing animation and potentially break the navigation bar.

To solve this issue, I had to dive into various Stack Overflow questions and ultimately found a solution that utilized Promises to cancel previous animations. Now, when thinking back, I realized this mechanism is somewhat similar to the AbortController web API. Anyway, from that point, I got to know more about the concepts of synchronous vs asynchronous operations in Javascript.

[+]

-/\

($)

(#)

-/\

[=]

[!]

-/\

When I was building this site, I really wanted to have smooth transitions between pages. But here's the thing: I thought it was impossible because when you click on a link (using the <a> tag), it refreshes the whole site, and there's no room for cool animations in between. So, my solution was to turn the entire site into a single-page site. But that created a new problem: how to keep a clean, human-readable file and folder structure instead of just dumping everything into one giant HTML file.

Here's how my folder structure looked back then, with each HTML file tucked away in its own folder, along with all the assets like images and stuff.

-/\

(%)

-/\

This prompted me to turn to using <iframe> to display other HTML within another HTML while keeping the production development neat and hassle-free. It did come with some limitations in terms of transition effects, but it was sufficient for creating the window-slide-in animation I had in mind.

I mentioned earlier that I didn't use any external plugins apart from vanilla JS, but that wasn't entirely accurate. I did incorporate a JavaScript library called Lodash, mainly for its debounce function. This function helped in delaying the execution of the resize event listener. Because the responsiveness of the navbar was achieved through JavaScript rather than CSS media queries, I needed to use this to prevent unnecessary executions when users resized their screens.

(&)

-/\

($)

(#)

It's worth mentioning that I organized all the project information into a single item.json file and leveraged JavaScript to dynamically generate the navigation bar on the client-side. Back then, I didn't even know it was called client-side rendering, but it felt like a smart way to set things up for easier future maintenance.

[=]

-/\

I even went to great length to create instructions using CLI PowerShell to update new projects.

(%)

-/\

# Instruction to update portfolio:

# add 1 to item.json

$toAdd = @"

[

{

'name' : 'BI2P2',

'date' : '8/2021 - 10/2021',

'field' : [

{

'name' : 'Speculative',

'class' : 'spcl'

{

'name' : 'Website development',

'class' : 'dg_pro'

{

'name' : '3D design',

'class' : ''

}

'description' : 'Development of a fictional markup language systems, like HTML or XML but for organising, transporting and constructing elements in the physical world',

'soon' : false

}

]

$a = Get-Content 'D:\CODE\vanghoa.github.io\item.json' -raw | ConvertFrom-Json

$a += (ConvertFrom-Json -InputObject $toAdd)

$a | ConvertTo-Json -depth 32| set-content 'D:\CODE\vanghoa.github.io\item.json'

}

# add thumbnails (change the number $a) prepare 1 thumbnail img each project:

$a = 1

mkdir thumbnail

mkdir border

mkdir home

Get-ChildItem -File | ForEach-Object {

magick mogrify -format jpg $_

magick mogrify -resize 200x200> -quality 100 -path ./border "$($_.Basename).jpg"

magick mogrify -resize 900x900> -quality 100 -path ./home "$($_.Basename).jpg"

magick mogrify -resize 300x300> -quality 100 -path ./thumbnail "$($_.Basename).jpg"

cd border

Rename-item "$($_.Basename).jpg" -NewName "$($a).jpg"

cd ../thumbnail

Rename-item "$($_.Basename).jpg" -NewName "$($a).jpg"

cd ../home

Rename-item "$($_.Basename).jpg" -NewName "$($a).jpg"

cd ..

if ($_.extension -ne ".jpg") {

Remove-Item $_

}

Remove-Item "$($_.Basename).jpg"

$a++

}

cd border

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=95 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=200 *.jpg --out-dir=./

cd ../thumbnail

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=95 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=200 *.jpg --out-dir=./

cd ../home

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=95 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=200 *.jpg --out-dir=./

cd ..

}

# add project_pages folder image

mkdir out

magick mogrify -format jpg -resize 1700x> -quality 100 -path out *

Get-ChildItem -File | ForEach-Object {

Remove-Item $_

}

cd out

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=95 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=200 *.jpg --out-dir=./

}

# edit file html

After I had wrapped everything up, I showed it to my friends, and they didn't hesitate to give me some critical feedback. It stung a bit at first, but I realized it's okay to receive negative feedback. I got to improvise by pulling out a welcome screen with instructions on how the site works. I think that was the best I could do because I really didn’t want to change the navbar mechanism at all.

-/\

[=]

-/\

[+]

-/\

[!]

[*]

-/\

(%)

[!]

These are all the scripts I used to minify all my assets like images and videos. For videos, I uploaded them to vimeo instead of self-hosting (for obvious reasons)

(&)

(%)

($)

-/\

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=95 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=200 *.jpg --out-dir=./out

imagemin * --plugin.pngquant.speed=1 --plugin.pngquant.quality=0.9 --plugin.pngquant.quality=0.9 *.png --out-dir=./out

foreach ($file in Get-ChildItem) { cwebp -q 100 $file -o otoke.webp }

magick mogrify -resize 1700x> -quality 100 -path out *.jpg

magick mogrify -format jpg *.jpeg

imagemin * --plugin.mozjpeg.progressive=true --plugin.mozjpeg.max=50 --plugin.mozjpeg.stripAll=true --plugin.mozjpeg.size=50 *.jpg --out-dir=./out

for %i in (*.MOV) do ffmpeg -i "%i" "%~ni.webm"

These scripts were my way of minifying my CSS and JS files. Back in the day, I was a bit psychopath with optimizing everything to be as lightweight as possible. It's like I had a mission to shed every unnecessary byte from my code.

($)

(#)

cleancss -o style_min.css style.css

terser scripts/script_start.js --compress --mangle --output scripts/script_start_min.js

terser scripts/script_end.js --compress --mangle --output scripts/script_end_min.js

}

So, after I wrapped up the project, I was feeling pretty good about my web development skills. I had built a cool portfolio site from scratch, and it looked awesome. But here's the thing: the more I used it and wanted to add new projects, the more I realized that maintaining it was a bit of a headache.

Every time I wanted to update the site with a new project or make some changes, I had to dig into the code and figure out how everything was put together. The code had gotten pretty complex, especially with those dynamic project tabs and transitions. So even small updates turned into a big puzzle.

I'd find myself going back to the code, trying to remember how I'd set things up, and making sure my changes wouldn't break anything. From running all the scripts to update my images, uploading some videos to preparing an HTML file, it was like a little project every time I wanted to update my portfolio. It made me realize that I needed a more user-friendly and efficient way to manage my site in the long run. I think that's why people use frameworks like React and customizable CMS solutions to handle these things more smoothly. This experience taught me that creating a site is one thing, but making it easy to update and maintain is just as important.

Bảo Anh as UI/UX designer and web developer

Big thanks to Stack Overflow for all the solutions to my problems

Individual Credits

Bao Anh

Group Credits

Stack Overflow

Interface! Let’s go! zine

Miscellaneous

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

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

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

-/\

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.

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