Migrating over the website to nextJs.

components/Footer.js

@@ -0,0 +1,13 @@
+function Footer()  {
+    const backgroundImage = '/images/winter-5.jpg';
+    return (
+    <footer style={{backgroundImage: `url(${backgroundImage})`}}>
+        <h2 className="footer-h2">Contact Information</h2>
+            <p className="footer-text">You can reach out to me at <a href="mailto:dka36@cornell.edu">dka36@cornell.edu</a></p>
+            <p className="footer-text">This website was made with React, Vite, TypeScript, HTML, and CSS.</p>
+            <a className ="footer-repo"href="https://github.com/Dwain-Anderson/dwain.github.io" target="_blank" rel="noopener noreferrer">Link to this website's repo</a>
+    </footer>
+    );
+}
+
+export default Footer;

components/Hamburger.js

@@ -0,0 +1,9 @@
+const Hamburger = ({ toggleMenu }) => {
+    return (
+        <button id="hamburger-button" onClick={toggleMenu} className="hidden">
+            <img src="/images/Hamburger_Icon.png" alt="Menu" height="60" width="60" />
+        </button>
+    );
+};
+
+export default Hamburger;

components/Header.js

@@ -0,0 +1,13 @@
+import Menu from '../components/Menu.js';
+
+function Header() {
+  const backgroundImage = '/images/winter-1.jpg';
+  return (
+    <header style={{backgroundImage: `url(${backgroundImage})`}}>
+      <h1>Dwain Anderson: Computer Science </h1>
+      <Menu />
+    </header>
+  );
+}
+export default Header;
+

components/Menu.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import Link from 'next/link';
+import Hamburger from './Hamburger';
+
+
+const Menu = () => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const toggleMenu = () => { setMenuOpen(!menuOpen); };
+    const resumeURL = '/images/resume.pdf';
+    return (
+        <div className='menu'>
+            <Hamburger toggleMenu={toggleMenu} />
+            <nav id="menu" className={menuOpen ? 'show' : ''}>
+                <ul className="nav-list">
+                    <li className="nav-item"><Link href="/">Portfolio</Link></li>
+                    <li className="nav-item"><Link href={resumeURL}>Resume</Link></li>
+                    <li className="nav-item"><Link href="/coursework">Coursework</Link></li>
+                </ul>
+            </nav>
+        </div>
+    );
+}
+export default Menu;
+
+

components/PortfolioDeckOfCards.js

@@ -0,0 +1,37 @@
+const placeholder = '/images/question-mark.png';
+const projects = {
+    1: {
+        projectTitle: 'Cornell University: Prelim Planner',
+        projectDescription: 'A Python Flask + React web app for students to find and add their exams to Google Calendar.',
+        projectImageUrl: placeholder,
+        hasProjectLink: true,
+        projectLink: 'project1link'
+    },
+    2: {
+        projectTitle: 'Project 2 Title',
+        projectDescription: 'Project 2 Description',
+        projectImageUrl: placeholder,
+        hasProjectLink: false,
+        projectLink: ''
+    }
+};
+
+function PortfolioDeckOfCards() {
+    return (
+        <>
+            {Object.keys(projects).map((key) => {
+                const project = projects[parseInt(key, 10)]; 
+                return (
+                    <div className="project-card" key={key}>
+                        <img className="project-image" src={project.projectImageUrl} alt={project.projectTitle} />
+                        <h3 className="project-title">{project.projectTitle}</h3>
+                        <p className="project-desc">{project.projectDescription}</p>
+                        {project.hasProjectLink && project.projectLink && <a href={project.projectLink}>Link to Repo</a>}
+                    </div>
+                );
+            })}
+        </>
+    );
+}
+
+export default PortfolioDeckOfCards;