A React JS version of my portfolio.
N/A
This project is licensed under the MIT license.
Ruben Dominguez helped me understand React by showing me an example of a self-closing tag. I also had some assistance from GitHub CoPilot chat when I got stuck on something and could not figure it out with a Google search. i.e.
Ruben also advised me to change my code from being 4 hard-coded li items to the following to make my code more DRY.
i.e.
const links = [
{ title: 'Home', url: '/' },
{ title: 'About', url: '/about' },
{ title: 'Portfolio', url: '/portfolio' },
{ title: 'Resume', url: '/resume' },
]
<ul>
{
links.map((link) => (
<ListItem key={link.title} to={link.url} title={link.title} />
))
}
</ul>
const ListItem = (props: {to: string; title: string;}) => {
return (
<li>
<a href={props.to}>{props.title}</a>
</li>
)
}
To fix some CSS issues. Bryce Berczik suggested to do the following with my header code.
<div>
<header>
<div>
<h1 className='Header'>Justin Hebenstreit</h1>
</div>
</header>
</div>
I had a mental block with the Portfolio page and Ruben was able to help me understand it better and explain it and I took notes on his advice as well. To which I later confirmed I understood what he was describing. The following code is an example.
{projects.map((project, index) => (
<Card
key={project.name + index}
name={project.name}
description={project.description}
))
}
Also, used the following resources:
NPM,
text,
Only used node index.js to create this README. I did test the code several times though using a combination of the "Open with Live Server" and "Open in Default Browser" VS Code extensions.
For any further questions you can contact me at [email protected]. You can find projects I have created or participated in at https://github.com/JHebenstreit48.