thalida.com

thalida.com

Status
In ProgressDesign Complete
Short Description

My portfolio, wiki, and blog;

Tags
metaportfolioblog
Website
Last Updated
April 29, 2023
Category
Project
Hidden
Featured

thalida.com

Powered by Notion & Super

image

A Notion-backed site

active:

Jan 2022 → Now

www:

Github → View Live →

 Resources

StyleguideComponents

💡Idea

For the next version of my domain, I wanted a site where I could easily add and edit content, a low-barrier way for me to provide updates on my work. After digging around, I came across Super and realized it was exactly what I needed.

👩🏾‍💻 Development

Overview

The site is hosted on Super, pulling content from a notion site. The day/night-mode theme switcher, and the “live” window on the homepage use Svelte. This was my first time developing with Svelte, and I found it perfect for injecting a small javascript component onto the page. My custom theme styles and javascript are deployed and hosted on Vercel (Super supports custom code).

Live Window

For this iteration of the Live Window, I switched to using the Open Weather API, in order to get the users location I’m basing it off of their ip address, which I fetch using IP Registry.

export async function fetchWeather($store) {
	// Partial version of this function, I've removed my caching logic
	await fetchLocation($store);
	
	const { lat, lng } = $store.location;
	const url = `https://api.openweathermap.org/data/2.5/weather?units=metric&lat=${lat}&lon=${lng}&appid=${OPEN_WEATHER_KEY}`;
	const { data } = await axios.get(url);
	$store.weather.current = {
	  ...data.weather[0],
	  temp: data.main.temp,
	};
	$store.weather.sunrise = data.sys.sunrise * 1000; // convert to milliseconds
	$store.weather.sunset = data.sys.sunset * 1000; // ^^
	$store.weather.lastFetched = Date.now();
	store.set($store);
	isDataFetched.set(true);
}

Deprecated Theme Switcher (Day/Night Mode)

29 April 2023 An update of Super added support for a built-in theme switcher that I’ve started using instead.

For the first time, I’ve added a day/night mode switcher to my site. Finally in the future! It’s not finalized yet (I still don’t account for user preferences) but otherwise it’s fully functional.

image

You can checkout the code and fork this theme switcher on codpen! https://codepen.io/thalida/pen/XWEVVaj

This theme switcher is a fork of https://codepen.io/sandeshsapkota/pen/xxVmMpe.

🎨 Design

Inspiration

Paper Sketches

image
image
image
image
image
image
image

Version History

Explore the past versions of thalida.com

Gallery

2 views

Gallery

Table

🦄⚡