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