This is my personal Web site.
It includes a few of my software projects, some of my writing, and a whole lot of my spirit. It also includes seven high-quality, full-page illustrations, a children's book for adults, a hidden magic spell, and a personal blog.
This site does not use any blog templates, frameworks, or themes.
It was made with
The entry point is index.js. Control logic is split between React components and traditional classes, which determine location and handle many user events. Site data is in /data, media assets in /docs, and a dev server in /server.
Here are a few more interesting points:
This site was built around the idea of "theatrical Web design."
Timed animation sequences tell a story about the entry, exit, and use of major creative elements.
This caused the component state in App.jsx to be larger than expected, as functionally unrelated children (i.e., siblings) have to track animation sequences in order to join them. A move to React Hooks or Redux might condense this code.
A preloader for big images can be found in /helpers.
It uses a custom algorithm to summon full-screen illustrations when the site loads.
Images < 2880px in width are compressed at quality level 90, the rest at 50. The more highly compressed images are of roughly the same clarity as their less compressed siblings and file sizes increase at a roughly constant rate across the group. As a result, the algorithm skips from 1366px to >= 2880px in width when selecting full-screen images.
The transparent home-page image considers additional factors.
Data is stored in files that mix Markdown with front matter. Each sub-directory's index.js automatically groups these files into an array during the build process. Webpack converts the front matter to JSON and React handles the Markdown.
The name and bio on the home page pulse on the site's initial load.
While a nice, dramatic effect once, this animation grows tiresome over multiple loads.
As a result, the animation only runs on initial load or if the user hasn't visited for more than two weeks. This is achieved by storing a time stamp in the user's browser, i.e., in localStorage for the site's domain. The starting point as to how is here.
© 2019, James Abels LLC. All rights reserved. ∙ [email protected]