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;

142
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
name="Argo"
description="Argo is a new app for Magister 6, made with Dart and Flutter. It will soon be
available on the Google Play store and (maybe) even the App store! For more information,
click either of the buttons below."
buttons={[
{ link: 'https://argo-magister.net', text: 'Website' },
{ link: 'https://github.com/argo-client/app', text: 'Github' },
]}
cover="/img/argo.png"
/>
<div className="project"> <Project
<div className="content"> name="Tempo"
<div className="info"> description="Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even
<div className="title">Argo</div> Spotify songs. It's made in pure TypeScript and has plentiful settings."
Argo is a new app for Magister 6, made with <b>Dart and Flutter</b>. It will soon be right
available on the Google Play store and (maybe) even the App store! For more information, buttons={[
click either of the buttons below. { link: 'https://tempo.g-vm.nl', text: 'Website' },
<br /> { link: 'https://tempo.g-vm.nl/invite', text: 'Invite' },
<br /> ]}
<a href="https://argo-magister.net" className="button"> cover="/img/tempo.png"
Website />
</a>
<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="Keyzo"
<div className="cover"> description="Keyzo is an electron-based program written in JavaScript and CSS but I am
<img src="/img/tempo.png" width="100%" height="100%" alt="" />
</div>
<div className="info right">
<div className="title">Tempo</div>
Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even
Spotify songs. It's made in pure <b>TypeScript</b> and has plentiful settings. <br />
<br />
<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">
<div className="content">
<div className="info">
<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