Introduction

singhkunal2050v2 is a modern, feature-rich portfolio website and blog portal built using Eleventy and Netlify CMS. This project leverages the Jamstack architecture to create a fast, secure, and easily maintainable web presence. It's designed to showcase a developer's work, share blog posts, and provide an engaging user experience with various interactive elements.

Main Features

1. Jamstack architecture using Eleventy and Netlify CMS
2. GitHub-hosted backend data for posts
3. Custom cursor and semantic HTML
4. Open Graph meta tags for improved social media sharing
5. Contact form functionality
6. Blog system with syntax highlighting and embedded video support
7. Surprise modal popup for first-time visitors
8. Maximum Lighthouse score for optimal performance
9. Color mode switching, including dark mode
10. Custom 404 error page
11. Responsive design for various devices
12. SEO optimized

Installation Steps

1. Clone the repository:

   git clone https://github.com/singhkunal2050/singhkunal2050v2.git
   

2. Navigate to the project directory:

   cd singhkunal2050v2
   

3. Install dependencies:

   npm install
   

4. Run the development server:

   npm start
   

5. Build the project for production:

   npm run build
   

Usage Instructions

1. Content Management:

   • Use Netlify CMS to manage blog posts and site content
   • Blog posts are stored in the /posts directory on GitHub

2. Customization:

   • Modify the .eleventy.js file to adjust Eleventy configuration
   • Update styles in the SCSS files located in the src directory
   • Customize components and layouts in the src directory

3. Blog Writing:

   • Create new blog posts using Netlify CMS or by adding Markdown files to the /posts directory
   • Utilize code highlighting and embedded video features in your blog posts

4. Deployment:

   • Deploy the site using Netlify or your preferred Jamstack hosting platform
   • Ensure environment variables are set correctly for production

5. SEO and Sharing:

   • Customize Open Graph meta tags for each page to improve social media sharing
   • Utilize the built-in SEO optimizations to improve search engine rankings

Important Notes

1. The project uses a custom cursor, which may need adjustment for different use cases or accessibility concerns.

2. The surprise modal popup for first-time visitors can be customized or disabled in the code.

3. Color mode switching is available, including a dark mode option. Ensure all content is readable in all color modes.

4. The contact form requires proper backend configuration to function correctly.

5. Keep the Eleventy and Netlify CMS versions up to date for the latest features and security patches.

6. The project includes TODO items for future enhancements, which can be found in the README file.

7. Consider implementing the suggested features like a sitemap.xml, robots.txt, and lambda functions for view counters to further improve the site.

8. Regularly update your portfolio projects and blog content to keep the site fresh and relevant.