[Accessibility] No content fallback for disabled JavaScript

[deepjoshi11th]

Description

The site’s content is entirely built and inserted via JavaScript after initial load. The initial HTML is mostly an empty shell (just a container div and script includes) index.html. If a user has JavaScript disabled, or if the JS fails to load for some reason, the page shows almost no content – essentially a blank page with maybe a non-functional slider. This also affects search engine crawlers or any service that doesn’t execute JS, meaning they won’t see the portfolio content at all by default.

Steps to Reproduce

• Disable JavaScript in your browser (or use a text-based browser that doesn’t support JS).
• Load the portfolio page.
• Notice that none of the sections (About, My Mistakes, Tech Stack, etc.) are visible; you likely just see a title or a loading message (if any) and an input slider with no content.

Expected Behavior

The page should degrade gracefully when JavaScript is unavailable. At minimum, there could be a meaningful static message or basic content telling the user about Deep Joshi or providing contact info. Ideally, important content (like the About Me text or a summary of skills) would be present in the HTML by default. Search engines should be able to index at least some content even without executing JS.

Actual Behavior

With JS disabled, the user gets an essentially empty page. Even with JS enabled, the initial render is blank until the scripts fetch and inject the content. This can also hurt SEO – while modern Googlebot can execute JS, not all crawlers or services do, and the initial paint is delayed for real users as well.

Why It Matters

Relying 100% on client-side rendering can reduce the site’s accessibility and performance. Some users intentionally disable JS for security or performance. Assistive technologies in certain modes might not execute scripts. Search engine optimization is also affected if crawlers can’t easily see content. Providing at least basic fallback content ensures the site isn’t completely unusable in those cases.

Recommended Fix

Consider implementing progressive enhancement:

• Server-Side Render or Pre-render the content for initial load. For example, since this is a static portfolio, you could generate the HTML for the current “era” (2025) directly in the served HTML. That way, users (and crawlers) get content immediately, and JS can still enhance it (for interactivity like switching eras). Tools like SSR frameworks or even a static build can help, but even manually copy-pasting the current content into index.html as a fallback would work.
• If full SSR is not feasible, at least include a <noscript> tag in the HTML that displays a simple message or summary for no-JS users. For instance:

<noscript><h1>Deep Joshi - Portfolio</h1><p>This site requires JavaScript to view the interactive content. Please enable JavaScript or contact me at ...</p></noscript>

• Ensure that critical SEO metadata (title, description, etc.) are in the static HTML (currently the title is, but description is missing — see SEO issues below).
  By doing this, you improve the likelihood that all users and bots can access something useful from the site, even if it’s not the full experience without JS.

Assignee: @deepjoshi11th