nelsonarcher.com (this site)

Creating and evolving nelsonarcher.com has been an ongoing journey that showcases both my technical skills and my approach to web development. What started as a simple portfolio has grown into a full-featured, SEO-optimized platform that not only presents my work but also hosts interactive demos and projects.

Site Architecture & Evolution

This site began as a simple portfolio built with Next.js and React, but has evolved substantially over time. The current architecture leverages the Next.js App Router, TypeScript for type safety, and a component-driven approach that ensures consistency across the site while enabling easy maintenance and extension.

Current Structure

The site now employs a modern architecture with the following key elements:

Key Features & Technical Implementations

Dynamic Content System

The site employs a hybrid approach to content management:

• Data Files: Projects, demos, and blog posts are defined in TypeScript data files (projectData.ts, demoData.ts, blogData.ts) with metadata, making it easy to add or update content.
• HTML Content: The actual content for each project or blog post is stored as HTML files in the public directory, allowing for rich formatting while keeping the data structure clean.
• Dynamic Routing: Next.js dynamic routes ([slug] folders) are used to generate pages for each piece of content based on its slug.

// Example from lib/demoData.ts
export const demos: Demo[] = [
  {
    slug: "hurricane",
    title: "Hurricane Data Visualizer",
    description: "Track hurricanes and weather patterns, quickly visualize data from NOAA",
    thumbnailBase: "/demos/hurricane/thumbnail",
    ogImage: "/demos/hurricane/og",
    fullPage: true,
    hidden: false,
    url: "https://hurricane-adam.vercel.app",
    category: 'personal',
    techStack: ['React', 'TypeScript', 'Next.js', 'Mapbox'],
    keywords: [
      "hurricane tracker",
      "NOAA data visualization",
      "interactive weather map",
      // More keywords for SEO...
    ]
  },
  // More demos...
];
    

Interactive Demos Section

One of the most significant additions to the site is the Demos section, which showcases interactive projects and applications. This section embeds and links to live applications through a combination of:

• iframes for Internal Projects: Projects built with compatible technologies are embedded directly into the site using iframes.
• SEO-Optimized External Links: For demos hosted on external domains, the site creates SEO-friendly landing pages with rich metadata before redirecting users.
• Custom Demo Layouts: Each demo has dedicated metadata, descriptions, and structured data to maximize search engine visibility.

SEO Optimization

The site incorporates comprehensive SEO optimizations:

• Dynamic Metadata: Each page has custom metadata generated through Next.js metadata API, including titles, descriptions, and Open Graph data.
• Multiple Sitemaps: Both static and dynamic sitemaps ensure all content is properly indexed, with priority levels for important pages.
• Structured Data: Schema.org JSON-LD markup provides search engines with detailed information about content and projects.
• Canonical URLs: Proper canonical URLs prevent duplicate content issues when content is accessible through multiple paths.
• Robots Control: Detailed robots.txt and metadata robots directives provide clear instructions to search crawlers.

// Excerpt from app/layout.tsx - Structured data for projects
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "SoftwareApplication",
          "position": 1,
          "name": "Hurricane Data Visualizer",
          "description": "Track hurricanes and weather patterns, quickly visualize data from NOAA",
          "url": "https://www.nelsonarcher.com/demos/hurricane",
          "applicationCategory": "WebApplication",
          "operatingSystem": "Any"
        },
        // More projects...
      ]
    })
  }}
/>
    

Advanced UI Components

The site features several custom UI components that enhance the user experience:

• Starry Background: The interactive star field on the home page creates an engaging first impression.
• Typing Animation: Custom typing animations add a dynamic element to headings and titles.
• Velocity Scroll: A horizontal scrolling component that adjusts speed based on user scrolling provides a unique way to display additional information.
• Fallback Images: Smart image loading with fallbacks ensures visuals always display properly, even with different formats.
• Framer Motion Animations: Smooth transitions and animations throughout the site improve the overall user experience.

Performance Optimizations

The site includes several performance optimizations:

• Image Preloading: Strategic preloading of critical images ensures smooth visual transitions.
• Response Headers: Custom cache headers, security headers, and content-type options improve both performance and security.
• Static Generation: Using Next.js static generation for content pages improves load times.
• Lazy Loading: Components and images use lazy loading to reduce initial page weight.
• Font Optimization: Local font loading with variable fonts reduces web font impact.

// Excerpt from next.config.js - Performance and security headers
async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        {
          key: 'X-Content-Type-Options',
          value: 'nosniff',
        },
        {
          key: 'X-Frame-Options',
          value: 'SAMEORIGIN',
        },
        {
          key: 'X-XSS-Protection',
          value: '1; mode=block',
        },
        {
          key: 'Referrer-Policy',
          value: 'strict-origin-when-cross-origin',
        }
      ],
    },
    // Cache control for static assets
    {
      source: '/(.*).(jpg|jpeg|png|gif|webp|svg|ico|ttf|woff|woff2)',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        }
      ],
    },
  ];
}
    

Project Showcase System

The site now features two distinct types of project showcases:

• Project Documentation: Traditional project write-ups with detailed explanations, code samples, and screenshots (like this page).
• Interactive Demos: Live, functional applications that visitors can use directly, showcasing practical implementations and real-world use cases.

This dual approach provides both in-depth technical information for those interested in the development process, and practical demonstrations for those who want to see the technology in action.

Featured Interactive Projects

Some of the key interactive projects currently showcased include:

• Hurricane Tracker: An interactive visualization tool for tracking hurricanes and weather patterns using NOAA data.
• UH Comp Sci Discord List: A directory of University of Houston Computer Science Discord servers.
• Attendance Tracker: A weighted attendance management system with grouping features.
• Ping Pong Pi: An ELO-based scoring system for tracking ping pong statistics.

Technical Challenges & Solutions

SEO for External Applications

One of the significant challenges was making external applications discoverable through search engines. The solution involved:

• Creating SEO-rich landing pages that describe each application before redirecting to the external URL
• Implementing structured data that helps search engines understand what each application does
• Using preconnect hints and DNS prefetching to improve loading performance
• Adding alternate URL links to establish relationships between the main site and external applications

Content Management

Managing multiple types of content (projects, demos, blog posts) required a structured approach:

• TypeScript interfaces define the shape of different content types
• Content metadata is stored in TS files for easy programmatic access
• HTML content is separated from data for better maintainability
• Dynamic routes handle slug-based content loading

Hosting & Deployment

The site is hosted on Vercel, which provides several advantages for a Next.js application:

• Seamless Git Integration: Automatic deployments when changes are pushed to the main branch
• Preview Deployments: Every pull request gets a unique preview URL
• Edge Network: Content is served from edge locations for faster global access
• Analytics: Built-in analytics provide insights without affecting site performance
• Custom Domain Support: Easy configuration for multiple domains (nelsonarcher.com, adamnelsonarcher.com)

Future Development Plans

While the site has evolved significantly, several enhancements are planned:

• Expanded Blog Platform: A more robust blog system with categories, tags, and related posts
• More Interactive Demos: Additional interactive applications to showcase diverse skills
• Enhanced Analytics: Deeper insights into how visitors interact with the site and projects
• API Endpoints: Public APIs for accessing project data and potentially integrating with other applications
• Improved Accessibility: Further enhancements to make the site more accessible to all users

Conclusion

nelsonarcher.com represents not just a portfolio but a practical demonstration of modern web development techniques. It showcases the power of Next.js for building complex web applications while maintaining excellent performance and SEO. The site continues to evolve, adding new features and optimizations as web standards and technologies advance.

The combination of project documentation and live interactive demos provides a comprehensive view of my development capabilities, serving both as a portfolio for potential employers and a resource for other developers interested in similar technologies.