I loved img.modem.studio and wanted to make my own improved version that met the following criteria:
- built with React
- better ui, ux
- included image sources (for verifying public domain license)
- more content
- better content, higher res images
git clone https://github.com/jckfa/img.silly.graphics.git
mkdir imagesin the root dir and put some images in it
(A) I have a folder named src.silly.graphics that contains all of my images. I push it up to my server via a simple post-receive git hook and use that location as the web folder for imgix. (B) I have that folder symlinked to the root of this repo, img.silly.graphics. When I run
exif.js will extract exif data from all of the images in the symlinked folder and output it as manifest.js (hidden by git)—this file is just an array of objects that I can then access throughout my app—for example, constructing an image src link with the imgix component and the image's extracted filename. (C) For image source links, I have to edit each image's exif data manually—I use ImageExifEditorFree (app store) for that.
- built with create-react-app using styled-components
- images processed with imgix
- served with nginx (see configuration)
- hosted with digital ocean
- Modem Studio—I was heavily inspired by the art direction and the general layout of img.modem.studio.
- Dan Eden—I'm using
exif.jsfrom photos.daneden.me to extract exif data from the images. This automated step in the build process does the tedious heavy lifting.
- improve performance (currently slow as shit)
- use react-waypoint over lazyloading
- add zooming feature
- customize webfont
- improve images (restoration, cropping, color correction)