barrd NET

Services Provided

An in house production, used as a test bed for concept ideas. Hosted on Netlify with a public GitHub Repo.

Project Details

I have long had an interest in Bauhaus design, so I decided to give myself a challenge and create three different layouts for Desktop, Tablet and Mobile. This is now an experimental home for my social media links. All images are SVG that contain text enabling me to manipulate with granular control their length to allow for a responsive environment.

Fun Stuff and Challenges

The original plan was to use a fancier font for the larger text using the JavaScript library fittext.js to expand the text to fully fit a container. However this idea quickly failed as adding additional CSS to position the elements caused the JS to error. I switched to using macSVG for creating text based SVG headers and whilst not a perfect solution did actually get me out of a pickle.

Head over to the site and try it out in the three different layout modes – Desktop, Tablet and Mobile. If you encounter any issues, design, accessibility or printing please let me know.