You are an expert Senior Frontend Engineer, UX Designer, Information Architect, Technical Writer, and Open Source Portfolio Designer.

I have an existing GitHub Pages website that contains all my learning resources, notes, curated roadmaps, projects, and technical knowledge.

Repository: https://github.com/Ajay3007/Ajay3007.github.io

Your goal is NOT to simply improve the UI.

Your goal is to redesign and restructure the entire website into a world-class developer knowledge hub that delivers an exceptional user experience while keeping all existing content intact.

The final website should feel like a combination of:

• roadmap.sh
• Vercel Docs
• Stripe Docs
• GitHub Docs
• Cloudflare Learning Center
• Kubernetes Documentation
• ByteByteGo
• Microsoft Learn

Use them only for inspiration. Do NOT copy their designs.

================================================== PRIMARY OBJECTIVES ==================================================

1. Make the website feel premium and modern.

2. Make navigation effortless.

3. Make every resource discoverable.

4. Organize information professionally.

5. Keep it highly maintainable.

6. Ensure it scales to thousands of pages.

7. Keep it fully compatible with GitHub Pages.

================================================== STEP 1 — UNDERSTAND THE EXISTING WEBSITE ==================================================

Do NOT start coding.

First, thoroughly analyze the entire repository.

Understand:

• Folder structure
• HTML pages
• CSS
• JavaScript
• Markdown files
• Assets
• Images
• Existing navigation
• Current components
• Roadmaps
• Learning resources
• Notes
• Categories
• Overall architecture

Create a complete mental model of the website before suggesting changes.

================================================== STEP 2 — PERFORM A COMPLETE AUDIT ==================================================

Write a comprehensive report covering:

Information Architecture

• Current content hierarchy
• Navigation flow
• Discoverability
• Organization
• Scalability

UX Audit

Identify problems such as:

• Poor navigation
• Too much scrolling
• Visual clutter
• Inconsistent layouts
• Weak hierarchy
• Poor spacing
• Weak typography
• Missing search
• Dead-end pages
• Inconsistent buttons
• Missing breadcrumbs
• Weak mobile experience
• Accessibility issues

UI Audit

Review:

• Color palette
• Typography
• Icons
• Cards
• Buttons
• Components
• Responsiveness
• White space
• Readability

Performance Audit

Review:

• CSS organization
• JS organization
• Asset optimization
• Image loading
• Lazy loading
• Bundle size
• Caching
• SEO
• Accessibility

================================================== STEP 3 — REDESIGN THE INFORMATION ARCHITECTURE ==================================================

Create a much better site structure.

For example:

Home

Learning Roadmaps AI / ML Linux Networking Dataplane DPDK System Design C++ Java Python Security DevOps

Notes

Projects

Learning Resources

Books

Cheat Sheets

Blogs

About

GitHub

If you think another structure is better, propose it.

Explain why.

================================================== STEP 4 — DEFINE THE TARGET USERS ==================================================

Design for these users.

1. Recruiters

Need to understand within 30 seconds:

• Who am I?
• What do I specialize in?
• My projects
• My skills
• My experience

1. Software Engineers

Need:

• Roadmaps
• Notes
• Technical resources
• Reference material

1. Students

Need:

• Guided learning
• Beginner-friendly navigation
• Clear progression

1. Myself

Need to:

• Add new content quickly
• Publish notes easily
• Update roadmaps
• Maintain the site effortlessly

================================================== STEP 5 — DESIGN SYSTEM ==================================================

Create a complete design system.

Include:

Typography

Spacing

Grid

Color palette

Icons

Buttons

Cards

Navigation

Forms

Tables

Code blocks

Callouts

Badges

Tags

Choose a modern, documentation-focused aesthetic.

Dark mode should be the primary experience.

Support light mode.

================================================== STEP 6 — HOMEPAGE REDESIGN ==================================================

Redesign the homepage so that within 10 seconds a visitor understands:

Who I am

What this website contains

Why it is useful

Suggested sections:

Hero

About

Featured Roadmaps

Latest Notes

Featured Projects

Popular Resources

Learning Categories

Recently Updated

GitHub Activity

Quick Links

Search

Statistics

Call to Action

================================================== STEP 7 — ROADMAP EXPERIENCE ==================================================

Roadmaps are the most important feature.

Design them similar to roadmap.sh but personalized.

Each roadmap should include:

Overview

Difficulty

Prerequisites

Estimated Time

Learning Goals

Topics

Subtopics

Related Notes

Related Projects

Related Resources

Books

Videos

Articles

Practice Questions

Mini Projects

Final Projects

Navigation between topics

Progress indicator

Estimated completion

Bookmarks

================================================== STEP 8 — NOTES ==================================================

Convert notes into documentation-style pages.

Support:

Table of Contents

Sticky TOC

Anchor links

Syntax highlighting

Copy buttons

Callouts

Warning blocks

Info blocks

Tips

Images

Mermaid diagrams

Tables

Collapsible sections

Reading progress

Reading time

================================================== STEP 9 — SEARCH ==================================================

Implement a powerful search.

Search across:

Roadmaps

Notes

Projects

Resources

Tags

Categories

================================================== STEP 10 — NAVIGATION ==================================================

Redesign navigation.

Desktop

Sidebar

Top navigation

Breadcrumbs

Sticky header

Mobile navigation

Keyboard shortcut (Ctrl + K)

Command palette (optional)

================================================== STEP 11 — COMPONENTS ==================================================

Create reusable components.

Examples:

Navbar

Sidebar

Footer

Cards

Roadmap cards

Topic cards

Resource cards

Project cards

Code blocks

Callouts

Badges

Timeline

Search

Pagination

Breadcrumbs

Tag chips

================================================== STEP 12 — PERFORMANCE ==================================================

Optimize everything.

Images

Fonts

CSS

JavaScript

SEO

Accessibility

Caching

Lazy loading

Prefetching

GitHub Pages compatibility

================================================== STEP 13 — ACCESSIBILITY ==================================================

Meet WCAG best practices.

Keyboard navigation

ARIA labels

Color contrast

Focus states

Screen readers

================================================== STEP 14 — SEO ==================================================

Improve:

Meta tags

Open Graph

Twitter Cards

Structured Data

robots.txt

Sitemap

RSS

Canonical URLs

================================================== STEP 15 — GITHUB PAGES COMPATIBILITY ==================================================

The site MUST work flawlessly on GitHub Pages.

You may recommend migrating to:

• Astro
• Eleventy
• Jekyll

If migration is beneficial:

Explain why.

Compare the options.

Recommend the best choice.

Provide a migration strategy.

================================================== STEP 16 — REFACTORING ==================================================

Refactor the project into reusable architecture.

Suggested structure:

src/ components/ layouts/ pages/ roadmaps/ notes/ resources/ projects/ assets/ styles/ utils/

Avoid duplicated code.

Prioritize maintainability.

================================================== STEP 17 — IMPLEMENTATION PLAN ==================================================

Do NOT rewrite everything at once.

Create a phased implementation plan.

Example:

Phase 1

• Repository cleanup
• Folder restructuring
• Navigation

Phase 2

• Homepage redesign

Phase 3

• Roadmap redesign

Phase 4

• Documentation pages

Phase 5

• Search

Phase 6

• Performance optimization

Phase 7

• Accessibility

Phase 8

• Final polish

Keep the website functional after every phase.

================================================== STEP 18 — IMPLEMENTATION ==================================================

After the planning is approved:

Implement every phase incrementally.

For every phase:

1. Explain what will change.
2. Explain why.
3. Make the changes.
4. Ensure nothing breaks.
5. Summarize the improvements.

================================================== IMPORTANT REQUIREMENTS ==================================================

• Preserve all existing content unless consolidation clearly improves usability.
• Do not remove resources without explaining why.
• Focus on long-term maintainability.
• Prioritize user experience over visual effects.
• Avoid unnecessary animations.
• Keep the website fast.
• Ensure mobile-first responsiveness.
• Write clean, modular, well-documented code.
• Follow modern frontend best practices.
• Think like a Staff Frontend Engineer and UX Architect, not just a UI designer.

Finally, before writing any code, provide:

1. A complete repository analysis.
2. A UX/UI audit.
3. A proposed information architecture.
4. Low-fidelity wireframes (ASCII is fine).
5. A design system proposal.
6. Component hierarchy.
7. Recommended technology stack (with justification).
8. A phased implementation roadmap.

Only after those are approved should you begin implementing the redesign.