Site layout is made for desktop screens, 1080p or more!
Check back in fullscreen!
LiminalGFX.com
I've made this website in a few months using HTML, CSS and JS,
treating this tech stack as a rudimentary game engine -
I'd feed it assets and specify delivery and optimization.
treating this tech stack as a rudimentary game engine -
I'd feed it assets and specify delivery and optimization.
❶ Problem:
Social media sites are very restrictive in presentation features and have shady policies.
Website builders have lax policies but are either feature-bloated or feature-limited.
Functional
I needed a system that could do custom grid layouts, optimized media delivery and seamlessly blending text with visuals. Every platform I tested from WordPress to Wix to static site generators either lacked functionality or made it brutally hard to customize. Platforms like Artstation or Instagram not only lacked these options, but they also chopped and compressed the media.
The layout that you're looking at right now? NIGHTMARE to create in a builder. Absolute breeze to create in my custom framework. Mission accomplished.
Ethical
Companies' websites and platforms have rules and allowances that have to be accepted when you post there. I understand that, fair enough. You enrich their offer, they give you traffic. But with Artstation's debacle in the past years and Meta's announcements this year, it seems that people's work is getting composted for the AIs regardless, which I want no part of.
It's not that my work is so illustrious that it needs protecting, that's a popular/ successful artist problem- it's the principle.
I needed autonomy. I needed control over layout, over expression, form and design.
I had 2 choices: shut my face and accept the status quo- or do something about it.
Idea
I've already dabbled in webdesign a few times, and have 10+ years of game UI experience.
I get a kick from learning new things, especially technical. Can't be harder than NGUI/ uGUI.
Impetus
Josh Kaufman's book, The First 20 Hours has a great chapter about him building his own website.
Derek Sivers had a refreshing take in a conversation with Tim Ferriss. Spoiler: it's not that hard.
Reasoning
Dealing with Unity for the past 15 years making games, understanding technical stuff,
trying out solutions and debugging is second nature. Graphics are graphics, code is code.
❷ Solution:
Port my game UI knowledge to web design and create my own framework.
Incorporate libraries, systems and functions or build my own.
I like a good custom engine. I don't care as much if it's got the latest cutting edge tech, but I do care about how it feels and how it runs.
One small hiccup tho: I'm an artist, not a programmer.
The most I've ever coded was a "hello world" and a PC Speaker sound sequence in Turbo Pascal 6 when I was 10.
Luckily a portfolio website is just a ton of design with a smidge of functionality and some optimization. All well within my capabilities. Let's put down some base notions:
Essentials
Load under 4 seconds or bust.
Nice to haves
Irrelevant
Constraints
False start.
New tech, minimal research.
Ready-Fire-Aim. Frustration.
This is actually my fourth HTML/CSS website.
• First one was when I was 12 years old, the Macromedia Dreamweaver days.
• Second one was for Spirit Tactic in 2014, a rudimentary frontpage with links.
• Third one was in 2019 for Rift Frigate, a simple image gallery, embeds and links.
All of those were written in Notepad, Notepad++ for Rift. Yes, I am a dinosaur.
But this time, I resolved to get with the times and update the process.
Use an IDE instead of Notepad++. Use libraries instead of writing from 0. Don't type all the tags manually. Let frameworks do the heavy lifting.
Researched what's available in 2025 in static site generation. I've compared possible stacks and decided to use Hugo as the static site builder/ FrontMatter for CMS/ Tailwind CSS for styling/ GitHub Pages for hosting. Big BLUNDER.
Try again.
Plan ahead, wireframes, lists.
Build with basics. Add cautiously.
I went back to the ol' trusty w3schools and started brushing up on my basics. Just like I did when I was 12, just like I did when I was 28. Just a text editor, HTML CSS, and near-WYSIWYG low level control.
I struggled to keep it all HTML CSS, for fear of Javascript. I had no notion of JS, nor am I at all inclined to learn it. Thankfully, the AIs came along and showed me that if I describe the purposes, functionality, parameters, constraints and integrations well enough, I could get that JS functionality without having to figure out how to write it myself. Roadblock removed. Tecnologia!!
While I read the outputs and try to understand them, I have neither the desire, the need nor the time to learn proper Javascript, it's not my ballpark. Unless something breaks or tanks performance, "vibe coding" will have to do.
❸ LGFXTech 1.0:
HTML bones, CSS muscle, JS skin.
Few components, hard to break.
Fancybox5
Part of Fancyapps, hands-down the BEST-feeling lightbox library I could find.
Handles all the modals on this site and the photo and video galleries.
LGFX Grid
A fork of Roman Flössler's GridOverflow, a very robust CSS-only grid system.
Renamed some classes, removed effects and expanded aspect ratios and grid possibilities.
LGFX Comparison
An expansion of Fancybox's lightbox modal-
stacks 2 images and sweep between them with a slider.
LGFX Toolkit
A collection of Javascript functions and aides,
anything that couldn't be done with pure CSS.
⬢ SmoothScroll - mouse wheel acceleration, tries to emulate touch scrolling
⬢ Progress Bar - fixed progress bar at the bottom that also acts as a divider
⬢ Tooltip - a hover tooltip that can display text or images over the page
⬢ Section Highlighter - lights up buttons as you scroll between sections on the homepage
⬢ Overlay Icons - works in conjunction with LGFX Grid, allows you to place icons over grid items
⬢ Video Lazy Loading - sources video thumbnails where available, loads the full video on hover
HTML, CSS
Nothing too complex here, simple tags, a root.css file to keep the core classes together.
Kept components modular and used additive classes wherever possible. Kebab case.
Working in game development made me very sensitive to performance and optimization, I had to make sure this site feels snappy. Streamlined loading, good compression, LODs.
❹ WYSIWYG
100% of the media is uploaded by me so I get full control over what is displayed and how.
I did extensive research to find the most optimal and current formats for each media type.
Criteria for formats:
① Open formats preferred
② Compression/ quality ratio
③ Browser Compatibility
④ Ease of editing
⑤ Futureproof
WebP
The ultimate all-in-one image format for web at the moment.
Animation frames support, solid compression, great quality.
It's debateable whether it beats Jpeg in compression, it does outperform Png (transparent or not) and it absolutely whoops Gif/Apng in terms of animation. Most of my programs are compatible with it, and I can batch-process all of them at once.
MP4
Most widely-used video format for web right now as far as I know.
Great compression, great compatibility, and streaming support.
Runners-up were WebM and MKV. I've settled on MP4 for its widespread support and streaming, but I think I could have went either of 3 ways here. Good enough.
Batch processing
Before automation, I used ezgif.com for most image conversions as it's very intuitive.
I used Handbrake for video processing and converting all my GIFs to MP4s.
But now I had 13 years worth of media to cull, organize, rename and optimize.
I wasn't gonna drag-and-drop and edit each and every one of the suckers.
I needed something more powerful and scriptable, and good enough.
Enter Powershell7.
I already had it installed since I was dabbling with Hugo.
All I had to do is update ImageMagick and FFmpeg.
Using online documentation and Claude.ai, I cooked some scripts to run in Powershell7 to batch-process the media.
Here's a typical conversion process I used to crush the bulk of the non-hero images into decent fast-loading WebPs:
ACHTUNG!
READ THE CODE FIRST. Run the commands on copies of files, in isolated folders.
I'm not responsible or liable for whatever you do with these scripts.
If you overwrite your precious masters it's your own fault.
All fonts used on this website are under the SIL Open License.
Hand-picked from hundreds, there are my definitive cream-of-the-crop.
Inter
by Rasmus Andersson. Variable, has a lab page.
The best free font available now, not a single bad glyph.
Figtree
by Erik Kennedy. Also has a test lab.
Beautiful, geometric, fun, and variable to boot.
CalSans
by Mark Davis.
Bold, round and exquisitely kerned. Now has a full family.
JetBrainsMono
by P. Nurullin. My default VSCode and Notepad++ font.
Easy on the eyes and so smooth to read.
D-DIN Condensed
by Datto, based on Charles Nix's design.
Best condensed DIN alternative I could find.
❺ Deployed:
This website lives on a local work hard drive, has a Subversion repository on a different HDD,
and gets pushed to the server using Git.
I am using Cloud86 for hosting, a super cool provider.
❻ Feature complete:
I've managed to check all of the features I wanted.
I know how each component works. To recap:
✔️ Grid-aligned photo and video galleries.
✔️ Implemented an intuitive, snappy lightbox.
✔️ Added versatile fonts and styles.
✔️ Animated thumbnails.
✔️ Text/image tooltips.
✔️ Breathing background, buttons and borders.
✔️ Image comparison slider
✔️ Smooth Scrolling, Progress Bar.
✔️ Sticky header, breadcrumbs.
Known Issues:
Not responsive, doesn't scale well. I chose fullscreen layout over mobile-friendliness.
Might need to update Fancybox in the future.
Bottom line:
I'm quite happy with how everything looks and feels, and I can expand on this structure.
I built a solid set of skills, and I'm not putting my livelihood on show with a $40 template.
Who the hell has the patience and foresight to sink untold hours into making a custom portfolio site? Don't answer that.
Software:
