Removed the posts

1 files changed, 12 insertions, 13 deletions

diff --git a/README.md b/README.md
index 6f59450..4f487e0 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,22 @@
-# Karan Jayachandra's Homepage
+# Karan's Homepage
 
-Everyone should have a website. [Here is mine](https://karanj.com).
+Everyone should have a website. [Here is mine](https://karanj.com). I created this website for two reasons:
 
-The favicon has been generate by [R Islam](https://www.flaticon.com/authors/riajulislam).
+- Provide first hand information about myself on the internet
+- Reserve a URL for myself from where I can share [my work](https://gitlab.com/KaranJayachandra)
 
-## Styling
+A website is just a folder that is shared on the web. The standard way of storing content in this folder is via HTML (Hypertext Markup Language). This allows for a bit of [markup](https://en.wikipedia.org/wiki/Markup_language) and linking to other documents. Standard HTML looks good as you can see on the [first ever website](https://info.cern.ch/hypertext/WWW/TheProject.html) but a bit of CSS (Cascading Style Sheets) goes a long way to make a website look much better. The third piece of the puzzle for web development is JavaScript. This allows for dynamic behaviour and user interaction. For this website however, I just wanted to display some static content. So I decided to ignore JavaScript for now. So I needed to create HTML and CSS files and serve / provide them to other via the web.
 
-CSS (Cascading Style Sheets) is used to create styles for your web pages. This is the story of how I came to appreciate this craft. CSS is one member of the triumvirate of web development along with HTML and Javascript. HTML (Hypertext Markup Language) is how webpages are structured, CSS is used to style it and Javascript is used for more advanced functionality with users. For quite some time, CSS had been my least favourite amongst the three. Although I have been in awe of the power of the internet, I had always delegated the styling of web pages to others. Design mattered less than functionality. This opinion was **wrong**.
+Another reason I wanted to do this project was because setting up this website was the first **production** project that I did and I wanted to be able to explain how each piece in the project works. Now I explain exactly why things are placed at a certain location or look a certain way on my website.
 
-I wanted a website of my own where I could maintain a timeline of both personal and private information. I tried several options before settling on on using [hugo](https://gohugo.io). I wanted something simpl and clean. If you don't believe that simple websites can work, have a look at [these](https://deadsimplesites.com/). I initially it to look like [Bear](https://janraasch.github.io/hugo-bearblog/) blog. The style created by [Herman](https://herman.bearblog.dev) looks great but it felt a bit off. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. Out of all the [themes](https://themes.gohugo.io) available it felt the most appealing but it was not **perfect** for me. I regularly keep an eye out on [Hacker News](https://news.ycombinator.com) for tech news and innovative open source projects when I came across [Neat](https://neat.joeldare.com), a minimalist CSS framework. I was instantly a fan. It was simple, easy on the eye for reading and was well documented. I was also impressed with how much [Joel](https://joeldare.com) accomplished with just over 150 lines of CSS. The demo site looked great.  
+## HTML: Content
 
-Looking at it inspired me to attempt creating a simplistic style sheet of my own. The npm package [Monochrome CSS](https://www.npmjs.com/package/@karanj/monochromecss) was the result. I have also styled this blog using the same CSS. I learnt quite a lot doing this and have a new found respect for front-end work. Another reason I wanted to do this project was because setting up this website was the first **production** project that I did and I wanted to be able to explain how each piece in the project works.
+Writing HTML by hand is not hard. HTML itself has some basic [tags](https://www.w3schools.com/tags/). When these tags sprinkled over a text document and the documented is stored with the `.html` extension, a browser should be able to open and render it. A lot of the tags especially the ones used for meta data are quite repetitive though. Also, tags for search engine optimization (SEO) need to be dynamically chosen based on content. This is crucial for getting your content featured on your favourite search engine. Thankfully, some really smart developers have created tools we can use to automatically generate HTML using  Markdown files. This document is a Markdown files. Markdown is significantly easier to write and doesn't require us to memorize much. Static site generators then convert these documents to HTML files for us. I initially used [Jekyll](https://jekyllrb.com/). Jekyll is a static site generator built using the programming language Ruby. But I got tired of having to have Ruby installed and maintained on my machine just for this application. I then came across [hugo](https://gohugo.io). Hugo is just a simple application that you can plop into your path and with some [basic setup](https://gohugo.io/getting-started/quick-start/), you have a website.
 
-The project didn't take too long because I was already familiar with HTML, CSS and Javascript for another project I recently worked on called [Matchup](https://gitlab.com/KaranJayachandra/match_up). I will write up my experience about that in a different blog post. What I wanted to achieve can be summarized as: `Create a CSS framework for text focused websites on standard HTML tags`. The reason I wanted to focus on text heavy websites was because, I didn't want to get into style input forms. If that is what you are looking for look elsewhere. I also wanted to work with standard HTML tags rather than HTML [classes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/class) or [ids](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id) to keep things simple. Once a HTML page was created, just plugging in the stylesheet should make is readable on both mobile and larger displays. Examples of websites where this CSS works well are:
+## CSS: Styling
 
-- Simple blogs
-- Documentation sites
-- CV/profile sites
+For quite some time, CSS had been my least favourite amongst HTML, JS and CSS. I had always delegated the styling of web pages to others. Design mattered less than functionality. This opinion was **wrong**. Hugo comes with several [themes](https://themes.gohugo.io) you could choose from. I wanted something [simple and clean](https://deadsimplesites.com/). I initially used [hugo-bearblog](https://janraasch.github.io/hugo-bearblog/) blog theme inspired by [Herman](https://herman.bearblog.dev). It looks good but it felt a bit off, it was not **perfect** for me. Whenever I came across another site using this theme, I felt that my website was a bit disingenuous to myself. When looking at [Hacker News](https://news.ycombinator.com), I came across [Neat](https://neat.joeldare.com), a minimalist CSS framework. It make a website look great with just over 150 lines of CSS. This inspired me to attempt creating a simplistic style sheet of [my own](https://gitlab.com/KaranJayachandra/karanjayachandra.gitlab.io/-/blob/main/static/main.css?ref_type=heads). The whole of it ended up being less that 100 lines in a 2 kB CSS file. It is created for text heavy websites focusing on legibility and simplicity. I have also styled this blog using the same CSS. I learnt quite a lot doing this and have a new found respect for front-end work. Please feel free to reuse the CSS if you need, you can change the color to your preference using the `hue` and `saturation` variables.
 
-The whole of it ended up being less that 100 lines in a 2 kB CSS file. I am really proud of the results. I went with a bit of color really does makes your website a bit less serious. I also added a few borders on the key titles and headings to emphasize them. Red is my second favourite color after black so I went with that. I also learnt about the use of HSL instead of RGB to define colors. Sajid on YouTube has created a really good [resource](https://www.youtube.com/watch?v=vvPklRN0Tco) about this. I also made a dark mode version of the website based on his theory of using lightness of colors. Now I explain exactly why things are placed at a certain location or look a certain way on my website. Although the technical work was completed, I also wanted to be able let others use my work so I added a license file and added it to a [public repository](https://gitlab.com/KaranJayachandra/monochrome-css). You can download the CSS and modify it or fork the repository. I also wanted to provide the ability to quickly test the style out so ended up creating a [demo](https://css.karanj.com) website. I also learnt that delivering CSS via a Content Delivery Network (CDN) helps improve network speeds. Linking to gitlab doesn't seem like a good idea for performance. So I published a simple npm package which you can not using jsDelivr on to get the stylesheet embedded in your own websites.
+## Deployment
 
-This was also the second project that I worked on after my website of course that I think is ready for others to consume. It is therefore also documented here if I every decide to come back and change some of the styling. Try CSS yourself, even with just a bit of knowledge, you can transform how things look and will also give you a good idea of one piece of the puzzle in web development.
\ No newline at end of file
+Any text content that is repeatedly edited is source controlled on my machines. This includes this website because I need to change the content based on changes in my life. I use git and store my files on GitLab. GitLab also offers a free functionality to host websites for each of your repositories via GitLab pages. It also offers free server resources to convert your markdown files to HTML via the static site generator discussed earlier. This is accomplished via [pipelines](https://docs.gitlab.com/ci/pipelines/). Pipelines allow you to run commands on a machine temporarily available to you on change to the git repository automatically. This allows me to make changes to the markdown documents and push these changes to GitLab. The pipeline automatically converts these files into HTML and hosts them on a website owned by GitLab. I didn't want to stop here though because the site that gitlab provides is "karanjayachandra.gitlab.io" but I wanted my own. So I bought the domain "karanj.com" and [connected](https://docs.gitlab.com/user/project/pages/custom_domains_ssl_tls_certification/) it to my page. A by product of buying this domain was that I also got a [nice email address](https://support.apple.com/en-us/102540).