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 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 benefit 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 field 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.
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 files in the dist folder manually over FTP. Netlify also lets me set up a custom domain using the one I bought as well.
Top comments (0)