[{"data":1,"prerenderedAt":221},["ShallowReactive",2],{"blog-\u002Fblog\u002Fhello-world-vernaillen-dev":3,"blog-surround-\u002Fblog\u002Fhello-world-vernaillen-dev":210},{"id":4,"title":5,"author":6,"body":11,"date":198,"description":199,"extension":200,"image":201,"meta":203,"minRead":193,"navigation":204,"path":205,"seo":206,"social":207,"stem":208,"__hash__":209},"blog\u002Fblog\u002F996.hello-world-vernaillen-dev.md","Hello World Vernaillen.dev",{"name":7,"description":8,"avatar":9},"Wouter Vernaillen","Full Stack Developer",{"src":10,"alt":7},"\u002Fimages\u002Fwoutervernaillen.jpg",{"type":12,"value":13,"toc":191},"minimark",[14,19,31,34,37,41,50,59,62,66],[15,16,18],"h2",{"id":17},"sunset-of-vernaillencom","Sunset of Vernaillen.com",[20,21,22,23,30],"p",{},"To be honest the most important reason I wanted to make a new website is because ",[24,25,29],"a",{"href":26,"rel":27},"https:\u002F\u002Fwww.vernaillen.com",[28],"nofollow","Vernaillen.com"," was made in Liferay and I didn't want to keep a Liferay server running only for my personal website.",[20,32,33],{},"Anyway, 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.",[20,35,36],{},"I wanted to become more skilled in Vue.js anyway, so I decided to rewrite my website using Vue 3, Vite, Tailwind and Markdown:",[15,38,40],{"id":39},"hello-world-for-vernaillendev","Hello World for Vernaillen.dev",[20,42,43,44,49],{},"For the design I decided to use this ",[24,45,48],{"href":46,"rel":47},"https:\u002F\u002Ftailwindtemplates.co\u002Ftemplates\u002Fstartup",[28],"Startup Tailwind CSS Template",", cause I'm a developer, not a designer :)",[20,51,52,53,58],{},"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, ",[24,54,57],{"href":55,"rel":56},"https:\u002F\u002Fwww.anneleenvernaillen.com",[28],"Anneleen Vernaillen","), I thought the result was quite nice.",[20,60,61],{},"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 anyway.",[15,63,65],{"id":64},"website-features","Website Features",[67,68,69,95,104,123,132,135,138,151,159,167,175,183],"ul",{},[70,71,72,73,78,79,78,84,89,90],"li",{},"Built with ",[24,74,77],{"href":75,"rel":76},"https:\u002F\u002Fvuejs.org\u002F",[28],"Vue 3",", ",[24,80,83],{"href":81,"rel":82},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Ftypescript\u002Foverview.html",[28],"TypeScript",[24,85,88],{"href":86,"rel":87},"https:\u002F\u002Fvitejs.dev\u002F",[28],"Vite"," and ",[24,91,94],{"href":92,"rel":93},"https:\u002F\u002Ftailwindcss.com\u002F",[28],"Tailwind CSS",[70,96,97,98,103],{},"Static Site Generation with ",[24,99,102],{"href":100,"rel":101},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fvite-ssg",[28],"vite-ssg",", so search indexes can crawl the content",[70,105,106,107,112,113,89,118],{},"All content is created using ",[24,108,111],{"href":109,"rel":110},"https:\u002F\u002Fdaringfireball.net\u002Fprojects\u002Fmarkdown\u002F",[28],"Markdown"," and rendered with ",[24,114,117],{"href":115,"rel":116},"https:\u002F\u002Fgithub.com\u002Fantfu\u002Fvite-plugin-md",[28],"vite-plugin-md",[24,119,122],{"href":120,"rel":121},"https:\u002F\u002Fmarkdown-it.github.io\u002F",[28],"markdown-it",[70,124,125,126,131],{},"SVG support in Vue with ",[24,127,130],{"href":128,"rel":129},"https:\u002F\u002Fgithub.com\u002Fjpkleemans\u002Fvite-svg-loader",[28],"vite-svg-loader",", used for the background graphics",[70,133,134],{},"RSS & Atom for newsreaders",[70,136,137],{},"Dark and Light style",[70,139,140,145,146],{},[24,141,144],{"href":142,"rel":143},"https:\u002F\u002Ftonejs.github.io\u002F",[28],"Tone.js"," and audio visualisation with ",[24,147,150],{"href":148,"rel":149},"https:\u002F\u002Fvue-audiomotion-analyzer.dev\u002F",[28],"vue-audiomotion-analyzer",[70,152,153,158],{},[24,154,157],{"href":155,"rel":156},"https:\u002F\u002Fpinia.vuejs.org\u002F",[28],"Pinia"," is used to keep track of the audio player state",[70,160,161,162],{},"Automated deployments \u002F auto publishing on ",[24,163,166],{"href":164,"rel":165},"https:\u002F\u002Fwww.netlify.com\u002F",[28],"Netlify",[70,168,169,170],{},"Continous integration with ",[24,171,174],{"href":172,"rel":173},"https:\u002F\u002Fapp.circleci.com\u002Fpipelines\u002Fgithub\u002Fvernaillen\u002Fvernaillen.dev?filter=all",[28],"CircleCI",[70,176,177,178],{},"Code quality check with ",[24,179,182],{"href":180,"rel":181},"https:\u002F\u002Fsonarcloud.io\u002Fsummary\u002Fnew_code?id=vernaillen.dev",[28],"SonarCloud",[70,184,185,186],{},"Unit tests with ",[24,187,190],{"href":188,"rel":189},"https:\u002F\u002Fvitest.dev\u002F",[28],"vitest",{"title":192,"searchDepth":193,"depth":193,"links":194},"",2,[195,196,197],{"id":17,"depth":193,"text":18},{"id":39,"depth":193,"text":40},{"id":64,"depth":193,"text":65},"2022-11-06","Introducing a complete rewrite of the website for my freelance business, now built with Vue 3, Vite, Tailwind and Markdown","md",{"src":202},"\u002Fimages\u002Fblog\u002F996.hello-world\u002Fhello-world_dark.png",{},true,"\u002Fblog\u002Fhello-world-vernaillen-dev",{"title":5,"description":199},null,"blog\u002F996.hello-world-vernaillen-dev","wGe7tjISjobNDoLS1mkImEHD8hakLrMTiNikiDdK89c",[211,216],{"title":212,"path":213,"stem":214,"description":215,"children":-1},"Discovering Nuxt","\u002Fblog\u002Fdiscoveringnuxt","blog\u002F995.discoveringnuxt","After starting to learn Vue 3 a few years ago, I decided to continue the learning path to Nuxt 3",{"title":217,"path":218,"stem":219,"description":220,"children":-1},"Building a stronger personal brand","\u002Fblog\u002Fbuilding-a-stronger-personal-brand","blog\u002F997.building-a-stronger-personal-brand","The story behind the vernaillen.com website",1788334263750]