Skip to content

Things that my new site should have

decisions, web-development, designs6 min read

Created on: 2020-03-19

I always liked designers and architects, very creative people. In web technology, man there are a lot of creative people with fantastic ideas and designs. For me, it sort of became a practise, whenever i see a new things like designs, css effects, color palette, way of ordering elements, UI designs, responsiveness, i take a screenshots, save the links and some times inspect the element how they did this, sometimes i even go to the extent of searching for it in youtube and watch the live coding and hear comments to learn their coding style. I have truly become a fan of lot of people subscribed to their newsletters/channels and read their articles whenever its out.

So when i decided to make a new version of my website, i am basically going to go though all the things i have collected overtime. From the look of it, i got to know, its going to be a lengthy and tedious process as i have collected too many things and got to know some of the links are not working anymore and sites have been upgraded, so sometimes, the reason why saved up that link is not there anymore. Feel like an idiot sometimes, as i should have taken a screenshot instead of saving up the link.

Here are some things i have collected between 2018 - 2020. Its just unorganized collection of things. For this, i used, a small note taking app i had built using javascript & firebase, this seriously served its purpose.

Body background

Amazing designs and images which responds to clicks would be great for a page background.

Source :

Some doodle links

Honeycomb Honeycomb
Flipping Arrows Flipping Arrows
Dance Dance
Waves Waves
Shapes Shapes
Doodle 1 Doodle
TimeTravel TimeTravel
Ripple Ripple
BorderStyles BorderStyles
Gradients Gradients

If you are planning on having a websites with lot of categories like some documentation site, sidebars would be great.

Source : Bootstrap Sidebar, Demo

Note : Sidebar is for a personal webiste as it consumes space.
For reference datacamp

Website template with Sidebar

Other sidebar links,

  1. Sidebar Thing - A PEN BY Jon Ambas
  2. CodePen Home - Sidebar Menu Hover Show/Hide CSS - A PEN BY JFarrow
  3. mladenplavsic / bootstrap-navbar-sidebar, Github
Table of contents

ToC are great in documentation, step-by-step, How-to sites as people like to jump to specific sections. Below are some sites, that had good ToC

ToC Bootstrap Table of Contents 1
Sticky ToC Table of Contents 3

Fonts are essential part of a website as that will be the content. It shouldn't be hard to read. Below are some sites, i have come across, where i liked the fonts.

Source : codesd,, readthedocs, CommonMark, Animated Texts,
1header h1 {
2font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, serif;
3font-weight: 900;
4letter-spacing: -2px;
5font-size: 34px;
6color: #303030;
7line-height: 1.2;



Small symbol here and there on the website are good to look at. Like in Front Starter, DTox - Hugo , Daring Fireball - Star logo. Each of the below websites gives you the CSS code to add in your website to setup . So many options,

  1. Flaticon used as background in ([]
  2. - Background like chess and other patterns
  3. Hero Patterns
  4. SVG Backgrounds
Posts : Appearance
  1. Front - Here blog posts card alignment is nice. Blog Posts Orientiation
Signup & Logins
  1. Front - Login - Simple Login
  2. Front - Signup


Code Blocks


  • TrackJS
    1TrackJS in Action : Red & orange shades, timeline colors


CSS Frameworks
  1. Tailwind
  2. Buttercake
  3. prismjs
Timeline - CSS
  1. CodePen Home - Vertical Timeline design - A PEN BY Pranjal Goswami
  2. CodePen Home - Scroll Timeline (jQuery) - A PEN BY Vi
  3. Timeline scribble - A PEN BY Michaela
  4. Single div timeline - A PEN BY Niels Voogt
  5. CodePen Home - CSS Timeline with Custom Properties - A PEN BY Stas Melnikov
  6. Horizontal Scrolling- horizontal timeline - A PEN BY Ritesh Kumar
  7. Front Starter
  8. - Time line in the end
Designer websites
  1. Big texts, link hover - gummisig
Making your own blog site



Static site generators


  1. Terminal
  2. Documentation
  3. Product theme - SVG images
  4. Diary
  5. Simple bootstrap
  6. Hello Friend
  7. Cupper - Typography maintained
  8. Changelog
  9. Modern Resume Site
  10. Coder - JohnDoe
  11. Beautiful Hugo
  12. Hacker News


  1. Themes by LekoArts - Simple and best

  2. Gatsby Starter - Text elegant & like the wobble in page name from chronisp, Github

  3. Resume - Baran Cezayirli, Github

  4. Resume - Gatsby Starter: Resume/CV Site with Prismic, Github

  5. Notes, Github

  6. Bonneville - A Gatsby Starter Blog - Like the text underline technique, Github

  7. PPT - jlengstorf, Youtube

  8. PPT - Starter deck, Github

  9. Bee - Starter, Github

  10. RocketSeat - Excellent documentation theme

Color Palettes
  1. GPL

    1Blog Page colors from GPL
    2Color Scheme 1
    3Background : #C1E5E7
    4Content Text : #4B565D or #000914
    5Heading 1 : #E84261
    6Heading 2 : #0F1D4A
    7Text highlight 1 : #00A5B3
    8Text highlight 2 : #82CD78
    9Text highlight 3 : #FDD567
    11Color Scheme 2
    12For big square boxes on the page with white svg image with center box like login
    13Top Left color : #F3BC5B
    14Top Right color: #009CBA
    15Bottom Left : #8DB04C
    16Bottom Right : #E06677
    17Center box color : #113A56
    18Center box Text color : #EDF0F2
    19Square box colors can be used for highlighting in center box
    21Color Scheme 3
    22Background color 1 : #C1E5E7
    23Quote Box or small box Color 1 : #EDF0F2
    24Quote Box or small box color 2 : #FDF2E2
    25Quote Box or small box color 3 : #031F44
    26Heading color 1 : #E7415C
    27Heading color 2 : #F9B122
  1. State of Javascript (How did Svelte do??)
Other features/ideas/designs, i wanted to have in my website
  1. Features : Articles/Blog posts in Public & Draft modes
  2. Designs : Use emojis / Symbols instead of texts in menus
  3. Big Texts for Post Intro, Post title, Page name
  4. Background color change for link hover
  5. Highlighting important keywords, check in section "GROWTH EXCITES US"
  6. Heading should have a hashtag like this
  7. Blockquote should have a gradient background like in this, look bottom of header
  8. Fullscreen Hamburger menu - A PEN BY Gerhard Bliedung
  9. Dark mode - CSS-only dark mode, Create A Dark/Light Mode Switch with CSS Variables, Dark Mode Support in WebKit , How I added Dark Mode to my website, Adding Dark Mode To Your PWA
  10. Title background strike - Simple, Exponential, and Weighted Moving Averages, Ross
  11. Menu underline
  12. Databriks : Mobile Menu - Simply Superb
  13. has feature at the bottom of page pointing to Gihub asking user for any correction to article fireship
  14. Thought of display Thirukural a day
  15. Comment box is stylish fireship
Technical / Inspirational Blogs

Below sites focuss mainly on content, thats what i like

  1. Ole Begemann Ole Begemann
  2. Contents can be as simple as in this site - hacksparrow
  3. codesd codesd
  4. Tomi Mester data blog - data36 data36
  5. - Python panda blog
  6. Koos Looijesteijn Koos Looijesteijn
  7. WTTJ
  9. Family Blog with lots of pictures
  10. Kavitha Ganesan
  11. Jessica Walkenhorst WTTJ
  12. MadeMistakes
  13. Brittany Chiang, has many fans, there are YT videos talking about her site, codes are available in Github as well. This is from one of her fans who clone her site for portfolio
  14. martinheinz
  18. sebastian seilund
  19. bhavani ravi
  21. Thomas Tracey
  22. Jason Young

My site should have below menus,

  • AboutME - It should say bit about me and it can act like a resume as well. A page cannot wasted describing about me, it should be about my works
  • Articles ( Tags ) - This will contain Technical articles, Notes on videos i have seen and other things.
  • Songs - I should put up a list of all the songs i like and if anybody visits, they can click like or dislike the song. Thinking, this could evolve into a separate app of playlists which people can share. Not a list of 1000s of songs but let just say 30.
  • Videos - Yeah. Youtube has this way of removing content, but when the content is removed, it just says "Deleted content" something like that, it doesn't say what got delete. So, i am going to list my fav. videos here.
  • Pictures - I have a weird way of taking snapshots in VLC player of movie scenes. I have no idea why ? So i thinking of making a picture gallery.
  • Contact - Think whether this should come separately or can add it in "About me".
  • Fan - After visiting lots of sites, reading, learning, listening & watching videos. I have become fan of lots of people and their beautiful idea, vision, knowledge and depth of things they know. They are my Subject Matter Experts of that field. Thing is, i cant be remembering all the people and their works to which i have become a fan. I need a place to store this knowledge, so when i need'em, i know where to find. This page will be dedicated to those people.
Sites to revisit
  1. Stackoverflow - Tutorials for a blogging application in node.js
  2. Architecture of blog site -
  3. Miriam Suzanne - Mozilla : Faster Layouts with CSS Grid (and Subgrid!), template found in example
  4. Flaviocopies - Idea for blogs from hackernews, Flaviocopes - How to start a blog using Hugo
  5. Lazy Loading
  6. CloudRun, NodeJS
  7. Resizing Values in Steps in CSS
  8. Video player for website
  9. Sarah L. Fossheim - She knows about colors
  10. CSS that bloggers should know
  11. onepagelove contains pics of inspirational web designs
  12. Kai Elvin - Look into what technology he uses, he is pretty much uploading every part of his life to web
Free icons for commercial use

Thanks to user Abby for the below icon sites

Here are the icon resources in no particular order, icons8, freepik, iconfinder, fontawesome, goodstuffnononsense, thenounproject, iconshock, pixeden, iconsflow, streamlinehq, dribbble, iconmonstr, deviantart, fontello, 1001freedownloads, cssauthor, graphicburger, flaticon

Source: WebSitePlanet Blog

# Related articles

  1. How i made this gatsby site