Things that my new site should have
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.
Amazing designs and images which responds to clicks would be great for a page background.
Source : css-doodle.com/
Some doodle links
If you are planning on having a websites with lot of categories like some documentation site, sidebars would be great.
Note : Sidebar is for a personal webiste as it consumes space.
For reference datacamp
Other sidebar links,
- Sidebar Thing - A PEN BY Jon Ambas
- CodePen Home - Sidebar Menu Hover Show/Hide CSS - A PEN BY JFarrow
- 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
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.
- sofia-pro,sans-serif - https://onepagelove.com/millennial-money-guide
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,
- Flaticon used as background in (stash.bobbydreamer.com)[stash.bobbydreamer.com]
- philiprogers.com - Background like chess and other patterns
- Hero Patterns
- SVG Backgrounds
Posts : Appearance
- Front - Here blog posts card alignment is nice.
Signup & Logins
Timeline - CSS
- CodePen Home - Vertical Timeline design - A PEN BY Pranjal Goswami
- CodePen Home - Scroll Timeline (jQuery) - A PEN BY Vi
- Timeline scribble - A PEN BY Michaela
- Single div timeline - A PEN BY Niels Voogt
- CodePen Home - CSS Timeline with Custom Properties - A PEN BY Stas Melnikov
- Horizontal Scrolling- horizontal timeline - A PEN BY Ritesh Kumar
- Front Starter
- holistic.dev - Time line in the end
- Big texts, link hover - http://www.gummisig.com/
Making your own blog site
- scotch.io - Build a Real-Time Markdown Editor with Node.js
- Dynamic blogs would require, editor to edit content, below are the editors, i will have to check on,
- Summernote - Using this for other project
- Pandao, Github
Static site generators
Themes by LekoArts - Simple and best
- Gatsby Starter: Prismic, Arya Stark, Github - Gatsby Starter: Prismic
- Gatsby Starter: Minimal Blog - Lupin has dark mode, Github
- Simple blog supports internationalization - Arya Stark, Github - Simple blog supports internationalization
- Gatsby Starter Portfolio: Emilia - Simple image gallery with image on background + dark mode, Github
Other features/ideas/designs, i wanted to have in my website
- Features : Articles/Blog posts in Public & Draft modes
- Designs : Use emojis / Symbols instead of texts in menus
- Big Texts for Post Intro, Post title, Page name
- Background color change for link hover
- Highlighting important keywords, check in section "GROWTH EXCITES US"
- Heading should have a hashtag like this
- Blockquote should have a gradient background like in this, look bottom of header
- Fullscreen Hamburger menu - A PEN BY Gerhard Bliedung
- 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
- Title background strike - Simple, Exponential, and Weighted Moving Averages, Ross Whitehouse
- Menu underline
- Databriks : Mobile Menu - Simply Superb
- Fireship.io has feature at the bottom of page pointing to Gihub asking user for any correction to article
- Thought of display Thirukural a day
- Comment box is stylish
Technical / Inspirational Blogs
Below sites focuss mainly on content, thats what i like
- Ole Begemann
- Contents can be as simple as in this site - hacksparrow
- Tomi Mester data blog - data36
- albertovilla.es - Python panda blog
- Koos Looijesteijn
- Family Blog with lots of pictures
- Kavitha Ganesan
- Jessica Walkenhorst
- 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
- sebastian seilund
- bhavani ravi
- Thomas Tracey
- 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
- Stackoverflow - Tutorials for a blogging application in node.js
- Architecture of blog site - peterlyons.com
- Miriam Suzanne - Mozilla : Faster Layouts with CSS Grid (and Subgrid!), template found in example
- Flaviocopies - Idea for blogs from hackernews, Flaviocopes - How to start a blog using Hugo
- Lazy Loading
- CloudRun, NodeJS
- Resizing Values in Steps in CSS
- Video player for website
- Sarah L. Fossheim - She knows about colors
- CSS that bloggers should know
- onepagelove contains pics of inspirational web designs
- Kai Elvin - Look into what technology he uses, he is pretty much uploading every part of his life to web