Website Colophon Cover

Website Colophon of 2024

Posted in:

Hello and welcome to my colophon.

What is a Colophon?

Let me Google that for you.

I. Introduction

As a web developer, this colophon serves to benchmark the current technologies I’m interested in and respectfully using in the final development of this portfolio. As of September, 2024 ~ below is a summary of the technologies that are being used to hoist this thang together.

II. How it Works

Primary Domain: viafoci.com
Subdomain #2: tech.viafoci.com

A.
Domain
viafoci.com

Generally speaking, viafoci.com is operating as a “holding” company to my primary domain spaces. It carries high level info about my services operating currently as a single-member LLC. It’s meant to serve the artist and technologist within me and to sell my self as straight forward as possible to the world. THE plan is to sell artwork as well as subscriptions for technical consulting & batched development hours on another “shop” sub-domain, offering purchasable packages for both “new/active” project development across certain reservable timelines, as well as post-launch “support” contracts across certain reservable timelines.

Hosting & Registrar

Vercel

I migrated the domain from Dreamhost to Vercel this year and setup web hosting aaaand the registrar for only $20 per yr (!) …. and I’ll tell you this – my current traffic can handle it. We shall see how Vercel does with scaling… For when that happens.

Vercel comes with pretty amazing DX, and I can push files from my local to the instance with a simple vercel --prod command in bash. Yee haw.

Frontend

Built in the MERN Stack.

a. Next.js
b. React
c. Tailwind
d. GSAP

Backend

TBH, the current “tech” sub-domain is a bit of a stomping ground. With that, it’s proudly using WordPress as a headless CMS, where I’m grabbing data from this subdomain that you are on (tech.viafoci.com) and using it in reference, on my primary domain (viafoci.com), via WPGraphQL – a nifty plugin that offers very easy-to-use plug and play API request data, being used in my Next.js JSX files via await fetch() request.

The portfolio “Case Studies” specifically… that is the work completed within the last decade, is data stored as Custom Post Types in WP, with default custom fields assigned in WordPress using

register_meta()*

and

'show in rest' => 'true'

to expose properly in the WordPress REST API and then requesting said data, inside the Next.js app. For it to work “proper” and get the CPT that “extra” custom data (ex: year of project, agency under contract with, title during project…),

I’m also using the register_graphql_field()*

function to ensure it’s exposed in the AJAX request.

Oh and it’s hard to say where this detail goes, but for a package manager,

I’m using PNPM in mini-favor currently to NPM

B.
Sub-Domain
tech.viafoci.com

Initially setup to be the “agency” side of my business, it’s now morphed to becoming more of a data store(age) space for password-protected, non-crawleable proposals as WP pages, random blog posts (like this one), and API calls (like as mentioned above under “Backend” for viafoci.com).

Built in LAMP Stack + teeny bit of MERN.

Hosting & Registrar

Hostinger

*I use Hostinger because their VPS options are incredibly cheap, though their data centers I recently realized are in Massachusetts an b/c I’m in Colorado ~ this can cause some miliseconds in lag time on page load… and minor delays… but as I said my traffic is light. As soon as my site is rocking in numbers and my small business begins to grow, I’ll switch to:

Kinsta

‘Cuz I LOVE them. Really I do.

Frontend & Backend

This website you are looking at is using the TwentyTwentyFour WordPress.org default theme, cloned, with a CI pipeline setup. It’s a pretty remarkable theme for about a gazillion reasons, but namely I built this site with hardly any code, in a FSE Theme that I’ve customized using the theme.json file. I’ve built only a couple building custom blocks (the testimonials carousel on my contact page). Blocks have a bit of “classic” nature, though I’m also using some using modern scaffolding tools, in recent relatively historical years of WP development & awesomeness. So.. this current site it really is quite the hodge podge, and a “staging” or even testing ground for this business.

Fair to note here, I’m also using the recently released Block Bindings API which I gotta say, is a percolating and insanely incredible addition to the already fantastic code base that wordpress.org is. Did I mention I’m a WordPress fangirl?

C.
Sub-Domain
shop.viafoci.com

more coming soon! Check back later…