Inspired by the 2020 Apple event

I liked the aesthetic of the advertisement for the iPhone 12 Pro that Apple did years ago. I wanted to remake it in HTML as much as I could, so I used this project to build a list of links to my social network profiles.

First, I wanted to get the colors of the sunrise from the video, so I went to a tool online, and uploaded a cropped shot of the sky to grab the colors from it to make a linear-gradient. I tweaked the results and set it up on the page.

In order to make the gradient image appear more filmic, I used the tool mentioned by CSS-Tricks to build an SVG file of noise for use as a mask-image in CSS.

I then went back to the video and captured a screenshot of the mountain range, tracing over the resulting image in Vectornator. I customized it to be wider and more varied, experimenting with horizon level, until I exported a final SVG that I then compressed in ImageOptim.

Finally, for the stars in the sky I went to NASA and browsed their image gallery until I found an appropriate photo of stars.

I then built the CSS with animations, filters, gradients, mask-images, and shadows to make a glimmering interface.

Check it out at this URL: https://dhepworth.github.io/social/