mostly finished rewrite

public/src/About.js

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

public/src/Blog.js

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

public/src/Contact.js

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

public/src/Home.js

@@ -1,4 +1,4 @@
-import Nav from './components/Nav';
+import Navigation from './components/Navigation';
 import Splash from './components/Splash';
 import ProjectCard from './components/ProjectCard';
 import Footer from './components/Footer';
@@ -6,17 +6,17 @@ 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"/>
+    <ProjectCard img="./assets/img/dnd.png" title="D&D" description="ASDF" url="https://github.com/quaxlyqueen/dnd"/>,
+    <ProjectCard img="./assets/img/graph.png" title="Graph Visualizer" description="ASDF" url="https://github.com/quaxlyqueen/2420-graph-visualizer"/>,
   ];
   return (
     <>
-      <Nav />
+      <Navigation />
       <Splash primaryText="Hi, I'm Josh Ashton!" secondaryText="Junior full stack developer."/>
-      <FeaturedContent content={projectCards} />
+      <div className="row custom-container cards">
+        <h3 className="light-text">Featured Projects</h3>
+        <FeaturedContent content={projectCards} />
+      </div>
       <Footer />
     </>
   );

public/src/Projects.js

@@ -1,10 +1,33 @@
-import Nav from './components/Nav';
+import Navigation from './components/Navigation';
 import Footer from './components/Footer';
+import ProjectDisplay from './components/ProjectDisplay';
 
+/*
+ * The Projects page.
+ */
 export default function Projects() {
+  /*
+   * An array of project data to feed to the ProjectDisplay component.
+   */
+  const data = [
+    { 
+      frontend: "flutter",
+      backend: "go",
+      id: "one-ai",
+      name: 'One AI',
+      description: "TODO",
+      url: "https://github.com/quaxlyqueen/one-ai"
+    },
+  ];
+
   return (
     <>
-      <Nav />
+      <Navigation />
+        <div>
+          {data.map(item => (
+            <ProjectDisplay frontend={item.frontend} backend={item.backend} id={item.id} name={item.name} description={item.description} url={item.url} />
+          ))}
+        </div>
       <Footer />
     </>
   );

public/src/Resume.js

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

public/src/components/FeaturedContent.js

@@ -9,12 +9,20 @@ export default function FeaturedContent( {content} ) {
   return (
     <>
       <div className="row">
-        {content[0]}
-        {content[1]}
+        <div className="col">
+          {content[0]}
+        </div>
+        <div className="col">
+          {content[1]}
+        </div>
       </div>
       <div className="row">
-        {content[2]}
-        {content[3]}
+        <div className="col">
+          {content[2]}
+        </div>
+        <div className="col">
+          {content[3]}
+        </div>
       </div>
     </>
   );

public/src/components/Nav.js

@@ -1,22 +0,0 @@
-/*
- * 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/Navigation.js

@@ -0,0 +1,28 @@
+import Nav from 'react-bootstrap/Nav';
+import Button from 'react-bootstrap/Button';
+/*
+ * Create a nav bar component.
+ * 
+ * Use Bootstrap for styling.
+ */
+export default function Navigation() {
+  return (
+    <>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+        <a className="navbar-brand" href="/">Josh Ashton</a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
+          <ul className="navbar-nav nav-fill w-100">
+            <a className="nav-link" href="/projects"><li className="nav-item">Projects</li></a>
+            <a className="nav-link" href="/about"><li className="nav-item">About</li></a>
+            <a className="nav-link" href="/contact"><li className="nav-item">Contact</li></a>
+            <a className="nav-link" href="/resume"><li className="nav-item">Resume</li></a>
+            <a className="nav-link" href="/blog"><li className="nav-item">Blog</li></a>
+          </ul>
+        </div>
+      </nav>
+    </>
+  );
+}

public/src/components/ProjectCard.js

@@ -11,12 +11,12 @@
 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 className="card">
+        <img className="card-img-top" src={img} alt="TODO: Image caption."/>
+        <div className="card-body">
+          <h2 className="card-title dark-text">{title}</h2>
+          <p className="dark-text">{description}</p>
+          <a className = "btn btn-primary" target="_blank" href={url}>View Code on GitHub</a>
         </div>
       </div>
     </>

public/src/components/ProjectDisplay.js

@@ -0,0 +1,21 @@
+/*
+ * Create a clickable frame which expands to expose additional information on click.
+ *
+ * @param String id "Lowercase string representation of the project name."
+ * @param String name "The name of the project."
+ * @param String description "A description of the project."
+ * @param String url "The URL for the repository of the project."
+ * 
+ * TODO: Need to implement onClick
+ */
+export default function ProjectDisplay( {frontend, backend, id, name, description, url} ) {
+  return (
+    <>
+      <div className={`panel ${frontend} ${backend}`} id={id}>
+        <h3 className="label">{name}</h3>
+        <h4 className="label-text">{description}</h4>
+        <button type="button" className="btn btn-primary"><a target="_blank" href={url}>View Code on GitHub</a></button>
+      </div>
+    </>
+  );
+}

public/src/components/Splash.js

@@ -9,9 +9,9 @@
 export default function Splash( { primaryText, secondaryText }) {
   return (
     <>
-      <div>
-        <h1>{primaryText}</h1>
-        <h2>{secondaryText}</h2>
+      <div className="custom-container" id="splash">
+        <h1 className="light-text">{primaryText}</h1>
+        <h2 className="light-text">{secondaryText}</h2>
       </div>
     </>
   );

public/src/index.js

@@ -2,9 +2,15 @@ import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router";
 
+import 'bootstrap/dist/css/bootstrap.min.css';
+import "./styles.css";
+
 import Home from "./Home";
 import Projects from "./Projects";
-import "./styles.css";
+import Contact from "./Contact";
+import About from "./About";
+import Blog from "./Blog";
+import Resume from "./Resume";
 
 const root = document.getElementById("root");
 
@@ -13,6 +19,10 @@ ReactDOM.createRoot(root).render(
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/projects" element={<Projects />} />
+      <Route path="/contact" element={<Contact />} />
+      <Route path="/about" element={<About />} />
+      <Route path="/blog" element={<Blog />} />
+      <Route path="/resume" element={<Resume />} />
     </Routes>
   </BrowserRouter>
 );

public/src/styles.css

@@ -1,90 +1,325 @@
-* {
-  box-sizing: border-box;
+:root {
+  --main-dark-color: #4A245E;
+  --main-offwhite-color: white,
+  --main-midtone-color: #9BC995;
+  --main-accent-color: #673283;
+  --secondary-accent-color: #98B9AB;
 }
 
+/* GENERAL */
 body {
-  font-family: sans-serif;
-  margin: 20px;
-  padding: 0;
+    margin:0;
+    height:100vh;
+    background:
+            linear-gradient(
+                    135deg,
+                    hsl(279deg 33% 47%) 0%,
+                    hsl(279deg 40% 33%) 39%,
+                    hsl(279deg 62% 19%) 61%,
+                    hsl(279deg 94% 7%) 100%
+            );
+    background-size:300% 100%,cover;
+    animation:change 4s linear infinite;
+    animation-direction: alternate;
+    background-attachment: fixed;
+}
+
+@keyframes change {
+    from {
+        background-position: right,center;
+    }
+}
+
+/* TEXT */
+* {
+    font-family: Lato, sans-serif;
+    color: white;
+}
+
+h1, h2 {
+    font-weight: bold;
+    margin: 0;
 }
 
 h1 {
-  margin-top: 0;
-  font-size: 22px;
+    margin: 5vw 0 5vw 0;
+    font-size: 8vw;
 }
 
+
 h2 {
-  margin-top: 0;
-  font-size: 20px;
+    font-size: 4vw;
 }
 
 h3 {
-  margin-top: 0;
-  font-size: 18px;
+    font-size: 3vw;
 }
 
 h4 {
-  margin-top: 0;
-  font-size: 16px;
+  font-size: 2vw;
 }
 
-h5 {
-  margin-top: 0;
-  font-size: 14px;
+p {
+    font-size: 1vw;
 }
 
-h6 {
-  margin-top: 0;
-  font-size: 12px;
+.dark-text {
+  color: var(--main-dark-color);
 }
 
-code {
+.light-text {
+  color: var(--main-offwhite-color);
+}
+
+.label {
+  font-size: 2vw;
+}
+
+.label-text {
+  font-size: 1.5vw;
+  max-width: 80%;
+  text-align: center;
+  --white-space: nowrap;
+  --overflow: hidden;
+  --text-overflow: ellipsis;
+}
+
+/* NAV-BAR */
+.bg-light {
+    background-color: white !important;
+    padding: 0;
+}
+
+.navbar-brand {
+    padding-left: .5vw;
+    color: #4A245E;
+    font-size: 2vw;
+    font-weight: bold;
+
+    animation: 500ms;
+}
+
+.navbar-toggler {
+    border: none;
+}
+
+.navbar-toggler:focus {
+    box-shadow: none;
+    border:none;
+}
+
+.navbar-light .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(74, 36, 94, 1)' stroke-width='3.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+
+.navbar-brand:hover {
+  color: var(--main-dark-color);
+}
+
+.nav-link {
+    padding: 1.5vw;
+}
+
+.nav-link, .nav-link > .nav-item {
+  color: var(--main-dark-color);
+    font-size: 1.3vw;
+
+    animation: 500ms;
+}
+
+.nav-link:hover, .nav-link:hover > .nav-item {
+  color: var(--main-offwhite-color);
+}
+
+.nav-link:hover {
+  color: var(--main-dark-color);
+}
+
+.bar {
+  display: block;
+  width: 100%;
+  border-top: 5px var(--main-dark-color) solid;
+  padding-bottom: 1vw;
+}
+
+.carousel {
+  float: left;
+  margin-top: 5vw;
+  width: 55% !important;
+}
+
+input {
+  padding: 1em;
+  margin: .5em;
   font-size: 1.2em;
 }
 
-ul {
-  padding-inline-start: 20px;
+.search {
+  padding: 1vw;
+  background-color: var(--main-dark-color);
+  color: var(--main-offwhite-color);
 }
 
-* {
-  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;
+label, label {
+  display: inline-block;
+  border: 2px solid var(--main-offwhite-color);
+  border-radius: 5px;
   text-align: center;
-  width: 34px;
+  padding: .5em;
+  margin: 0 2em 1em 2em;
+
+  transition: 500ms;
 }
 
-.board-row:after {
-  clear: both;
-  content: '';
-  display: table;
+input[type="radio"] {
+    opacity: 0;
+    position: fixed;
+    width: 0;
 }
 
-.status {
-  margin-bottom: 10px;
-}
-.game {
-  display: flex;
-  flex-direction: row;
+input[type="radio"]:checked + label {
+    background-color: var(--main-offwhite-color);
+    color: var(--main-dark-color);
 }
 
-.game-info {
-  margin-left: 20px;
+input[type="radio"]:hover + label {
+    background-color: var(--main-offwhite-color);
+    color: var(--main-dark-color);
+}
+
+.panels {
+    flex: 1;
+    --overflow: hidden;
+}
+
+.panel {
+    max-height: 6.5vw;
+    background: var(--main-dark-color);
+    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.05);
+    color: var(--main-offwhite-color);
+    transition:
+        font-size 500ms,
+        flex 500ms,
+        padding 500ms,
+        max-height 750ms;
+    font-size: 2.5em;
+    background-position: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel > * {
+    width: 100%;
+    transition: transform 800ms;
+    flex: 1 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.panel > *:nth-child(2) {
+    transform: translateX(-1000%);
+}
+
+.panel.open-active > *:nth-child(2) {
+    transform: translateX(12.5%);
+}
+
+.panel > *:last-child {
+    transform: translateX(-1000%);
+    transition: 800ms;
+}
+
+.panel.open-active > *:last-child {
+    transform: translateX(50%);
+    transition: 800ms;
+}
+
+.panel h3 {
+    font-family: Lato, sans-serif;
+    color: var(--main-offwhite-color);
+    font-size: 1.3em;
+    padding-top: 1vw;
+}
+
+.panel.open-active {
+    max-height: 20vw;
+}
+
+.panel.open {
+    flex: 5;
+    font-size: 2em;
+}
+
+.carousel-wrapper {
+    flex: 0 0 40%;
+    padding-top: 5vw;
+}
+
+.carousel {
+    float: right;
+    margin-top: 5vw;
+    width: 55%;
+}
+
+/* MISC */
+
+.custom-container {
+    align-content: center;
+
+    padding: 5vw;
+
+    width: 90% !important;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.card-text {
+    font-size: 2vw;
+}
+
+@media (max-width: 991px) {
+    h1 {
+        font-size: 12vw;
+    }
+
+    h2 {
+        font-size: 8vw;
+    }
+
+    h3, .navbar-brand {
+        font-size: 6vw;
+    }
+
+    h4 {
+      font-size: 4vw;
+    }
+
+    p, .nav-link, .nav-link > .nav-item {
+        font-size: 3vw;
+    }
+
+    .nav-link > .nav-item {
+        font-weight: bold;
+    }
+}
+
+/*Buttons*/
+.btn {
+  padding: 0.5vw;
+  background-color: var(--main-dark-color);
+  border: 2px solid var(--main-offwhite-color);
+  transition: background-color 300ms;
+  width: 50%;
+  margin-bottom: 1vw;
+}
+
+.btn:hover {
+  background-color: var(--main-accent-color);
+  border: 2px solid var(--main-offwhite-color);
+}
+
+.btn > a {
+    text-decoration: none;
+    color: var(--main-offwhite-color);
 }