A fun little personal site, live at (https://curious.kim).
Node 18+ for the application. Bash 4.4+ to process photos.
- Install dependencies.
$ npm install
- Set up Git hooks.
$ npm run prepare
- Populate
.env.local
with the appropriate env variables (see.env.template
for reference). - Start the development server.
$ npm run dev
- Navigate to the application in your browser at (https://localhost:3000).
Art can be created and edited using a few different tools:
- Use Linearity Curve to draw vector art.
- Prompt a multimodal AI tool to create a "line drawing of X", asking it to ensure the drawing is minimalistic and the object is facing straight on.
- Use remove.bg to clear the background of generated images, then something like this vectorizer and this SVG tool to convert and minify SVGs.
Photos are processed using ExifTool and ImageMagick.
Install via brew install exiftool
and brew install imagemagick
on Mac.
To organize the photo library, add photos to photos/
then run bash script/organize_photos.sh
.
Only photos with the .jpg
extension are supported.
Commit and push the changes to update them in the application.
To check whether all photos are properly organized, run bash script/organize_photos.sh -c
.
Deploy this application using Vercel, and point that application to the primary domain.
Photos are hosted separately using GitHub Pages.
Set up the Pages repository to point at https://static.<domain>
.
Then set the hostname under the NEXT_PUBLIC_PHOTOS_HOSTNAME
environment variable.
The code includes logic to track user events in Google Analytics and Google Tag Manager.
First, set up Google Analytics.
Get the Measurement ID for the property and make sure it's set in src/lib/analytics.ts
.
Then, set up Google Tag Manager.
- Get the workspace's Tag Manager ID and make sure it's set in
src/lib/analytics.ts
. - Set up User-Defined Data Layer Variables for the
AnalyticsVariable
values insrc/lib/analytics.ts
. - Set up Custom Event Triggers based on the
AnalyticsEvent
names insrc/lib/analytics.ts
, applying custom conditions if needed. - Finally, set up Google Analytics GA4 Event Tags on the Triggers defined above. Include Event Parameters to send over variable values for tracking as well.