Added prettier
guusvanmeerveld
4 years ago
parent
c4083afe3e
commit
a95aaca9b4
@ -0,0 +1,11 @@
|
|||||||
|
dist
|
||||||
|
node_modules
|
||||||
|
README.md
|
||||||
|
.vscode
|
||||||
|
yarn.lock
|
||||||
|
package-lock.json
|
||||||
|
LICENSE
|
||||||
|
.env
|
||||||
|
.prettierrc
|
||||||
|
.next
|
||||||
|
next-env.d.ts
|
||||||
@ -1,26 +1,26 @@
|
|||||||
{
|
{
|
||||||
"name": "portfolio",
|
"name": "portfolio",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start",
|
||||||
},
|
"pretify": "prettier --write ."
|
||||||
"dependencies": {
|
},
|
||||||
"axios": "^0.21.1",
|
"dependencies": {
|
||||||
"milligram": "^1.4.1",
|
"milligram": "^1.4.1",
|
||||||
"next": "10.0.8",
|
"next": "10.0.8",
|
||||||
"next-iron-session": "^4.1.12",
|
"next-themes": "^0.0.12",
|
||||||
"next-themes": "^0.0.12",
|
"react": "17.0.1",
|
||||||
"react": "17.0.1",
|
"react-dom": "17.0.1",
|
||||||
"react-dom": "17.0.1",
|
"react-icons": "^4.2.0",
|
||||||
"react-icons": "^4.2.0",
|
"sass": "^1.32.8"
|
||||||
"sass": "^1.32.8"
|
},
|
||||||
},
|
"devDependencies": {
|
||||||
"devDependencies": {
|
"@types/node": "^14.14.32",
|
||||||
"@types/node": "^14.14.32",
|
"@types/react": "^17.0.3",
|
||||||
"@types/react": "^17.0.3",
|
"prettier": "^2.2.1",
|
||||||
"typescript": "^4.2.3"
|
"typescript": "^4.2.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,16 @@
|
|||||||
{
|
{
|
||||||
"short_name": "Porfolio",
|
"short_name": "Porfolio",
|
||||||
"name": "Guus van Meerveld's portfolio",
|
"name": "Guus van Meerveld's portfolio",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/img/profile-192.png",
|
"src": "/img/profile-192.png",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"sizes": "192x192"
|
"sizes": "192x192"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"background_color": "#FFFFFF",
|
"background_color": "#FFFFFF",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"scope": "/",
|
"scope": "/",
|
||||||
"theme_color": "#9b4dca",
|
"theme_color": "#9b4dca",
|
||||||
"description": "A simple portfolio website to display my projects."
|
"description": "A simple portfolio website to display my projects."
|
||||||
}
|
}
|
||||||
@ -1,32 +1,35 @@
|
|||||||
import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from "react-icons/fa";
|
import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
const year = new Date().getFullYear();
|
const year = new Date().getFullYear();
|
||||||
return (
|
return (
|
||||||
<footer className="footer">
|
<footer className="footer">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<img src="/img/profile.svg" width="100%" height="100%" alt="" className="profile" />
|
<img src="/img/profile.svg" width="100%" height="100%" alt="" className="profile" />
|
||||||
<div className="branding">
|
<div className="branding">
|
||||||
Guus van Meerveld <br />
|
Guus van Meerveld <br />
|
||||||
© {year}
|
© {year}
|
||||||
</div>
|
</div>
|
||||||
<div className="socials">
|
<div className="socials">
|
||||||
<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
|
<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
|
||||||
<FaTwitter className="img" />
|
<FaTwitter className="img" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ" aria-label="youtube link">
|
<a
|
||||||
<FaYoutube className="img" />
|
href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"
|
||||||
</a>
|
aria-label="youtube link"
|
||||||
<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
|
>
|
||||||
<FaCoffee className="img" />
|
<FaYoutube className="img" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/guusvanmeerveld" aria-label="github link">
|
<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
|
||||||
<FaGithub className="img" />
|
<FaCoffee className="img" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<a href="https://github.com/guusvanmeerveld" aria-label="github link">
|
||||||
</div>
|
<FaGithub className="img" />
|
||||||
</footer>
|
</a>
|
||||||
);
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Footer;
|
export default Footer;
|
||||||
|
|||||||
@ -1,21 +1,21 @@
|
|||||||
const Landing = () => (
|
const Landing = () => (
|
||||||
<div className="landing">
|
<div className="landing">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<span className="profile">
|
<span className="profile">
|
||||||
<img src="/img/profile.svg" width="100%" height="100%" alt="" />
|
<img src="/img/profile.svg" width="100%" height="100%" alt="" />
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="title">Guus van Meerveld</span>
|
<span className="title">Guus van Meerveld</span>
|
||||||
<span className="subtitle">
|
<span className="subtitle">
|
||||||
TypeScript / Dart developer, <br />
|
TypeScript / Dart developer, <br />
|
||||||
currently working on Argo.
|
currently working on Argo.
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<a href="#projects" className="button d-block m-auto">
|
<a href="#projects" className="button d-block m-auto">
|
||||||
Check out my projects
|
Check out my projects
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Landing;
|
export default Landing;
|
||||||
|
|||||||
@ -1,12 +1,12 @@
|
|||||||
import Navbar from "./Navbar";
|
import Navbar from './Navbar';
|
||||||
import Footer from "./Footer";
|
import Footer from './Footer';
|
||||||
|
|
||||||
const Layout = ({ children }) => (
|
const Layout = ({ children }) => (
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{children}
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
import { useTheme } from "next-themes";
|
import { useTheme } from 'next-themes';
|
||||||
import { BiMoon } from "react-icons/bi";
|
import { BiMoon } from 'react-icons/bi';
|
||||||
import { ImSun } from "react-icons/im";
|
import { ImSun } from 'react-icons/im';
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const switchTheme = () => setTheme(theme == "dark" ? "light" : "dark");
|
const switchTheme = () => setTheme(theme == 'dark' ? 'light' : 'dark');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="navigation">
|
<nav className="navigation">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<span className="header">Portfolio</span>
|
<span className="header">Portfolio</span>
|
||||||
<div className="items">
|
<div className="items">
|
||||||
<a href="/#projects">Projects</a>
|
<a href="/#projects">Projects</a>
|
||||||
<a href="/#contact">Contact</a>
|
<a href="/#contact">Contact</a>
|
||||||
<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
|
<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
|
||||||
|
|
||||||
<BiMoon onClick={switchTheme} className="dark-switch moon" />
|
<BiMoon onClick={switchTheme} className="dark-switch moon" />
|
||||||
<ImSun onClick={switchTheme} className="dark-switch sun" />
|
<ImSun onClick={switchTheme} className="dark-switch sun" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Navbar;
|
export default Navbar;
|
||||||
|
|||||||
@ -1,27 +1,27 @@
|
|||||||
import Head from "next/head";
|
import Head from 'next/head';
|
||||||
|
|
||||||
const Page = ({
|
const Page = ({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
children: JSX.Element[] | JSX.Element;
|
children: JSX.Element[] | JSX.Element;
|
||||||
}) => (
|
}) => (
|
||||||
<>
|
<>
|
||||||
<Head>
|
<Head>
|
||||||
<meta charSet="UTF-8" />
|
<meta charSet="UTF-8" />
|
||||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>G-VM | {title}</title>
|
<title>G-VM | {title}</title>
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
<meta name="keywords" content="guus van meerveld argo magister tempo discord" />
|
<meta name="keywords" content="guus van meerveld argo magister tempo discord" />
|
||||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||||
<link rel="apple-touch-icon" sizes="192x192" href="/img/profile-192.png" />
|
<link rel="apple-touch-icon" sizes="192x192" href="/img/profile-192.png" />
|
||||||
</Head>
|
</Head>
|
||||||
{children}
|
{children}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Page;
|
export default Page;
|
||||||
|
|||||||
@ -1,93 +1,96 @@
|
|||||||
const Projects = () => (
|
const Projects = () => (
|
||||||
<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>
|
||||||
|
|
||||||
<div className="project">
|
<div className="project">
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="info">
|
<div className="info">
|
||||||
<div className="title">Argo</div>
|
<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
|
Argo is a new app for Magister 6, made with <b>Dart and Flutter</b>. It will soon be
|
||||||
Play store and (maybe) even the App store! For more information, click either of the buttons below.
|
available on the Google Play store and (maybe) even the App store! For more information,
|
||||||
<br />
|
click either of the buttons below.
|
||||||
<br />
|
<br />
|
||||||
<a href="https://argo-magister.net" className="button">
|
<br />
|
||||||
Website
|
<a href="https://argo-magister.net" className="button">
|
||||||
</a>
|
Website
|
||||||
<a href="https://github.com/argo-client/app" className="button">
|
</a>
|
||||||
Github
|
<a href="https://github.com/argo-client/app" className="button">
|
||||||
</a>
|
Github
|
||||||
</div>
|
</a>
|
||||||
<div className="cover">
|
</div>
|
||||||
<img src="/img/argo.png" width="100%" height="100%" alt="" />
|
<div className="cover">
|
||||||
</div>
|
<img src="/img/argo.png" width="100%" height="100%" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="project">
|
<div className="project">
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="cover">
|
<div className="cover">
|
||||||
<img src="/img/tempo.png" width="100%" height="100%" alt="" />
|
<img src="/img/tempo.png" width="100%" height="100%" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="info right">
|
<div className="info right">
|
||||||
<div className="title">Tempo</div>
|
<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
|
Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even
|
||||||
made in pure <b>TypeScript</b> and has plentiful settings. <br />
|
Spotify songs. It's made in pure <b>TypeScript</b> and has plentiful settings. <br />
|
||||||
<br />
|
<br />
|
||||||
<a href="https://tempo.g-vm.nl" className="button">
|
<a href="https://tempo.g-vm.nl" className="button">
|
||||||
Website
|
Website
|
||||||
</a>
|
</a>
|
||||||
<a href="https://tempo.g-vm.nl/invite" className="button">
|
<a href="https://tempo.g-vm.nl/invite" className="button">
|
||||||
Invite
|
Invite
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="project">
|
<div className="project">
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="info">
|
<div className="info">
|
||||||
<div className="title">Keyzo</div>
|
<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
|
Keyzo is an electron-based program written in <b>JavaScript and CSS</b> but I am
|
||||||
<b> TypeScript</b>. It's main use is to bring every keybind you will every need into a single program, with
|
planning on moving to
|
||||||
a simple and neat interface. <br />
|
<b> TypeScript</b>. It's main use is to bring every keybind you will every need into a
|
||||||
<br />
|
single program, with a simple and neat interface. <br />
|
||||||
<a href="https://keyzo.net" className="button">
|
<br />
|
||||||
Website
|
<a href="https://keyzo.net" className="button">
|
||||||
</a>
|
Website
|
||||||
<a href="https://github.com/Guusvanmeerveld/Keyzo" className="button">
|
</a>
|
||||||
Github
|
<a href="https://github.com/Guusvanmeerveld/Keyzo" className="button">
|
||||||
</a>
|
Github
|
||||||
</div>
|
</a>
|
||||||
<div className="cover"></div>
|
</div>
|
||||||
</div>
|
<div className="cover"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="project">
|
<div className="project">
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="cover">
|
<div className="cover">
|
||||||
<img src="/img/autologin.png" width="100%" height="100%" alt="" />
|
<img src="/img/autologin.png" width="100%" height="100%" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="info right">
|
<div className="info right">
|
||||||
<div className="title">Magister Auto-Login</div>
|
<div className="title">Magister Auto-Login</div>
|
||||||
Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you. <br />
|
Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for
|
||||||
<br />
|
you. <br />
|
||||||
<a
|
<br />
|
||||||
className="button"
|
<a
|
||||||
href="https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl"
|
className="button"
|
||||||
>
|
href="https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl"
|
||||||
Add to Chrome
|
>
|
||||||
</a>
|
Add to Chrome
|
||||||
<a className="button" href="https://github.com/Guusvanmeerveld/Magister-Auto-Login">
|
</a>
|
||||||
Github
|
<a className="button" href="https://github.com/Guusvanmeerveld/Magister-Auto-Login">
|
||||||
</a>
|
Github
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Projects;
|
export default Projects;
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
import Page from "src/components/Page";
|
import Page from 'src/components/Page';
|
||||||
import Layout from "src/components/Layout";
|
import Layout from 'src/components/Layout';
|
||||||
|
|
||||||
const NotFound = () => (
|
const NotFound = () => (
|
||||||
<Page title="Page not found" description="This page either doesn't exist or has been deleted">
|
<Page title="Page not found" description="This page either doesn't exist or has been deleted">
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="page">
|
<div className="page">
|
||||||
<div>
|
<div>
|
||||||
<div className="header">Not found</div>
|
<div className="header">Not found</div>
|
||||||
<div className="subtitle">This page either doesn't exist or has been deleted</div>
|
<div className="subtitle">This page either doesn't exist or has been deleted</div>
|
||||||
<a href="/" className="link button">
|
<a href="/" className="link button">
|
||||||
Go back
|
Go back
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default NotFound;
|
export default NotFound;
|
||||||
|
|||||||
@ -1,20 +1,20 @@
|
|||||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
import Document, { Html, Head, Main, NextScript } from 'next/document';
|
||||||
|
|
||||||
export default class AppDocument extends Document {
|
export default class AppDocument extends Document {
|
||||||
static async getInitialProps(ctx) {
|
static async getInitialProps(ctx) {
|
||||||
const initialProps = await Document.getInitialProps(ctx);
|
const initialProps = await Document.getInitialProps(ctx);
|
||||||
return { ...initialProps };
|
return { ...initialProps };
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Html lang="en">
|
<Html lang="en">
|
||||||
<Head />
|
<Head />
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
<NextScript />
|
<NextScript />
|
||||||
</body>
|
</body>
|
||||||
</Html>
|
</Html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,36 +1,36 @@
|
|||||||
import Page from "@components/Page";
|
import Page from '@components/Page';
|
||||||
import Layout from "@components/Layout";
|
import Layout from '@components/Layout';
|
||||||
import { Component } from "react";
|
import { Component } from 'react';
|
||||||
|
|
||||||
class Binas extends Component {
|
class Binas extends Component {
|
||||||
links: string[];
|
links: string[];
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
this.links = new Array();
|
this.links = new Array();
|
||||||
|
|
||||||
for (let i = 1; i < 305; i++) {
|
for (let i = 1; i < 305; i++) {
|
||||||
this.links.push(this.link(i));
|
this.links.push(this.link(i));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
link = (page) =>
|
link = (page) =>
|
||||||
`https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
|
`https://cdp.contentdelivery.nu/1fa0c165-3b6c-4c5b-acee-a231157e66a3/20160908101125/extract/assets/img/layout/${page}.jpg`;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
|
<Page title="Binas" description="Voor wanneer je effe de binas nodig hebt">
|
||||||
<Layout>
|
<Layout>
|
||||||
<div className="binas">
|
<div className="binas">
|
||||||
{this.links.map((link, i) => (
|
{this.links.map((link, i) => (
|
||||||
<img key={i} src={link} alt="" />
|
<img key={i} src={link} alt="" />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Binas;
|
export default Binas;
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
import Page from "@components/Page";
|
import Page from '@components/Page';
|
||||||
import Landing from "@components/Landing";
|
import Landing from '@components/Landing';
|
||||||
import Projects from "@components/Projects";
|
import Projects from '@components/Projects';
|
||||||
import Contact from "@components/Contact";
|
import Contact from '@components/Contact';
|
||||||
import Layout from "@components/Layout";
|
import Layout from '@components/Layout';
|
||||||
|
|
||||||
const Home = () => (
|
const Home = () => (
|
||||||
<Page description="A simple portfolio website to display my projects." title="Projects">
|
<Page description="A simple portfolio website to display my projects." title="Projects">
|
||||||
<Layout>
|
<Layout>
|
||||||
<Landing />
|
<Landing />
|
||||||
<Projects />
|
<Projects />
|
||||||
<Contact />
|
<Contact />
|
||||||
</Layout>
|
</Layout>
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
@ -1,54 +1,57 @@
|
|||||||
/* cyrillic-ext */
|
/* cyrillic-ext */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEVJz9d-c8.woff2)
|
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCFPrEVJz9d-c8.woff2)
|
||||||
format("woff2");
|
format('woff2');
|
||||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* cyrillic */
|
/* cyrillic */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEVJz9d-c8.woff2)
|
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCMPrEVJz9d-c8.woff2)
|
||||||
format("woff2");
|
format('woff2');
|
||||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* vietnamese */
|
/* vietnamese */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEVJz9d-c8.woff2)
|
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCHPrEVJz9d-c8.woff2)
|
||||||
format("woff2");
|
format('woff2');
|
||||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
|
||||||
|
U+1EA0-1EF9, U+20AB;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin-ext */
|
/* latin-ext */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEVJz9d-c8.woff2)
|
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEVJz9d-c8.woff2)
|
||||||
format("woff2");
|
format('woff2');
|
||||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
|
||||||
|
U+2C60-2C7F, U+A720-A7FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* latin */
|
/* latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrEVJz9d.woff2) format("woff2");
|
src: url(https://fonts.gstatic.com/s/raleway/v19/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrEVJz9d.woff2)
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
format('woff2');
|
||||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
|
||||||
|
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,31 +1,31 @@
|
|||||||
.binas {
|
.binas {
|
||||||
padding-top: 6rem;
|
padding-top: 6rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
border: 0.1rem solid var(--borders);
|
border: 0.1rem solid var(--borders);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
|
|
||||||
@media screen and (min-width: 0px) {
|
@media screen and (min-width: 0px) {
|
||||||
height: 55rem;
|
height: 55rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 300px) {
|
@media screen and (min-width: 300px) {
|
||||||
height: 70rem;
|
height: 70rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
height: 85rem;
|
height: 85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 900px) {
|
@media screen and (min-width: 900px) {
|
||||||
height: 100rem;
|
height: 100rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,24 +1,24 @@
|
|||||||
.contact {
|
.contact {
|
||||||
.header {
|
.header {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
border-top: 0.1rem solid var(--borders);
|
border-top: 0.1rem solid var(--borders);
|
||||||
padding-top: 4rem;
|
padding-top: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea,
|
textarea,
|
||||||
select {
|
select {
|
||||||
border-color: var(--borders);
|
border-color: var(--borders);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
|
|
||||||
#message {
|
#message {
|
||||||
resize: none;
|
resize: none;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
.footer {
|
.footer {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
border-top: 0.1rem solid var(--borders);
|
border-top: 0.1rem solid var(--borders);
|
||||||
|
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
|
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.branding {
|
.branding {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.socials {
|
.socials {
|
||||||
margin-left: 4rem;
|
margin-left: 4rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,39 +1,39 @@
|
|||||||
:root {
|
:root {
|
||||||
--background: white;
|
--background: white;
|
||||||
--secondary: #f4f5f6;
|
--secondary: #f4f5f6;
|
||||||
--borders: #e4e4e4;
|
--borders: #e4e4e4;
|
||||||
--links: #9a36d8;
|
--links: #9a36d8;
|
||||||
--foreground: #606c76;
|
--foreground: #606c76;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme='dark'] {
|
||||||
.profile {
|
.profile {
|
||||||
filter: invert(1);
|
filter: invert(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
--background: #212123;
|
--background: #212123;
|
||||||
--links: #c181e8;
|
--links: #c181e8;
|
||||||
--secondary: #1c1c1c;
|
--secondary: #1c1c1c;
|
||||||
--borders: #3c3838;
|
--borders: #3c3838;
|
||||||
--foreground: rgb(236, 235, 235);
|
--foreground: rgb(236, 235, 235);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--links);
|
color: var(--links);
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "nav.scss";
|
@import 'nav.scss';
|
||||||
@import "landing.scss";
|
@import 'landing.scss';
|
||||||
@import "project.scss";
|
@import 'project.scss';
|
||||||
@import "contact.scss";
|
@import 'contact.scss';
|
||||||
@import "footer.scss";
|
@import 'footer.scss';
|
||||||
|
|
||||||
@import "binas.scss";
|
@import 'binas.scss';
|
||||||
@import "upload.scss";
|
@import 'upload.scss';
|
||||||
@import "page.scss";
|
@import 'page.scss';
|
||||||
|
|||||||
@ -1,31 +1,31 @@
|
|||||||
.landing {
|
.landing {
|
||||||
background: var(--secondary);
|
background: var(--secondary);
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
padding: 7rem 3rem;
|
padding: 7rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile {
|
.profile {
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 4rem;
|
margin-bottom: 4rem;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,47 +1,47 @@
|
|||||||
.navigation {
|
.navigation {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
border-bottom: 0.1rem solid var(--borders);
|
border-bottom: 0.1rem solid var(--borders);
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items {
|
.items {
|
||||||
float: right;
|
float: right;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.moon {
|
.moon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-switch {
|
.dark-switch {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme='dark'] {
|
||||||
.sun {
|
.sun {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.moon {
|
.moon {
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,26 +1,26 @@
|
|||||||
.page {
|
.page {
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 10rem;
|
font-size: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,64 +1,64 @@
|
|||||||
.projects {
|
.projects {
|
||||||
.header {
|
.header {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
font-family: "Raleway";
|
font-family: 'Raleway';
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
|
|
||||||
.project {
|
.project {
|
||||||
border-top: 0.1rem solid var(--borders);
|
border-top: 0.1rem solid var(--borders);
|
||||||
|
|
||||||
padding: 5rem 0;
|
padding: 5rem 0;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
.button:not(:last-child) {
|
.button:not(:last-child) {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover {
|
.cover {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
height: 20rem;
|
height: 20rem;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
.cover,
|
.cover,
|
||||||
.info {
|
.info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
width: 15rem;
|
width: 15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
.upload {
|
.upload {
|
||||||
padding-top: 6rem;
|
padding-top: 6rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,25 +1,25 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@components/*": ["src/components/*"],
|
"@components/*": ["src/components/*"],
|
||||||
"@public/*": ["src/public/*"],
|
"@public/*": ["src/public/*"],
|
||||||
"@styles/*": ["src/styles/*"]
|
"@styles/*": ["src/styles/*"]
|
||||||
},
|
},
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": ["dom", "dom.iterable", "esnext"],
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": false,
|
"strict": false,
|
||||||
"forceConsistentCasingInFileNames": true,
|
"forceConsistentCasingInFileNames": true,
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve"
|
"jsx": "preserve"
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||||
"exclude": ["node_modules"]
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue