HTPMN

HowToPronounceMyName.com was the first site I built.

The website is hosted on Netlify and programmed in HTML, CSS and JavaScript. Photography of portraits, web design and videography done by me.

Uses the AOS library for fly-in animations.

Features

Clickable portraits with sound

The portrait section has floating bubbles that tell the user to tap on them and turn their sound on, based on my observation of how users interacted with the website.

In addition, any user that clicks on a portrait will hear a sound and the black and white image will turn into a colour image, something that’s programmed in CSS using a transition and an image modifier.

Video tutorial

I filmed a video tutorial and integrated it into the website. Using some CSS padding hacks, the video will stay in its 16:9 ratio. The code is below:

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	width:100%;
	box-shadow:0 4px 68px 0 rgba(0, 0, 0, 0.5), 0 6px 68px 0 rgba(0, 0, 0, 0.5);
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-size-limiter {
	display:flex;
	width: 90%;
	padding: 40px;
	min-width: 300px;
	max-width: 1280px;
}

Web design elements