thalida
#Meta Timeline · January 2018 to August 2018

2018 v1: Space Calendar

Split-screen v3.1 this time featuring a space scene calendar

Screenshot of thalida.com: space calendar split version
Visit:
http://2018-v1.thalida.com
http://2018-01--2018-08.thalida.com

Source:
https://github.com/thalida/thalida.com/tree/v-2018-01--2018-08


Story

For #newwwyear I wanted to participate by updating my site. I’d intially planned to update the left side to be a live shape clock, but I abandoned that and moved towards a lowpoly space calendar and clock.

Design

Mock up of space calendar

Mock up of space calendar
For this version, I jumped directly to creating mockups, I didn’t sketch much beforehand. I outlined the entire content of the site, as well as my new look for the left side in Sketch.

How it works

The site was built using Vue and the DarkSky api. The lowpoly illustrations were repurposed from a prior version of the site, and were created using Maxon.

Date & Time

The position of the earth around the sun is tied to the current day of year, over the course of the year, the earth will rotate 360°around the sun. The moon and stars rotate around the earth based on the time of day, and the shadow on the earth is dependent on the current time.

The time used for the animations is based on your clock, so if you change the time you’ll see a different version of the site, or over the course of the day you can watch it animate.

Current Weather

Based on the current weather for your location, I add animated weather icons above earth. The weather data for your location is pulled using DarkSky, and your current IP address is used to get an approximation of your location.

Dynamic Text

Based on the number of times you’ve visited the site, I change the greeting message towards the bottom, for example if you visit a lot it’ll say:

Ah, a serial visitor… I’m Thalida.

The “title” text at the top of the space scene changes based on the time of day.