Migrate portfolio from single-page to multi-page Astro site for improved SEO

[Copilot]

Overview

This PR migrates the portfolio website from a single-page HTML application to a modern multi-page Astro website. This addresses the SEO limitations of hash-based navigation by creating separate, indexable pages for each section.

Problem

The current single-page application uses JavaScript to show/hide sections with hash URLs (#projects, #resume, etc.). This creates several issues:

1. Poor SEO: Search engines cannot properly index individual sections since they all share the same URL
2. No browser history: Back/forward buttons don't work as expected
3. No deep linking: Cannot directly link to specific sections with unique URLs
4. Maintainability: All content mixed in one large HTML file

Solution

Migrated to Astro framework with a proper multi-page architecture:

• Each section (About, Resume, Projects, Academics, Contact) is now a separate .astro page with its own URL
• Created reusable MainLayout.astro that includes the shared header, sidebar, and navigation
• Replaced JavaScript-powered button navigation with standard HTML anchor tags
• Updated all internal links from hash-based (#projects) to proper URLs (/projects.html)
• Configured build to output static HTML files compatible with GitHub Pages

Key Changes

Project Structure

src/
├── layouts/
│   └── MainLayout.astro       # Shared layout with head, sidebar, nav
└── pages/
    ├── index.astro            # About page
    ├── resume.astro           # Resume page
    ├── projects.astro         # Projects listing
    ├── academics.astro        # Academics page
    └── contact.astro          # Contact page

Navigation Updates

Before:

<button class="navbar-link" data-nav-link>Projects</button>
<!-- JavaScript shows/hides sections -->

After:

<a href="/projects.html" class="navbar-link">Projects</a>
<!-- Proper page navigation with browser history -->

Internal Link Fixes (Critical)

Updated all project detail pages to use proper URLs instead of hash navigation:

Before:

<a href="../index.html#projects">← Back to Projects</a>

After:

<a href="/projects.html">← Back to Projects</a>

This ensures the entire navigation flow works correctly across the multi-page structure.

SEO Improvements

Each page now has:

• ✅ Unique, crawlable URL (e.g., /resume.html, /projects.html)
• ✅ Dedicated title tags optimized for search engines
• ✅ Individual meta descriptions
• ✅ Proper canonical URLs
• ✅ Page-specific Open Graph metadata

Deployment

Added automated deployment via GitHub Actions:

• Created .github/workflows/deploy.yml for automatic builds on push
• Site builds to static files in dist/ folder
• Compatible with GitHub Pages
• See ASTRO_DEPLOYMENT_GUIDE.md for detailed instructions

Testing

All functionality tested and verified:

• ✅ Build completes successfully
• ✅ All 5 main pages load correctly
• ✅ Navigation between pages works seamlessly
• ✅ Active page highlighting in navbar
• ✅ Project detail pages load and back links work
• ✅ All assets (images, CSS, JS) resolve correctly
• ✅ Browser history (back/forward) functions properly

Screenshot

The homepage now loads as a dedicated page at /index.html instead of being one section among many. Each navigation link leads to a separate, SEO-friendly page.

Benefits

Performance:

• Static site generation for faster page loads
• Optimized asset delivery through Astro's build process

Maintainability:

• Modular page structure with reusable components
• Clear separation of layout and content
• Easy to add new pages

User Experience:

• Proper browser history support
• Direct linking to specific pages
• Faster perceived performance

Breaking Changes

None. The visual design and user experience remain identical. All existing functionality (lightbox, contact form, project filtering) is preserved.

Next Steps

1. Merge this PR
2. Enable GitHub Pages with "GitHub Actions" as the source
3. The workflow will automatically build and deploy on the next push to master

The migration provides a solid foundation for future enhancements while significantly improving SEO and maintainability.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/repos/withastro/astro/tarball/examples/minimal
  • Triggering command: node /home/REDACTED/.npm/_npx/abdb4b598af046c4/node_modules/.bin/create-astro --template minimal --no-install --no-git --typescript false . (http block)
• telemetry.astro.build
  • Triggering command: node /home/REDACTED/work/Erfan-ram.github.io/Erfan-ram.github.io/node_modules/.bin/astro build (dns block)
  • Triggering command: node /home/REDACTED/work/Erfan-ram.github.io/Erfan-ram.github.io/node_modules/.bin/astro preview (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

The Updated Prompt for GitHub Copilot

Act as an expert front-end developer. Your task is to migrate my existing single-page HTML portfolio into a modern, multi-page website using Astro for better performance, SEO, and maintainability.

---

1. High-Level Goal

Transform the current single-page application (SPA) into a static multi-page site. Each section of the original page (About, Resume, Projects, etc.) should become its own separate, indexable page with a clean URL (e.g., /resume, /projects). This will improve SEO by allowing each page to be specifically indexed by Google.

---

2. Current Status

• Framework: The site is currently a single index.html file.
• Structure: The main content is divided into <article> sections (About, Resume, Projects, Academics, Contact).
• Navigation: Navigation is handled by JavaScript, which shows and hides these sections on the same page. Some internal links (like "back" buttons) use hash URLs (#projects) to navigate between these views.

---

3. The Solution: Step-by-Step Implementation Plan

Please generate the necessary code and file structure for the following steps:

Step 1: Set Up the Astro Project Structure
Create a standard Astro project structure. The src/ directory should contain layouts/, pages/, and components/ directories.

Step 2: Create a Reusable Layout
Create a MainLayout.astro file inside the src/layouts/ directory.

• Migrate the entire <head> section from the original index.html file into this layout.
• Include the sidebar (<aside class="sidebar">...) as a persistent component in this layout.
• Use a <slot /> element within the main content area (<div class="main-content">) to render the page-specific content.

Step 3: Create Individual Pages
Create the following .astro files inside the src/pages/ directory, each using the MainLayout:

• index.astro (Homepage): This will contain the content from the "About" (<article class="about">...) section.
• resume.astro: This will contain the content from the "Resume" (<article class="resume">...) section.
• projects.astro: This will contain the content from the "Projects" (<article class="portfolio">...) section.
• academics.astro: This will contain the content from the "Academics" (<article class="Recommendations">...) section.
• contact.astro: This will contain the content from the "Contact" (<article class="contact">...) section.

Step 4: Update the Main Navigation
In the MainLayout.astro file, replace the JavaScript-powered <button> navigation with standard HTML anchor <a> tags.

• Change each <button> in the navbar to an <a> tag.
• The href for each link should point to the correct page (e.g., <a href="/resume">Resume</a>, <a href="/projects">Projects</a>).
• The homepage link should point to the root (<a href="/">About</a>).
• Implement a way to show the "active" state for the current page's navigation link.

Step 5: Handle Assets and Scripts

• Move the assets/ folder into the public/ directory so Astro can process the images and CSS correctly.
• Ensure the custom JavaScript file (script.js) is properly imported and executed.

Step 6: Update Internal Anchor Links (Your New Requirement)

• After creating the separate pages, audit the entire project for any internal anchor links that rely on hash navigation (e.g., <a href='#projects'>).
• Update these links to point to the new, correct page URLs. For instance, a "Back to Projects" link that was href='#projects' must be changed to href='/projects'. This ensures all navigation works correctly across the new multi-page structure.

By following this plan, we will create a faster, more SEO-friendly portfolio website with fully functional navigation. Please begin with Step 1.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.