Chinmay Joshi

Posted on Nov 9, 2018 • Edited on Nov 12, 2018

How did I create my first personal website?

#showdev #webdev #career #programming

With the little bit of smart work, countless design iterations, a handful of resources, awesome inspirations, 55 git commits, page beautifying illustrations and subtle animations. Finally, my website is presentable. Well, this is just the beginning. In the future, the goal is to achieve near perfection with the overall design and user experience.

Constructive feedback is welcomed and appreciated. Here's the link to view my website - chinmay-joshi.com

Since the beginning, I used GitHub to host my codebase and website. You can check out the code here. According to the Git history, the first commit was on September 6, 2017. That means it took me over 430 days to make it publishable.

There are three primary reasons I am writing a blog post -

Show off what I have done.
Get feedback from awesome developers like you.
Reach and connect with like-minded develolpers.

What I fancy about the website?

1. Day and night mode -

The background colour changes according to the time you are visiting the website. If you visit after 7 in the evening, you can see the night mode, and it will be active until 7 in the morning. There's a button to toggle between the day and night mode.

2. Round shaped transparent glass effect -

I created a semi-transparent layer of a glass looking element, with the hidden scrollbar. The visible scrollbar may have broken the overall fluidity and the UX.

3. Auto-closing landing page -

When anyone opens the website, the first thing they see is a vertically floating animated gif with a welcome message. There's also a function to skip to the main website. You can find the typewriter styled effect here.

4. Lowercase letters everywhere -

I don't know why I made that decision. I just wanted to be quirky in terms of the typography. I decided not to use any external font, because monospace was looking really good. When I started with the design I was using Nunito.

5. Large fonts size -

Previously I used a comparatively small font size which reduced the readability. So I decided to have bold and large font sizes for everything. Because of that, the text is retaining more space. Throughout the page, I have added extra line height and letter spacing for cleaner looks.

6. Click to view more information -

On the main page, you can see an icon [+] which will help you to expand the associated section. When you toggle the [+] icon it becomes [-] and vice a versa. Once you expand the other tab, the previously opened tab will close automatically. The reason behind this idea is to save some space and avoid excessive page scroll.

7. Satisfactory lighthouse score -

There's still a lot to improve in terms of performance.

Technical and other resources -

HTML5
CSS3
JQuery
FontAwesome - All the icons are SVG images.
Landing page image is from Google Images.
Profile picture illustration - by a friend.

So what's next?

Improve page animations. Sometimes page slows down while transitioning from landing page to the main page.
Remove JQuery. JQuery is a fantastic library, but I don't need it for a small website like this.
The transition between the day and night mode is not fluid. Add a small animation which should eliminate the rigid effect.
Replace the landing page's gif with better graphics (which should match with the profile avatar). Also, add a better favicon.
Add offline page with the help of Service Worker API.
HTTPS? Maybe...
Custom email address? Maybe...
Blog page, if I need one.
Bug fixes and enhancements suggested by others.
And many more things...

Inspirations, credits and special thanks to -

1. The Community -

The wonderful community of developers who inspired me to create my own website.

Building a Kickass Portfolio

Ali Spittel ・ Aug 2 '18

#portfolio #webdev #career #beginners

I Created My Portfolio with React and Some Magic 🎉

Dinesh Pandiyan ・ Apr 1 '18

#css #react #javascript #webdev

My New Kickass Portfolio Website

Michael Hoffmann ・ Sep 2 '18

#showdev #portfolio #webdev #career

Also, many more searches like this and this.

2. Dinesh Pandiyan - @flexdinesh, website -

I saw his website, and practically stole his idea of the raining background effect. It is so subtle and beautiful. Thank you, Dinesh.

3. Ali Spittel - @aspittel -

I asked her multiple questions, at multiple times while designing the website. Her guidance and opinions have been beneficial. Thank you so much, Ali.

4. Karishma Joshi - @karishmajoshi4 -

She's the genius behind the beautiful illustration you saw on my website.

My website could never have been possible without your support. Kudos!

Which mode do you like the most... Day or Night?

Top comments (4)

Ben Sinclair • Nov 11 '18

Looks pretty good.
I'm going to list my concerns with it (hey, I'm being constructive!):

Reading

Personally, I find the weight and extra spacing on your text a little hard to read.
You go on to say you use FontAwesome (which you don't afaict) - is that a mistake in the blog post?
"I just wanted to be quirky in terms of the typography" is fine, but it does make things that little bit harder to read.
It would be easier to read for me if the lines weren't allowed to run on. The max-width: 100% on the main parent DIVs means that these lines are too wide to read comfortably on a large browser window, and most people [citation needed] use maximised windows on reasonably wide screens.

General

Your highlighted text isn't links. For example, "estate.sell.do - a niche lead management software targeted towards real estate." has "estate.sell.do" in a contrasting colour, but it's not a link. Except... wait... some of them are links as I've just found. Under "what about open source contributions and other projects?" one is a link and the other isn't; I am now a confused user who has to hover everything one at a time to see if it's really a link.
You can only open one section at a time. Imagine your audience (a potential employer) wants to print off your content (which isn't totally rare). They have to open each accordion section one at a time and hit print again and again. They have to notice this in the print-preview before they walk over to the printer and back again or else they'll get annoyed.

Accessibility

The accessibility score you get (79) probably doesn't take into account the fact that that text only appears well after the page is loaded, as it's too low contrast.
Your links are either not distinguished from the body text at all (left sidebar) or by only a small luminosity change (main text). That makes them visually hard to find. The only indication you're hovering over one is a colour change, which is not helpful to a lot of people.
Your "find me on" links are empty as far as screenreaders are concerned.
The background moving under the text can be very distracting for some readers.
When using a smaller window (e.g. 768x640) the content reflows so the body text is below the sidebar, but if that was the first time I'd seen the page I wouldn't know to scroll down. It looks like a small "contact-me" type page.

That splash ("loading") screen?

It's ok if someone's only going to see your page once, but will get old fast if they have to keep coming back to look up your contact details, for example.
I didn't see it at all the first time because I opened your link in a new tab and didn't look at it until I'd finished reading your post.

Possible improvements

Your favicon could look like a little version of your main "face" icon. I'm not sure what it is now (a panda?) but it doesn't seem to have anything to do with the site. I really like the main picture, by the way, something about it not having eyes makes it cooler.
Make it printable!
Use an email address at your domain rather than a gmail address with numbers in it.
Employers (I can't speak for all) probably don't care about your GPA, but they might be interested in something cool you did while getting your master's. You could fill that section out with a line or two like you did in the previous sections - something that feels a bit more personal than stark numbers.
provide some indication that content continues now you've hidden the scrollbars.

Chinmay Joshi • Nov 12 '18 • Edited

Hello @moopet , first of all, thanks a lot for taking your time out and giving me your valuable feedback.

Reading -
I agree with the font size. They are enormous. I checked my website on multiple displays. Previously, in the first few revisions, the text was tiny, which led me to add extra font size to the text. I will focus more on the text size and overall typography.
Secondly, I am using font-awesome. Now it's evident that you didn't find any file in the code base, that is because it's not there. If you see the "find me on" icons, they belong to font-awesome.
General -
I am sorry that the colour of the link is misguiding. I certainly will work on that. Previously hyperlinks were active. Due to some reasons, I had to remove them. Thanks for pointing out.
Also, isn't printing the whole page and viewing the page are two different things? Correct me if I am wrong. I have never made a printable website before. I will look it up and get back to you. It would be a nice feature to make the whole site printable.
Accessibility -
The accessibility score is not of a landing page. I calculated it before I added the landing page. Text size was the biggest concern according to the Lighthouse audit. And to fix that I had to add extra font-size.
The icons are SVG and contain transparent background (you already know that). I don't think there's anything I can do about it. Also, I like it the way they are right now.
On smaller screens, I have adjusted the height properly to keep the user focused on one content at a time. For example, contact us and then the main page.
Possible improvements -
As I mentioned in the todo list, I do need a better favicon. The current one is not at all relevant. Work in progress...
Again, I am not sure if I need to invest money to have domain specific email address.
Good point with the educational background. I don't need to my score anymore. I will work on that.

Again, thank you so much for your feedback.

Martin Gonzalez • Nov 9 '18 • Edited

Looks great, congratulations!
Love the day/night mode. How do you handle the automatic change? are you taking timezones into account?

Chinmay Joshi • Nov 10 '18

Thank you, @martin2786 .
And yes, I am considering current time at the given place.

DEV Community