This Blog and Site

This blog along with my main site is a project of mine that I have been working on for over 2 months. It is an entirely responsive website which serves as my portfolio and blog that uses Gatsby for static-site generation. Gatsby is powered on React and serves as a communication-method between MDX (Markdown with JSX) files and React-components. I have used various styles and components inspired from a wide-range of resources which are more thoroughly documented in the Github page for the website.

Evolution

This project has evolved from sites prior. Many previous sites don’t exist, and those that do were entirely discarded mostly due to issues with responsivity. The old version of the site located in the README of the old repository – this particular version was styled so heavily with non-responsive styles (ie styles based on exact positioning in terms of height, width, and physical location) that any changes of the browser window would render the site unusable. It occurred to me that the time it would take to make the site responsive would be longer than the time to create a new website from scratch.

Personal Touches on the Site

As cliche as it might sound, I wanted this site to be a representative of me in real life, not a standard portfolio lurking around a LinkedIn About-Me. This is why you will find many personal components to the site which I will explain below:

The photo that I picked of me (in the about-me section) is very characteristic of me. The Cherry Blossoms are “symbolic” of my DMV heritage and the Star Wars Hoodie represents one of my childhood obsessions. My hair being slightly messy and the location being one of my favorite childhood parks also adds to the personal touch.
The photos of me dunking a basketball (albeit they’re somewhat fake – story for a different time) are characteristic of my huge love of basketball and sports in general. I aspire to turn those photos into more gif-like videos where you can see me jumping when hovering over the “see me” button!
The languages that are switched in the header of the site are all languages I’m interested in and/or are fluent in. The specific languages are English (native), Telugu, Arabic, Spanish (fluent), and French (beginner). The specific phrasings are:

English: Hello, World! I'm Abhi! See ya!
Spanish: Hola, mundo! Soy Abhi! Nos vemos!
Telugu: హలో వరల్డ్! హాయ్, నేను అభి! వీడ్కోలు!
Arabic: Marhaban bi3alam! Ana ismii Abhi! M3a salama!
French: Salut, monde! Je suis Abhi! Au revoir!

Arabic was tricky to format with Markdown because it is a right-to-left script so I simply used Romanized versions here although on the website the Arabic script is used.

Personal Touches on the Blog

There are some other personal touches on the blog.

The photo of me dunking.
The photos of skylines associated with the tags. I think the Dubai skyline is the most aesthetic (although the city has lots of problems with racism and exploitation of South Asian people) so I placed it as the background of the site.
1. The background for the Tech tag is a photo of the San Francisco skyline representative of San Francisco’s association with the tech field.
2. The background for the Thoughts tag is Chicago because of the history of its involvement with humanities and arts field.
3. The background for the Projects tag is the NYC Skyline.
4. The background for the Upated tag is Paris.

Technical Content

This was mostly a technical project that centered around UX/Design and full-stack web-development. I became proficient in using static-site generators and incorporating code/components from various sources including Bootstrap. I also have created a version of this site using the MERN stack which has its own page for uploading content through text-input on the site but chose not to use that for easiness of deployment.

Lessons Learned

Very many lessons were learned while making this website/blog. Here are the main ones:

Start with responsivity as the main goal. Styling things through height/width become a huge mess later down the line for me and will likely be for you too.
Understand the value of keeping unique class-names, especially when using React components. Often, the rendering of class-names that are the same will be retained even though in a different component, the style might be different.
Do try to understand basic UX/Design concepts because you will inevitably feel (if you don’t use them right), that the website “feels off”. That might prompt a lot of unnecessary “huge” changes to your website.
Don’t feel shame in incorporating other styles through things like CodePen or Bootstrap. It’s hard to formulate or get inspiration for certain “things” (such as the project/blog-cards in both the project and portfolio sites), and sometimes, that inspiration will have to come from a foreign source.

Author: Abhiram Kidambi
Written: 09-10-2024
Tags: PROJECT, TECH