Building a responsive personal website from scratch
This is a post about an earlier version of this site
I started to feel quite blasé about the site I use to market myself! It was already 2 years old and that's a long time, especially in tech, to regard something as old and probably obsolete - in comparision to the prevailing! Frankly it's about time that I start catching up with what's hot in Web!
No to pre-built templates
So, I set to create a new website for myself, again! The tech landscape has changed a lot in the last 2 years - especially the attention given to Mobile first or responsive design. I didn't want to use a pre-built template that I could buy for a few bucks. Part of my online persuasion stems also from the fact that what you see is what I made. A from scratch development gives me immense flexibility in terms of design, architectural choices and a sense of satisfaction.
Ground rules
Unlike the times before this, I decided to set some ground rules before I set my course to coding. These include architectural choice and a few more guidelines :
- Responsive layout
- Simple and clean UI
- Consistency in Design and Code
- Proper dependency management
- UI and Data isolation
Techonolgy choices
After examining a few popular choices, I arrived at the list below:
Building
AngularJS is freaking awesome! Using Angular material I quickly arrived at a basic template for the website with just one dynamic element - the only changing component of the website - consistency and uniformity, remember?
Once I have a basic template for the site, I just had to make templates for each page - templates because I wanted to maintain isolation between page design and the actual data. Keeping other ground rules in mind, I arrived at below structure for the app.
root
|- data // User data for each page
| |- about.json
| |- academics.json
| |- intro.json
| |- project.json
| |- work.json
|
|- extra // Config and setup files that come in handy on fresh setup
| |- apache.conf
| |- apache_mods.sh
|
|- img // Image files
| |- projects
| |- work
|
|- js // Javascript files. Each file has controller for a page
| |- libs
| |- about.js
| |- academics.js
| |- app.js
| |- blog.js
| |- intro.js
| |- post.js
| |- project.js
| |- work.js
|
|- style // CSS styles
| |- angular-typewrite.css
| |- markdown.css // for markdown - html convertor in blog
| |- main.css
|
|- view // Page templates
| |- 404.html
| |- about.html
| |- academics.html
| |- blog.html
| |- intro.html
| |- loading.html // 3 cogs showed at async loading
| |- post.html
| |- project.html
| |- work.html
|
|- index.html // Main template and landing file for all pages
|- .htaccess
|- bower.json // Bower depedencies. Install these first!
So far so good. Then I also wanted to have a blog to go along. Install wordpress, right? - I wish it were that simple. Anyway, more on blog setup later.
Blog setup
Rules first! A big no to wordpress - I want to be in full control of my blog and it's content. So, my obvious choice would be Jekyll - a blog aware static site generator. But then I'm also looking for a uniform and consistent integration of this with the exisiting site. So, I would prefer a blog with a simple JSON API, because I'm already using JSON for user data, but not go so far as a full wordpress setup - that would have been easy though!
Luckily, jekyll is very open! I created templates with JSON structure and HTML output embedded in the JSON. Obviously, there was more to it! Here are some additional tweaks, using jekyll plugins, I did to get a blog that supports rich text content :
- Redcarpet Markdown-HTML convertor
- Category indexes plugin
- Language specific code blocking
- FontAwesome Icons
- A few other plugins in Redcarpet itself
You may check the blog source code for more info on this.
Add-ons
We all love addons! Since everything so far is working great, I decided to throw in a couple of add-ons :
-
Discuss plugin: Because a blog with no place to voice your opinion would be dull!
-
Crawler friendly version: As great as AngularJS is, it fails miserably when it comes to dealing with web crawlers! Thanks to Prerender.io, that's a solved problem now! You can check this setup in the
.htaccess
file