Guusvanmeerveld
/
Portfolio
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added component for Projects

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
guusvanmeerveld 4 years ago
parent 3c45eaac4b
commit 5c0d798ba7
2 changed files with 99 additions and 82 deletions
Show Stats Download Patch File Download Diff File

39
src/components/Project.tsx
Unescape View File

@ -0,0 +1,39 @@
import { FC } from 'react';
interface Button {
link: string;
text: string;
}
const Project: FC<{
name: string;
description: string;
buttons: Button[];
cover?: string;
right?: boolean;
}> = ({ name, description, buttons, cover, right }) => {
return (
<div className="project">
<div className="content">
<div className={right ? 'info right' : 'info'}>
<div className="title">{name}</div>
{description}
<br />
<br />
{buttons.map((button) => (
<a href={button.link} className="button">
{button.text}
</a>
))}
</div>
{cover ? (
<div className="cover">
<img src={cover} width="100%" height="100%" alt="" />
</div>
) : null}
</div>
</div>
);
};
export default Project;

140
src/components/Projects.tsx
Unescape View File

@ -1,94 +1,72 @@
const Projects = () => ( import { NextPage } from 'next';
import Project from '@components/Project';
const Projects: NextPage = () => (
<div className="projects"> <div className="projects">
<div className="container"> <div className="container">
<div className="header" id="projects"> <div className="header" id="projects">
Projects Projects
</div> </div>
<Project
<div className="project"> name="Argo"
<div className="content"> description="Argo is a new app for Magister 6, made with Dart and Flutter. It will soon be
<div className="info">
<div className="title">Argo</div>
Argo is a new app for Magister 6, made with <b>Dart and Flutter</b>. It will soon be
available on the Google Play store and (maybe) even the App store! For more information, available on the Google Play store and (maybe) even the App store! For more information,
click either of the buttons below. click either of the buttons below."
<br /> buttons={[
<br /> { link: 'https://argo-magister.net', text: 'Website' },
<a href="https://argo-magister.net" className="button"> { link: 'https://github.com/argo-client/app', text: 'Github' },
Website ]}
</a> cover="/img/argo.png"
<a href="https://github.com/argo-client/app" className="button"> />
Github
</a>
</div>
<div className="cover">
<img src="/img/argo.png" width="100%" height="100%" alt="" />
</div>
</div>
</div>
<div className="project"> <Project
<div className="content"> name="Tempo"
<div className="cover"> description="Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even
<img src="/img/tempo.png" width="100%" height="100%" alt="" /> Spotify songs. It's made in pure TypeScript and has plentiful settings."
</div> right
<div className="info right"> buttons={[
<div className="title">Tempo</div> { link: 'https://tempo.g-vm.nl', text: 'Website' },
Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even { link: 'https://tempo.g-vm.nl/invite', text: 'Invite' },
Spotify songs. It's made in pure <b>TypeScript</b> and has plentiful settings. <br /> ]}
<br /> cover="/img/tempo.png"
<a href="https://tempo.g-vm.nl" className="button"> />
Website
</a>
<a href="https://tempo.g-vm.nl/invite" className="button">
Invite
</a>
</div>
</div>
</div>
<div className="project"> <Project
<div className="content"> name="Keyzo"
<div className="info"> description="Keyzo is an electron-based program written in JavaScript and CSS but I am
<div className="title">Keyzo</div>
Keyzo is an electron-based program written in <b>JavaScript and CSS</b> but I am
planning on moving to planning on moving to
<b> TypeScript</b>. It's main use is to bring every keybind you will every need into a TypeScript. It's main use is to bring every keybind you will every need into a
single program, with a simple and neat interface. <br /> single program, with a simple and neat interface."
<br /> buttons={[
<a href="https://keyzo.net" className="button"> {
Website link: 'https://keyzo.net',
</a> text: 'Website',
<a href="https://github.com/Guusvanmeerveld/Keyzo" className="button"> },
Github {
</a> link: 'https://github.com/Guusvanmeerveld/Keyzo',
</div> text: 'Github',
<div className="cover"></div> },
</div> ]}
</div> />
<div className="project"> <Project
<div className="content"> name="Magister Auto-Login"
<div className="cover"> description="Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for
<img src="/img/autologin.png" width="100%" height="100%" alt="" /> you."
</div> right
<div className="info right"> buttons={[
<div className="title">Magister Auto-Login</div> {
Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for link: 'https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl',
you. <br /> text: 'Add to Chrome',
<br /> },
<a {
className="button" link: 'https://github.com/Guusvanmeerveld/Magister-Auto-Login',
href="https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl" text: 'Github',
> },
Add to Chrome ]}
</a> cover="/img/autologin.png"
<a className="button" href="https://github.com/Guusvanmeerveld/Magister-Auto-Login"> />
Github
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
); );

Write Preview
Loading…
Cancel
Save