I’ve got almost everything to pass (if I toggle some CSS I prefer to leave on for now, it passes everything except number 7) which requires a local hash link in the NavBar. Because I’m using Browser Router (known to not work with local hashes, I’ve also added the package for HashLink. My guess is this added complexity is somehow obscuring the testing, but what it renders to the finished DOM should still match what the automated testing is looking for, which is a link in the NavBar to another section of the page. I also used it in the footer to get back to the top of the page.
assignment: Build a Personal Portfolio Webpage
repo: https://github.com/TurtleWolfe/TurtleWolfe
live demo: https://TurtleWolfe.com
App.js
import logo from './logo.svg';
import NavBar from './components/NavBar/NavBar';
import Footer from './components/Footer/Footer';
import About from "./components/About/About";
// import Quote from "./components/pages/quote/quote";
// import MarkDown from "./components/pages/markdown/markdown";
// import Calculator from "./components/pages/calculator/Calculator";
// import Drum from "./components/pages/drum/Drum";
// import Pomodoro from "./components/pages/pomodoro/Pomodoro";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
// import { Container } from 'react-bootstrap';
import { Container, Row, Image } from 'react-bootstrap';
import fccCert from '../src/images/fccCertificate.png';
// import React, { Fragment } from 'react';
import './App.css';
// import { Fragment } from 'react';
function App() {
return (
<Router>
<div className="App">
<NavBar />
<header className="App-header bg-image">
<Switch>
<Route exact path='/' render={props => (
<Container id="welcome-section">
<p className="App-Orange">
<h1>
Custom Apps & Sites for Small Companies
</h1>
</p>
<a
className="App-link"
href="https://github.com/TurtleWolfe/TurtleWolfe"
target="_blank"
rel="noopener noreferrer"
title="fccTempLate"
>
{/* fccTempLate */}
<span className="App-hammer">
<img src={logo} className="App-logo" alt="logo" />
</span>
</a>
<div id="projects">
<h4>
<a
className="App-link project-tile"
href="https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects"
target="_blank"
rel="noopener noreferrer"
title="FreeCodeCamp.com Front End Projects"
>
<i className="fab fa-free-code-camp"></i>Front End Projects <i className="fab fa-free-code-camp"></i>
</a>
</h4>
<h5>
<a
className="App-link"
href="https://www.twitch.tv/collections/mgPReDzBVBbReg"
target="_blank"
rel="noopener noreferrer"
title="These Episodes on Twitch I build a template for my freeCodeCamp projects, with FontAwesome, React-BootStrap & Analytics"
>
<i className="fab fa-twitch"></i> These Episodes on Twitch <i className="fab fa-twitch"></i>
</a>
</h5>
</div>
<p className="App-Orange" >
Node React Linux Docker
</p>
<p className="App-Orange" >
Full Stack AWS & Google Cloud
</p>
<p className="App-Orange" >
Mobile-First Responsive Graphic Design SVG
</p>
<p className="App-Orange" >
PhotoShop or GIMP & CAD or SketchUp
</p>
{/* <p className="App-Orange App-Lorem" id="projects"> */}
<p className="App-Orange" id="projects">
3D Augmented Reality with C# in Unity
</p>
<Container className="About justify-content-center">
<Row as="a" // GitHub
// id="profile-link"
className="ispace App-link justify-content-center"
href="https://github.com/TurtleWolfe"
target="_blank"
rel="noopener noreferrer"
title="GitHub"
>
<i className="ispace fab fa-github"></i> GitHub <i className="ispace fab fa-github"></i>
</Row>
<strong> {/* Twitch */}
<Row as="a"
className="ispace App-link justify-content-center"
href="https://www.twitch.tv/turtlewolfe"
target="_blank"
rel="noopener noreferrer"
title="Learn React"
>
<i class="ispace fab fa-twitch"></i> Twitch <i class="ispace fab fa-twitch"></i>
</Row>
</strong>
<Row as="a" // Twitter
className="ispace App-link justify-content-center"
// href="https://twitter.com/JonPohlner?lang=en"
href="https://twitter.com/ScriptHammer?lang=en"
target="_blank"
rel="noopener noreferrer"
title="Learn React"
>
<i class="ispace fab fa-twitter"></i> Twitter <i class="ispace fab fa-twitter"></i>
</Row>
<Row as="a" // YouTube
className="ispace App-link justify-content-center"
href="https://www.youtube.com/playlist?list=PLETG2T1KvnioI_uRwEx1-efEI6EpoN_ZR"
target="_blank"
rel="noopener noreferrer"
title="YouTube/TW"
>
<i className="ispace fab fa-youtube"></i> YouTube <i className="ispace fab fa-youtube"></i>
</Row>
<Row as="a" // LinkedIn
className="ispace App-link justify-content-center"
href="https://www.linkedin.com/in/jonathan-pohlner-87796377/"
target="_blank"
rel="noopener noreferrer"
title="Learn React"
>
<i className="ispace fab fa-linkedin"></i> LinkedIn <i className="ispace fab fa-linkedin"></i>
</Row>
<br></br>
<Row className="justify-content-center">
<Image src={fccCert} fluid />
</Row>
</Container>
</Container>
)} />
{/* <Route href="#projects" /> */}
{/* <Route exact path='/quote' component={Quote} /> */}
{/* <Route exact path='/markdown' component={MarkDown} /> */}
{/* <Route exact path='/calculator' component={Calculator} /> */}
{/* <Route exact path='/drum' component={Drum} /> */}
{/* <Route exact path='/pomodoro' component={Pomodoro} /> */}
<Route exact path='/about' component={About} />
</Switch>
</header>
<Footer />
</div>
</Router>
);
}
export default App;