import styles from '../styles/Projects.module.css'
import Button from '../components/button.js'
import Redirect from '../components/redirect.js'

export default function Projects() {
    return <>
        <title>TheRed.SH / Projects</title>
        <div className={styles.Box}>
        <Redirect page="home"/>
        <div className={styles.ScrollBox}>
            <h1 className={styles.Header}>Here are all of my projects (Only a demo, none of the buttons work):</h1>
            <div className={styles.Project}>
                <h1 className={styles.ProjectHeader}>
                    Chatsy
                </h1>
                <p className={styles.ProjectDescription}>
                    Chatsy is a chat application that allows you to chat securely and easily with your friends, family, and whatever else you'd like! It's available cross-platform and on the web. It's also completely open-source!
                </p>
                <div className={styles.ButtonBox}>
                    <Button><i className="fab fa-github" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> View GitHub</Button><Button color='#03fca5'><i className="fas fa-external-link-alt" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> Go to website</Button>
                </div>
            </div>
            <div className={styles.Project}>
                <h1 className={styles.ProjectHeader}>
                    Boosty
                </h1>
                <p className={styles.ProjectDescription}>
                    Boosty is a simpler alternative to Chatsy, which is easier to work with and use! It features a terminal-like interface, and is available cross-platform as well, like Chatsy. It's also available on the web too and is open-source!
                </p>
                <div className={styles.ButtonBox}>
                    <Button><i className="fab fa-github" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> View GitHub</Button><Button color='#03fca5'><i className="fas fa-external-link-alt" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> Go to website</Button>
                </div>
            </div>
            <div className={styles.Project}>
                <h1 className={styles.ProjectHeader}>
                    Minequack
                </h1>
                <p className={styles.ProjectDescription}>
                    Minequack is a Minecraft clone, which is made in NodeJS! It's super simple to modify and use. It isn't anything that's meant to go commercial, just a fun little project!
                </p>
                <div className={styles.ButtonBox}>
                    <Button><i className="fas fa-cat" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> View CatCode</Button><Button color='#03fca5'><i className="fas fa-external-link-alt" style={{scale: '1.4', marginRight: '10px', marginBottom: '4px'}}/> Go to website</Button>
                </div>
            </div>
        </div>
    </div></>
}