Michael V. ColiannaAuthor / Web Developer

HCAI LLC

A full site with information, multi-category blog, and HIPAA-compliant forms for a company focused on LGBTQIA+ health.

The HCAI homepage viewed on a desktop web browser. It shows off the rainbow gradient overlay efffect and two CTAs.

This is a site that I helped develop for a Cronin client with a dedicated front-end person. The front-end person built the basic HTML structure prototypes and did the initial styling, and then I went through to hook up the backend/interactive front-end portions. The site's content is managed via Storyblok and delivered using SSG in the Nuxt framework. The client makes use of some forms that require HIPAA compliance so those are handled by the Kwesforms service.

A section as viewed on a desktop browser, showing a headline, "eyebrow" text, and three information cards for medical providers.

This site is a good example of my ability to reduce a design to reusable components. There are three main "cards" used in the design which, at a glance, look like separate elements – but, I recognized they all used common elements with some slight differences: Some have icons, some have images, some are links, some are just presentational. A sole "Card" component wraps those elements, and depending on the properties passed it creates the corresponding display item.

Two sections as viewed on a mobile browser, showing a headline/copy/cta, and a block with an alternate use of the cards for provided services (the cards don't use images).

Storyblok's component-based methodology suited this client's site perfectly. I built all the necessary components in the CMS and they provide an easy-to-setup plugin for Nuxt to retrieve & render the content. (To see an example of Storyblok, check out the page for my wife's website.)

The main menu expanded, showing a submenu expanded as well, viewed on a mobile browser and showing how the menu pushes the content down instead of overlaying.

The code for the header SFC, featuring a note about an announcement SFC's that's used in concert with it, and showing the click-away handler.

This site also provided a more complex menu than the ones I've built for my personal projects, but which was also easy to build thanks to Vue/Nuxt.

A JSON file containing definitions for a dynamic form that makes use of the Kwesforms service.

The setup script for a multi-step form, showing how listeners are added to track status & handle displaying errors.

The forms proved an interesting challenge, as we needed a service that was easy to integrate into a modern framework, but which offered customization and HIPAA compliance. When we settled on Kwesforms, it was incredibly easy to implement for the regular forms: Since Kwesforms doesn't require you to make any data structure on their side, we created JSON files to define the structure, then created components for the different fields. We then created a wrapper for a multi-step form that kept track of progress.

Not pictured: The site has a news/events/blog section with complex filtering and article display. This was another area where, despite those different types of articles looking different, I found the similarities and made one SFC to handle displaying them.