Skip to content

bobby_dreamer

Things that my new site should have

decisions, web-development, designs6 min read

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 stash.bobbydreamer.com, 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 : css-doodle.com/ css-doodle.com
css-doodle.com

Some doodle links

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

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

TitleImage
ToC Bootstrap Table of Contents 1
Scrollspy-
Sticky ToC Table of Contents 3
Fonts

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, htmlstream.com/preview/front-v2.4.0/starter, readthedocs, CommonMark, Animated Texts,

CommonMark

SVG

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 (stash.bobbydreamer.com)[stash.bobbydreamer.com]
  2. philiprogers.com - 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

Logins

Code Blocks
  1. devhints.io

Logins

Colors

TrackJS

CSS Frameworks
  1. Tailwind
  2. Buttercake
  3. prismjs
  4. milligram.io
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. holistic.dev - Time line in the end
Designer websites
  1. Big texts, link hover - http://www.gummisig.com/ gummisig
Making your own blog site
  1. Storage
  2. Editor
Static site generators

Hugo

  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

Gatsby

  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

Graph
  1. State of Javascript (How did Svelte do??)
  2. https://nivo.rocks/
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" http://cognosis.co.uk/
  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 Whitehousethebalance.com
  11. Menu underline
  12. Databriks : Mobile Menu - Simply Superb
  13. Fireship.io 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. albertovilla.es - Python panda blog
  6. Koos Looijesteijn Koos Looijesteijn
  7. www.welcometothejungle.com WTTJ
  8. thecorrespondent.com WTTJ 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 shubhamkumar.live
  14. martinheinz
  15. heather.miller.am
  16. filburg.co
  17. stephaniestimac.com
  18. sebastian seilund
  19. bhavani ravi
  20. bram.us
  21. Thomas Tracey
  22. Jason Young
Menus

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 - peterlyons.com
  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

# Related articles

  1. How i made this gatsby site