basic skeleton rewritten in reactjs

public/src/Home.js

@@ -0,0 +1,23 @@
+import Nav from './components/Nav';
+import Splash from './components/Splash';
+import ProjectCard from './components/ProjectCard';
+import Footer from './components/Footer';
+import FeaturedContent from './components/FeaturedContent';
+
+export default function Home() {
+  const projectCards = [
+    //ProjectCard("img/one-ai.png", "One AI", "ASDF", "https://github.com/quaxlyqueen/one-ai"),
+    <ProjectCard img="img/one-ai.png" title="One AI" description="ASDF" url="https://github.com/quaxlyqueen/one-ai"/>,
+    <ProjectCard img="img/one-ai.png" title="One AI" description="ASDF" url="https://github.com/quaxlyqueen/one-ai"/>,
+    <ProjectCard img="img/one-ai.png" title="One AI" description="ASDF" url="https://github.com/quaxlyqueen/one-ai"/>,
+    <ProjectCard img="img/one-ai.png" title="One AI" description="ASDF" url="https://github.com/quaxlyqueen/one-ai"/>
+  ];
+  return (
+    <>
+      <Nav />
+      <Splash primaryText="Hi, I'm Josh Ashton!" secondaryText="Junior full stack developer."/>
+      <FeaturedContent content={projectCards} />
+      <Footer />
+    </>
+  );
+}

public/src/Projects.js

@@ -0,0 +1,11 @@
+import Nav from './components/Nav';
+import Footer from './components/Footer';
+
+export default function Projects() {
+  return (
+    <>
+      <Nav />
+      <Footer />
+    </>
+  );
+}

public/src/components/FeaturedContent.js

@@ -0,0 +1,21 @@
+/*
+ * Expects an array of Cards to display in a responsive grid.
+ *
+ * @param ProjectCard[] content "An array of ProjectCards or other Cards."
+ * TODO: Need to implement dynamic grid layout.
+ * TODO: Need to implement dynamic number of content, based on content size.
+ */
+export default function FeaturedContent( {content} ) {
+  return (
+    <>
+      <div className="row">
+        {content[0]}
+        {content[1]}
+      </div>
+      <div className="row">
+        {content[2]}
+        {content[3]}
+      </div>
+    </>
+  );
+}

public/src/components/Footer.js

@@ -0,0 +1,18 @@
+/**
+ *
+ *
+ * TODO: Need to add classes and styling.
+ * TODO: Need to add links.
+ */
+export default function Footer() {
+  return (
+    <>
+      <div>
+        <p>Copyright or open source license here.</p>
+        <ul>
+          <li><a href="contact">Contact</a></li>
+        </ul>
+      </div>
+    </>
+  );
+}

public/src/components/Nav.js

@@ -0,0 +1,22 @@
+/*
+ * Create a nav bar component.
+ *
+ * TODO: Add classes and styling.
+ * TODO: Add additional sections.
+ */
+export default function Nav() {
+  return (
+    <>
+      <nav>
+        <a href="index.html">Josh Ashton</a>
+        <div>
+          <ul>
+            <a href="projects">
+              <li>Projects</li>
+            </a>
+          </ul>
+        </div>
+      </nav>
+    </>
+  );
+}

public/src/components/ProjectCard.js

@@ -0,0 +1,24 @@
+/*
+ * Create a ProjectCard.
+ *
+ * @param String img "Path to an image."
+ * @param String title "Title of the card."
+ * @param String description "A short description for the card."
+ * @param String url "URL to a project."
+ *
+ * TODO: Need to add classes and styling.
+ */
+export default function ProjectCard( {img, title, description, url} ) {
+  return (
+    <>
+      <div>
+        <img src={img} />
+        <div>
+          <h2>{title}</h2>
+          <p>{description}</p>
+          <a target="_blank" href={url}>View Code on GitHub</a>
+        </div>
+      </div>
+    </>
+  );
+}

public/src/components/Splash.js

@@ -0,0 +1,18 @@
+/*
+ * Create a splash screen.
+ *
+ * @param String primaryText "The headline (h1) text."
+ * @param String secondaryText "The byline (h2) text."
+ *
+ * TODO: Need to add classes and styling.
+ */
+export default function Splash( { primaryText, secondaryText }) {
+  return (
+    <>
+      <div>
+        <h1>{primaryText}</h1>
+        <h2>{secondaryText}</h2>
+      </div>
+    </>
+  );
+}

public/src/index.js

@@ -0,0 +1,18 @@
+import React, { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router";
+
+import Home from "./Home";
+import Projects from "./Projects";
+import "./styles.css";
+
+const root = document.getElementById("root");
+
+ReactDOM.createRoot(root).render(
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/projects" element={<Projects />} />
+    </Routes>
+  </BrowserRouter>
+);

public/src/styles.css

@@ -0,0 +1,90 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 22px;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 20px;
+}
+
+h3 {
+  margin-top: 0;
+  font-size: 18px;
+}
+
+h4 {
+  margin-top: 0;
+  font-size: 16px;
+}
+
+h5 {
+  margin-top: 0;
+  font-size: 14px;
+}
+
+h6 {
+  margin-top: 0;
+  font-size: 12px;
+}
+
+code {
+  font-size: 1.2em;
+}
+
+ul {
+  padding-inline-start: 20px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 20px;
+  padding: 0;
+}
+
+.square {
+  background: #fff;
+  border: 1px solid #999;
+  float: left;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 34px;
+  margin-right: -1px;
+  margin-top: -1px;
+  padding: 0;
+  text-align: center;
+  width: 34px;
+}
+
+.board-row:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+.game {
+  display: flex;
+  flex-direction: row;
+}
+
+.game-info {
+  margin-left: 20px;
+}