Whole redesing of landing and blog page

.github/copilot-instrctions.md

@@ -0,0 +1,48 @@
+# GitHub Copilot Instructions for pandasanjay.github.io
+
+## Project Overview
+
+This repository contains the source code for my personal website and blog, built using Gatsby. The goal is to create a modern developer website showcasing skills, experience, portfolio, and blog posts related to large-scale applications, efficient software development, and data pipelines.
+
+## Technology Stack
+
+*   **Framework:** Gatsby (React-based static site generator)
+*   **Language:** JavaScript, JSX
+*   **Styling:** SCSS (`src/styles/global.scss`)
+*   **Content:** Local Markdown (`.md`) files (managed via Obsidian, sourced by Gatsby)
+*   **Deployment:** GitHub Pages (implied by repo name)
+
+## Key Directories
+
+*   `src/`: Contains the main source code (pages, components, templates, styles).
+*   `src/pages/`: Gatsby pages.
+*   `src/components/`: Reusable React components.
+*   `src/templates/`: Templates for programmatically generating pages (e.g., blog posts from Markdown).
+*   `src/styles/`: Global styles and SCSS partials.
+*   `content/blog/`: (Likely location for Markdown blog posts managed via Obsidian).
+*   `static/`: Static assets (images, fonts, etc.).
+*   `gatsby-config.js`: Gatsby configuration file (will need `gatsby-source-filesystem` configured for `content/blog/`).
+*   `gatsby-node.js`: Gatsby Node APIs for building the site (will query Markdown files and create pages).
+*   `gatsby-browser.js`: Gatsby Browser APIs for client-side interactions.
+
+## Copilot Guidance
+
+*   **Code Style:** Follow standard React/JavaScript best practices. Maintain consistency with existing code.
+*   **Components:** Create functional React components. Use hooks where appropriate.
+*   **Styling:** Use SCSS according to the structure in `src/styles/`. Prefer modular CSS/SCSS.
+*   **Markdown:** Generate clean and standard Markdown for content.
+*   **Gatsby:** Leverage Gatsby APIs and conventions (e.g., GraphQL queries for data fetching, `Link` component for internal navigation).
+*   **File Paths:** Ensure generated code snippets use correct relative file paths based on the project structure.
+
+## Potential Future Improvements (Post-2024 Considerations)
+
+*   **Styling:**
+    *   **Tailwind CSS / Utility-First CSS:** Consider migrating to or integrating Tailwind CSS for faster UI development and consistent styling with utility classes. This can reduce the need for custom SCSS.
+    *   **CSS Modules:** Enhance modularity by using CSS Modules alongside SCSS for component-scoped styles.
+*   **State Management:** If complexity increases, consider Zustand or Jotai for lightweight global state management.
+*   **Content Management:**
+    *   **Headless CMS:** For easier blog/portfolio management, integrate a headless CMS like Strapi, Sanity, or Contentful. This separates content from the codebase.
+*   **Performance:**
+    *   **Modern Image Formats:** Ensure consistent use of modern image formats (WebP, AVIF) via Gatsby plugins (`gatsby-plugin-image`).
+*   **Build Tools:** While Gatsby is robust, explore newer tools in the ecosystem if specific needs arise (though Gatsby remains a strong choice).
+*   **Accessibility:** Continuously audit and improve accessibility (A11y) using tools like Axe DevTools and adhering to WCAG guidelines.

.gitignore

@@ -53,6 +53,7 @@ typings/
 
 # dotenv environment variables file
 .env
+.env.*
 
 # gatsby files
 .cache/

.npmrc

@@ -1 +1,4 @@
-registry=https://registry.npmjs.org
+package-lock=true
+save-exact=true
+legacy-peer-deps=true
+registry=https://registry.npmjs.org/

gatsby-browser.js

@@ -1 +1,59 @@
-import "./src/styles/global.scss"
+// Add direct vanilla JS theme toggle functionality
+const html = document.querySelector('html');
+const themeToggleButtons = document.querySelectorAll('[data-theme-toggle]');
+
+// Function to toggle theme
+function toggleTheme() {
+  // Check current theme
+  const isDark = html.classList.contains('dark');
+  const newTheme = isDark ? 'light' : 'dark';
+
+  // Log for debugging
+  console.log('Direct toggle: switching from', isDark ? 'dark' : 'light', 'to', newTheme);
+
+  // Update localStorage
+  localStorage.setItem('theme', newTheme);
+
+  // Toggle class
+  if (newTheme === 'dark') {
+    html.classList.add('dark');
+  } else {
+    html.classList.remove('dark');
+  }
+}
+
+// Initial theme setup
+function initializeTheme() {
+  const savedTheme = localStorage.getItem('theme') || 'dark';
+  if (savedTheme === 'dark') {
+    html.classList.add('dark');
+  } else {
+    html.classList.remove('dark');
+  }
+  console.log('Theme initialized to:', savedTheme);
+}
+
+// Check for buttons after DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('DOM loaded, initializing direct theme toggle');
+  initializeTheme();
+
+  // Find and attach click handlers to all theme toggle buttons
+  setTimeout(() => {
+    const themeButtons = document.querySelectorAll('button[aria-label*="Switch to"]');
+    console.log('Found theme buttons:', themeButtons.length);
+
+    themeButtons.forEach(button => {
+      button.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('Theme button clicked directly');
+        toggleTheme();
+      });
+    });
+  }, 1000); // Slight delay to ensure React has rendered the buttons
+});
+
+// Export other utilities
+export * from "./src/utils/performance"
+export { onRouteUpdate, shouldUpdateScroll } from "./src/utils/performance"

gatsby-config.js

@@ -88,45 +88,224 @@ module.exports = {
                 `,
       },
     },
+    testimonials: [
+      {
+        name: "John Smith",
+        title: "Tech Lead at TechCorp",
+        text: "Sanjay is an exceptional full-stack developer who consistently delivers high-quality solutions. His expertise in React and Node.js is impressive.",
+        image: "john-smith.jpg"
+      },
+      {
+        name: "Sarah Johnson",
+        title: "Engineering Manager",
+        text: "Working with Sanjay was a pleasure. His deep understanding of data pipelines and cloud architecture helped us optimize our entire workflow.",
+        image: "sarah-johnson.jpg"
+      },
+      {
+        name: "Mike Chen",
+        title: "CTO at StartupX",
+        text: "Sanjay's contributions to our project were invaluable. His ability to architect scalable solutions and mentor team members sets him apart.",
+        image: "mike-chen.jpg"
+      }
+    ],
+    projects: [
+      {
+        title: "Enterprise Data Pipeline",
+        description: "Built a scalable data pipeline processing millions of records daily",
+        category: "Data Engineering",
+        tech: ["Apache Kafka", "Node.js", "AWS", "MongoDB"],
+        challenges: [
+          "Handling large-scale real-time data processing",
+          "Ensuring data consistency across multiple systems",
+          "Implementing robust error handling and recovery"
+        ],
+        solutions: [
+          "Implemented stream processing with Kafka",
+          "Designed a microservices architecture for scalability",
+          "Created automated monitoring and alerting system"
+        ],
+        outcomes: [
+          "Reduced processing time by 60%",
+          "Improved data accuracy to 99.9%",
+          "Decreased system downtime by 80%"
+        ],
+        image: "data-pipeline.jpg",
+        github: "https://github.com/username/project",
+        demo: "https://demo.example.com"
+      },
+      {
+        title: "Cloud-Native Analytics Platform",
+        description: "Developed a cloud-native platform for real-time analytics",
+        category: "Full Stack",
+        tech: ["React", "Node.js", "GraphQL", "AWS Lambda"],
+        challenges: [
+          "Real-time data visualization",
+          "Complex state management",
+          "High concurrent user load"
+        ],
+        solutions: [
+          "Implemented WebSocket for real-time updates",
+          "Used GraphQL for efficient data fetching",
+          "Deployed serverless architecture"
+        ],
+        outcomes: [
+          "Supported 10k concurrent users",
+          "Achieved sub-second response times",
+          "Reduced infrastructure costs by 40%"
+        ],
+        image: "analytics-platform.jpg",
+        github: "https://github.com/username/analytics",
+        demo: "https://analytics.example.com"
+      }
+    ],
+    author: 'Sanjay',
+    image: '/og-image-sanjay-profile.png',
+    social: {
+      twitter: '@yourtwitterhandle',
+      linkedin: 'https://www.linkedin.com/in/pandasanjay/',
+      github: 'https://github.com/pandasanjay'
+    },
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
-    `gatsby-plugin-offline`,
+    'gatsby-plugin-postcss',
+    `gatsby-plugin-image`,
+    `gatsby-plugin-sharp`,
+    `gatsby-transformer-sharp`,
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `Sanjay - Full Stack Developer`,
+        short_name: `SP Portfolio`,
+        start_url: `/`,
+        background_color: `#f7f0eb`,
+        theme_color: `#07689F`,
+        display: `standalone`,
+        icon: `static/favicon.ico`,
+        icon_options: {
+          purpose: `any maskable`,
+        },
+        cache_busting_mode: 'query',
+        crossOrigin: `use-credentials`,
+        theme_color_in_head: true,
+        shortcuts: [
+          {
+            name: "Blog",
+            url: "/blogs",
+            description: "Read my latest blog posts"
+          },
+          {
+            name: "Portfolio",
+            url: "/works",
+            description: "View my projects"
+          }
+        ]
+      },
+    },
+    {
+      resolve: `gatsby-plugin-offline`,
+      options: {
+        precachePages: ['/works/*', '/blogs/*', '/contact/'],
+        workboxConfig: {
+          runtimeCaching: [
+            {
+              urlPattern: /(\.js$|\.css$|static\/)/,
+              handler: `CacheFirst`,
+            },
+            {
+              urlPattern: /^https?:.*\/page-data\/.*\.json/,
+              handler: `NetworkFirst`,
+            },
+            {
+              urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff)/,
+              handler: `CacheFirst`,
+            },
+          ],
+        },
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `blogs`,
+        path: `${__dirname}/src/pages/blogs/`,
+      },
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `src`,
         path: `${__dirname}/src/`,
       },
     },
-    `gatsby-transformer-remark`,
     {
-      resolve: `gatsby-plugin-sass`,
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/static/`,
+      },
     },
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: `gatsby-transformer-remark`,
       options: {
-        name: `Sanjay's Portfolio`,
-        short_name: `SP`,
-        start_url: `/`,
-        background_color: `#f7f0eb`,
-        theme_color: `#07689F`,
-        display: `standalone`,
-        icon: `static/favicon.ico`, // This path is relative to the root of the site.
-        include_favicon: true, // Include favicon
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 800,
+              linkImagesToOriginal: false,
+            },
+          },
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              classPrefix: "language-",
+              inlineCodeMarker: null,
+              aliases: {},
+              showLineNumbers: false,
+              noInlineHighlight: false,
+            },
+          },
+        ],
       },
     },
+    {
+      resolve: `gatsby-plugin-sass`,
+    },
     {
       resolve: `gatsby-plugin-gtag`,
       options: {
         trackingId: "UA-136961245-1",
-        // Puts tracking script in the head instead of the body
         head: false,
-        // enable ip anonymization
         anonymize: true,
       },
     },
-    `gatsby-plugin-sitemap`,
-    "gatsby-plugin-robots-txt",
+    {
+      resolve: 'gatsby-plugin-robots-txt',
+      options: {
+        host: 'https://sanjaypanda.com',
+        sitemap: 'https://sanjaypanda.com/sitemap.xml',
+        policy: [{ userAgent: '*', allow: '/' }]
+      }
+    },
+    {
+      resolve: `gatsby-plugin-sitemap`,
+      options: {
+        output: `/sitemap.xml`,
+        excludes: [`/404/`, `/404.html`, `/offline-plugin-app-shell-fallback/`],
+        createLinkInHead: true,
+      }
+    },
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          formats: [`auto`, `webp`, `avif`],
+          placeholder: `blurred`,
+          quality: 80,
+          breakpoints: [750, 1080, 1366, 1920],
+          backgroundColor: `transparent`,
+        },
+      },
+    },
   ],
 }