Added links to intro

User can click topic to open topic's link
This commit is contained in:
Camerin 2021-10-31 18:34:47 -04:00
parent 814fae83c9
commit c27143a680
2 changed files with 7 additions and 10 deletions

View File

@ -133,7 +133,7 @@ class Intro extends React.Component {
// Topics to display in intro // Topics to display in intro
// DISCLAIMER: Please add content to the topic or bugs may occur... // DISCLAIMER: Please add content to the topic or bugs may occur...
topics = [ topics = [
<Topic title="Welcome to My Portfolio" background="/img/background.webp"> <Topic link="/about" title="Welcome to My Portfolio" background="/img/background.webp">
<div> <div>
This website helps you access the projects that I've worked on. You can navigate This website helps you access the projects that I've worked on. You can navigate
at the top to different locations in the site. Within you can find information about me, at the top to different locations in the site. Within you can find information about me,
@ -141,17 +141,12 @@ class Intro extends React.Component {
React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>. React/Redux and hosted over Vercel. You can email me at <a href="mailto:cam@camscode.com">cam@camscode.com</a>.
</div> </div>
</Topic>, </Topic>,
<Topic title="Studied at Marist College" background="img/marist.webp">
Field of Study: Computer Science
...
College: <a href="https://www.marist.edu/">Marist.edu</a>
</Topic>,
<Topic link="/github" title="Github" background="img/space.webp"> <Topic link="/github" title="Github" background="img/space.webp">
View a list of projects I've done right on this website. You can easily direct to github View a list of projects I've done right on this website. You can easily direct to github
where you can see the project code itself. where you can see the project code itself.
</Topic>, </Topic>,
<Topic title="Open the Website" background="/img/sunset.webp"> <Topic title="Explore the Website" background="/img/sunset.webp">
<a href="/" className="btn">Explore Cam's Projects</a> Explore Cam's Projects
</Topic> </Topic>
]; ];

View File

@ -11,8 +11,10 @@ const Card = (props) => {
* background - a url to the background image * background - a url to the background image
* *
*/ */
return ( return (
<div <a
href={props.link}
className="topic" className="topic"
style={{backgroundImage: props.background ? `url(${props.background})`:''}} style={{backgroundImage: props.background ? `url(${props.background})`:''}}
> >
@ -22,7 +24,7 @@ const Card = (props) => {
{props.children} {props.children}
</div> </div>
</div> </div>
</div> </a>
); );
}; };