Hi, we’re a.d.c
Axol Design Collective

Well, actually… we’re Begin, and this is an example application built with our HTML first framework, Enhance. Apologies for any confusion.

What is this?

We built this app to demonstrate how Enhance can be used to build out a portfolio style website, using well known web standards like HTML and CSS (and just a sprinkling of JavaScript).

Just like those web standards, Enhance is designed to be easy to approach, but offers a lot of depth for those who really want to dive in. For this example, we started with some simple layouts, backed with Enhance’s built in fluid type and space scales and utility class based styling system. Then we added some subtle but engaging interactions, like a grid of tiles that change size and opacity when hovered, a horizontally scrolling image gallery with CSS scroll snapping baked in, and an image grid that displays large scale images in lightboxes when clicked. Of course, everything is fully responsive, too!

No JavaScript required

If you happen to not have JavaScript enabled (or if, for whatever reason, your browser didn’t get around to parsing our JavaScript), no problem. Because Enhance prioritizes Server Side Rendering (SSR), every page’s content is fully accessible without JavaScript. And thanks to a few progressive enhancement strategies, the project is still fully functional without JavaScript too (although you may notice some interactions and animations falling back to a less flashy pattern as a result).

Try it out!

Despite all the action going on under the hood of this project, you should find the code behind it easy to follow (and easy to adjust, if you feel like making changes). If you'd like to try that out, feel free to explore or clone the git repo! You’re free to use this project’s code in whatever way you like, including using it to build out your own portfolio website. (Attribution is appreciated, but not required.)

And of course, if you’re not familiar with Enhance, check out our ludicrously fun landing page and our docs! If you’re looking for more support, or if you have any questions, you can also join us on Discord.

(Psst… if you’re hungry for more of a guided tour, we wrote a deep dive article on this project over on our blog!)