5/21/2020 A star is born ← Eldin's Blog

 EldinZaimovic  HOME RESUME SERVICES PORTFOLIO BLOG CONTACT 

A star is born

14.6.2019

New Domain
Recently I got one of those new .space domain names so I could restart my website with a fresh name and look. I bought eldin.space.

New Site
I have been wanting to do a major overhaul of my personal website for a long time. I also didn't want to just redo it either. I wanted to learn something
new while building it. I have been interested in learning a front-end JavaScript framework for a while and Vue.js had caught my attention. Its template

https://eldin.space/blog/a-star-is-born 1/3
5/21/2020 A star is born ← Eldin's Blog

syntax and component structure was easy for me to understand. Their superb documentation made me feel like I could learn a lot about a current
front-end framework without getting a headache. I have worked with Vue.js for couple of months and now I want to build my website and Blog.

What do I have there?

Theme (dark/light)
Responsiveness (mobile/tablet/desktop)
Animations (a little)
Blog (with Storyblok)
Resume, Portfolio, Contact.

Vuetify.js
There are many options for making a wesite good-looking, from hand-writing your css, using a css framework, or since I already use Vue.js, using a vue
components library, which has the added bene t of adding functionality. There are various vue component libraries, one of the most promising is
Vuetify.js which implements google's material design and looks almost native in android phones.

Animate.css
Cool animations and clever microinteractions are all the rage right now. However, most developers know how long and tedious it can be to constantly
write and rewrite CSS animations. It can start to feel like you're reinventing the wheel. So I used Animate.css. With Animate.css, you can easily animate
any element.

Blog with Storyblok

Storyblok + Vue.js = a perfect match

Storyblok is very powerful and provides all the basic features I’d expect from a CMS, out of the box. Furthermore it is possible to extend its
functionality by adding custom eld type plugins, which are basically regular Vue.js components. The pricing is amazing. I use free plan and it works
for me.

vue-meta
As much as developers might like to ignore it, SEO is still a crucial part of any website or web app. Applications and sites that are not easily indexed by
search engines or poorly optimized will end up hidden behind pages and pages of search results. I don’t want that to happen to my project, so I use
vue-meta. vue-meta is a Vue.js plugin that allows you to manage your app's metadata, much like react-helmet does for React. However, instead of
setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for
each top-level view as well as coupling metadata directly to deeply nested sub components for more maintainable code.

https://eldin.space/blog/a-star-is-born 2/3
5/21/2020 A star is born ← Eldin's Blog

Hosting with Netlify

While I had started building the website, I still needed a place to host it. I use Netlify. The awesome part of deploying a JAMStack site is the continuous
deployment portion which are git-triggered. Whenever I do a git push to update my repository on GitHub, the site is rebuilt with the changes I had
recently made in my latest commit. Deploying updates this way automates the process a lot since I don't have to fuss with doing a build command
myself and sending the updated les in the dist folder manually over FTP. Netlify also lets me set up a custom domain using the one I bought as well.

Live long and prosper 🖖

BACK TO BLOG

Developed with  and  © 2020

https://eldin.space/blog/a-star-is-born 3/3