Sunset of Vernaillen.com
To be honest the most important reason I wanted to make a new website is because Vernaillen.com was made in Liferay and I didn't want to keep a Liferay server running only for my personal website.
Also, my main focus as a freelance consultant is not on Liferay any more lately, but more on full stack development with Spring micro-services, Angular or Vue.js, as well as on DevOps with Kubernetes, Jenkins, Sonar, etc.
I wanted to become more skilled in Vue.js anyway, so I decided to rewrite my website using Vue 3, Vite, Tailwind and Markdown:
Hello World for Vernaillen.dev
For the design I decided to use this Startup Tailwind CSS Template, cause I'm a developer, not a designer
It was fun to port into the Vue app. And after changing the main colors to match my company branding and logo (design by my sister, Anneleen Vernaillen), I thought the result was quite nice.
Most of the fun for me was in learning the new features of Vue 3, learning how to use Vite and Tailwind, and create blog functionality based on markdown files.
The result is a website that is very easy to edit and publish content updates,cause as a developer I'm obviously familiar with git and markdown anway.
Website Features
- Built with Vue 3, TypeScript, Vite and Tailwind CSS
- Static Site Generation with vite-ssg, so search indexes can crawl the content
- All content is created using Markdown and rendered with vite-plugin-md and markdown-it
- SVG support in Vue with vite-svg-loader, used for the background graphics
- RSS & Atom for newreaders. And yes, I still use a newsreader myself too ;)
- Dark and Light style:
- Tone.js and audio visualisation with vue-audiomotion-analyzer:
- Pinia is used to keep track of the audio player state
- Automated deployments / auto publishing on Netlify
- Continous integration with CircleCI
- Code quality check with SonarCloud
- Unit tests with vitest
- Edit: I'm currently also testing a custom Gallery functionality, which just loads all images in a given folder and allows view them using vue-easy-lightbox. Here's the test page
