Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/singhkunal2050/singhkunal2050v2

🚀 Portfolio Website / Blog Portal 📖 with eleventy and netlify-cms based on the Jamstack Architecture 🍪
https://github.com/singhkunal2050/singhkunal2050v2

blog jamstack netlify seo

Last synced: about 2 months ago
JSON representation

🚀 Portfolio Website / Blog Portal 📖 with eleventy and netlify-cms based on the Jamstack Architecture 🍪

Awesome Lists containing this project

README 

        
[![Netlify Status](https://api.netlify.com/api/v1/badges/17603b1a-9c22-4130-817d-37fc149a3257/deploy-status)](https://app.netlify.com/sites/singhkunal2050v2/deploys)



# singhkunal2050

![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white) 

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![NPM](https://img.shields.io/badge/NPM-%23000000.svg?style=for-the-badge&logo=npm&logoColor=white)

![Netlify](https://img.shields.io/badge/netlify-%23000000.svg?style=for-the-badge&logo=netlify&logoColor=#00C7B7)

![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)

![Thymeleaf](https://img.shields.io/badge/Nunjucks-%23005C0F.svg?style=for-the-badge&logo=Nunjucks&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![Shell Script](https://img.shields.io/badge/Eleventy-%23121011.svg?style=for-the-badge&logo=Eleventy&logoColor=white)

### A Personal website/Blog Portal based on eleventy and The **Jamstack**



### Keypoints or Features



- Jamstack Architecture based on Eleventy and Netlify CMS 🤠

- Backend data Hosted on Github at /posts 😎

- Custom Cursor,  Semantic HTML 🎀

- og meta tags for sharing on Social Platformss ✨

- Contact form 📞

- Blogs 📖 

- Surprise Modal popup on First visit after a time delay greeting the user. 🥳 

- Max score on Lighthouse ⚡

- Switch Color Modes 🎨

- 404 page added 🤔



![Website Snap](https://github.com/singhkunal2050/singhkunal2050v2/raw/master/docs/home-snap-3.png "Website Snap")



#### Dark Mode

![Website Snap](https://github.com/singhkunal2050/singhkunal2050v2/raw/master/docs/home-snap-4.png "Website Snap 2")



### SEO Score

![Google SEO Audit Score](https://github.com/singhkunal2050/singhkunal2050v2/raw/master/docs/test-2.png "Google SEO Audit Score")



### Surprise on First VIsit 🥳

![Surprise on First VIsit](https://github.com/singhkunal2050/singhkunal2050v2/blob/master/docs/surprise-modal.png?raw=true "Surprise on First Visit")



### 404 🤔

![404](https://github.com/singhkunal2050/singhkunal2050v2/blob/master/docs/404.png?raw=true "404")



# References 



https://rphunt.github.io/eleventy-walkthrough/partials-and-include.html



https://www.belter.io



https://codersblock.com/blog/



### Using Debugger



  ```

    

            console.log('{{ collections.post[0].templateContent  | console | safe }}' )

     

    

  ```



### Blog Features



- Highlighted Code

- embedded videos

- social share 

- tags 



### Todos



- Add a new collection for posts which support single and multi image carousal that can be view just a like social media for all your image content

-  Can work on a eleventy plugin with npm to create a simple 404 page 

- Add Styling for inline code

- Added /uses inspired by https://github.com/wesbos/awesome-uses/

- Add Sitemap.xml and robots.txt

- End point to fetch stars of repo at build time https://api.github.com/repos/singhkunal2050/singhkunal2050v2

- Use lamda functions for views and likes counter on blogs 

- refactor from sass to css variables

- add color scheme toogle

- Search Blogs with tags or title 

- Add About page with Feats Certications and Overall idea obout me 

- Create updated resume and update it across all platforms 

- pwa notifications on new blog posts

- add site main domain to site.json 

- shine js for glass cards

- pwa

- Share on eleventy hashtag

- tags specific collections

- Add 5+ Color Schemes



projects=> Update Project Listing and Create Page for Each Project	

		Add MERN Projects in Website 

		Mention Stack of Project with Scope of work u have done 



## Important Points for updates 

- Work on good user experience of blog single page 

  - Loader issue when too many iframes are part of body templateContent

  - Social share for mobile needs work

  - Work on top progress indicator bugs for blog complete case 

- Update projects in portfolio 

  - detailed page for projects if possible and maybe video descriptions (Why not!!)

  - update latest projects and remove old ones

- About page with more about me and things I do (Can be a good place for creativity and animations )

- tags based filtering 

- pagination ordering issue

-