prep for github pages

.github/workflows/deploy.yml

@@ -0,0 +1,22 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: npm ci
+      - run: npm run export
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

.gitignore

@@ -37,3 +37,6 @@ jspm_packages
 .node_repl_history
 .next
 .DS_Store
+
+# nextjs static site output
+out

app/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+import PlaceholderImage from '../components/PlaceholderImage';
 import styles from './styles/shared.module.css';
 
 export default function Home() {
@@ -15,7 +15,7 @@ export default function Home() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>Making It Home Podcast</h2>
-        <Image src="/api/placeholder/800/400" alt="Making It Home Podcast Cover" width={800} height={400} className={styles.image} />
+        <PlaceholderImage width={800} height={400} alt="Making It Home Podcast Cover" />
         <p className={styles.paragraph}>Explore my new podcast where I interview people about their past homes, discussing built environment, community, and personal memories. Join me in uncovering the stories that make a house a home.</p>
         <a href="/podcast" className={styles.button}>Learn More About the Podcast</a>
       </section>

app/podcast/page.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import Image from 'next/image';
+import PlaceholderImage from '@/components/PlaceholderImage';
 import styles from '../styles/shared.module.css';
 
 export default function Podcast() {
   return (
     <div className={styles.page}>
       <h1 className={styles.title}>Making It Home</h1>
-      <Image src="/api/placeholder/800/400" alt="Making It Home Podcast Cover" width={800} height={400} className={styles.image} />
+      <PlaceholderImage alt="Making It Home Podcast Cover" width={800} height={400} />
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>About the Podcast</h2>

app/profile/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+import PlaceholderImage from '@/components/PlaceholderImage';
 import styles from '../styles/shared.module.css';
 
 export default function Profile() {
@@ -9,7 +9,7 @@ export default function Profile() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>Introduction</h2>
-        <Image src="http://localhost:3000/api/placeholder/800/400" alt="Placeholder for profile header" width={800} height={400} className={styles.image} />
+        <PlaceholderImage alt="Placeholder for profile header" width={800} height={400} />
         <ul className={styles.list}>
           <li className={styles.listItem}>I'm a <strong className={styles.highlight}>software engineer</strong>, a <strong className={styles.highlight}>mover,</strong> and a <strong className={styles.highlight}>human</strong> who grew up in Northern California. I moved to Berkeley to study <strong className={styles.highlight}>art</strong> at UC Berkeley, and have spent most of my post-college life living in the <strong className={styles.highlight}>East Bay.</strong></li>
           <li className={styles.listItem}>I want to become a <strong className={styles.highlight}>housing developer</strong> because I believe a lack of housing is a primary driver of challenges faced by Californians, and I believe that <strong className={styles.highlight}>well-designed built environments</strong> are key to providing people with the basics of a good life: connection, activity, health and prosperity.</li>
@@ -19,7 +19,7 @@ export default function Profile() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>Early Background</h2>
-        <Image src="http://localhost:3000/api/placeholder/400/300" alt="Placeholder for early background" width={400} height={300} className={styles.sectionImage} />
+        <PlaceholderImage alt="Placeholder for early background" width={400} height={300} />
         <ul className={styles.list}>
           <li className={styles.listItem}>I began learning to program in elementary school. My interest was supercharged when I discovered that I could publish websites and be connected to people all around the world.</li>
           <li className={styles.listItem}>In high school, I applied these abilities to a web development company called Epoch Media. I made websites for local businesses, artists, and merchants. I was even featured on a nationwide news broadcast about teen business owners!</li>
@@ -31,7 +31,7 @@ export default function Profile() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>Career in Software Engineering</h2>
-        <Image src="/api/placeholder/400/300" alt="Placeholder for software career" width={400} height={300} className={styles.sectionImage} />
+        <PlaceholderImage alt="Placeholder for software career" width={400} height={300} />
         <ul className={styles.list}>
           <li className={styles.listItem}>After college, I pivoted back to software engineering. The money was good, and student loans and housing are pricey.</li>
           <li className={styles.listItem}>I began a freelance career that exposed me to small businesses, game development companies, VC-funded startups, and eventually publicly traded companies.</li>
@@ -57,7 +57,7 @@ export default function Profile() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>Transition to Housing Development</h2>
-        <Image src="/api/placeholder/400/300" alt="Placeholder for transition" width={400} height={300} className={styles.sectionImage} />
+        <PlaceholderImage alt="Placeholder for transition" width={400} height={300} />
         <ul className={styles.list}>
           <li className={styles.listItem}>I've been meeting people from different sides of real estate development - investors, architects, design-build companies, developers, city planners, startup people - and learning everything I can from them!</li>
           <li className={styles.listItem}>The gaps for me are clear - I'm a software developer, and while I have executed a few small homeowner projects, I have a lot to learn when it comes to bringing together the parties involved in getting housing built from the ground up.</li>

app/projects/page.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from 'next/image';
+import PlaceholderImage from '@/components/PlaceholderImage';
 import styles from '../styles/shared.module.css';
 
 export default function Projects() {
@@ -9,19 +9,19 @@ export default function Projects() {
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>3D Robot Arm Visualization</h2>
-        <Image src="/api/placeholder/800/400" alt="Placeholder for Robot Arm Visualization" width={800} height={400} className={styles.image} />
+        <PlaceholderImage alt="Placeholder for Robot Arm Visualization" width={800} height={400} />
         <p className={styles.paragraph}>A 3D visualization of a robot arm to visualize data streaming into a management platform for fleets of robotics.</p>
       </section>
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>WebRTC Bridge for Robot Control</h2>
-        <Image src="/api/placeholder/800/400" alt="Placeholder for WebRTC Bridge" width={800} height={400} className={styles.image} />
+        <PlaceholderImage alt="Placeholder for WebRTC Bridge" width={800} height={400} />
         <p className={styles.paragraph}>A WebRTC bridge for direct control of mobile robots from a web browser.</p>
       </section>
 
       <section className={styles.section}>
         <h2 className={styles.sectionTitle}>NextJS-based UX Development Framework</h2>
-        <Image src="/api/placeholder/800/400" alt="Placeholder for NextJS Framework" width={800} height={400} className={styles.image} />
+        <PlaceholderImage alt="Placeholder for NextJS Framework" width={800} height={400} />
         <p className={styles.paragraph}>A NextJS-based framework supporting UX development for hundreds of engineers.</p>
       </section>
     </div>

app/api/placeholder/[width]/[height]/route.ts → components/PlaceholderImage.tsx

@@ -1,12 +1,12 @@
-import { NextRequest } from 'next/server';
+import React from 'react';
 
-export async function GET(
-  request: NextRequest,
-  { params }: { params: { width: string; height: string } }
-) {
-  const width = parseInt(params.width, 10);
-  const height = parseInt(params.height, 10);
+interface PlaceholderImageProps {
+  width: number;
+  height: number;
+  alt: string;
+}
 
+const PlaceholderImage: React.FC<PlaceholderImageProps> = ({ width, height, alt }) => {
   const svg = `
     <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
       <rect width="100%" height="100%" fill="#f0f0f0"/>
@@ -18,10 +18,10 @@ export async function GET(
     </svg>
   `;
 
-  return new Response(svg, {
-    headers: {
-      'Content-Type': 'image/svg+xml',
-      'Cache-Control': 'public, max-age=31536000, immutable',
-    },
-  });
-}
+  const encodedSVG = encodeURIComponent(svg);
+  const dataURI = `data:image/svg+xml,${encodedSVG}`;
+
+  return <img src={dataURI} width={width} height={height} alt={alt} style={{ maxWidth: '100%', height: 'auto' }} />;
+};
+
+export default PlaceholderImage;

next.config.js

@@ -1,13 +1,11 @@
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
   images: {
-    dangerouslyAllowSVG: true,
-    remotePatterns: [
-      {
-        protocol: 'http',
-        hostname: 'localhost',
-        port: '3000',
-        pathname: '/api/**'
-      },
-    ],
+    unoptimized: true,
   },
+  // GitHub Pages use a custom domain or a repo name as the base path
+  // basePath: '/your-repo-name', // Replace with your actual repo name
 }
+
+module.exports = nextConfig

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "export": "next build"
   },
   "dependencies": {
     "next": "^14.2.5",
@@ -19,4 +20,4 @@
     "@types/react-dom": "^18.2.4",
     "typescript": "^5.0.4"
   }
-}
+}