Moved to Next.js instead of express
Guusvanmeerveld
4 years ago
parent
6568206d5e
commit
421d054cd8
@ -1,34 +0,0 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
@ -0,0 +1,27 @@
|
||||
const Contact = () => (
|
||||
<div className="contact">
|
||||
<div className="container">
|
||||
<div className="header" id="contact">
|
||||
Contact
|
||||
</div>
|
||||
<form className="content" method="POST" action="/contact">
|
||||
<fieldset>
|
||||
<label htmlFor="email">Email</label>
|
||||
<input name="email" type="email" required placeholder="Your email address" id="email" />
|
||||
<label htmlFor="type">Message type</label>
|
||||
<select name="type" id="type">
|
||||
<option value="bug">Bug</option>
|
||||
<option value="question">Question</option>
|
||||
<option value="suggestion">Suggestion</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
<label htmlFor="message">Message</label>
|
||||
<textarea required name="message" placeholder="Your message" id="message"></textarea>
|
||||
<input className="button" type="submit" value="Send" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Contact;
|
||||
@ -0,0 +1,27 @@
|
||||
const Footer = () => (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<img src="/profile.png" width="100%" height="100%" alt="" className="profile" />
|
||||
<div className="branding">
|
||||
Guus van Meerveld <br />
|
||||
© 2021
|
||||
</div>
|
||||
<div className="socials">
|
||||
<a href="https://twitter.com/GuusvanMeerveld">
|
||||
<img src="/svg/twitter.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
|
||||
<img src="/svg/youtube.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://ko-fi.com/guusvanmeerveld">
|
||||
<img src="/svg/coffee.svg" alt="" />
|
||||
</a>
|
||||
<a href="https://github.com/guusvanmeerveld">
|
||||
<img src="/svg/github.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
@ -0,0 +1,23 @@
|
||||
import Image from "next/image";
|
||||
|
||||
const Landing = () => (
|
||||
<div className="landing">
|
||||
<div className="container">
|
||||
<span className="profile">
|
||||
<Image src="/profile.png" 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>
|
||||
|
||||
<a href="#projects" className="button d-block m-auto">
|
||||
Check out my projects
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Landing;
|
||||
@ -0,0 +1,13 @@
|
||||
const Navbar = () => (
|
||||
<nav className="navigation">
|
||||
<div className="container">
|
||||
<span className="header">Portfolio</span>
|
||||
<div className="items">
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
export default Navbar;
|
||||
@ -0,0 +1,27 @@
|
||||
import Head from "next/head";
|
||||
|
||||
const Page = ({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
children: JSX.Element[] | JSX.Element;
|
||||
}) => (
|
||||
<>
|
||||
<Head>
|
||||
<meta charSet="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Portfolio | {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;
|
||||
@ -0,0 +1,93 @@
|
||||
const Projects = () => (
|
||||
<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="/argo.png" width="100%" height="100%" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="project">
|
||||
<div className="content">
|
||||
<div className="cover">
|
||||
<img src="/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="cover">
|
||||
<img src="/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;
|
||||
@ -0,0 +1,2 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
||||
@ -1,7 +0,0 @@
|
||||
import '../styles/globals.css'
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
@ -0,0 +1,9 @@
|
||||
import "../styles/milligram.min.css";
|
||||
import "../styles/raleway.css";
|
||||
import "../styles/sass/index.scss";
|
||||
|
||||
function App({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
|
||||
export default App;
|
||||
@ -1,5 +0,0 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default (req, res) => {
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
@ -1,65 +0,0 @@
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className={styles.main}>
|
||||
<h1 className={styles.title}>
|
||||
Welcome to <a href="https://nextjs.org">Next.js!</a>
|
||||
</h1>
|
||||
|
||||
<p className={styles.description}>
|
||||
Get started by editing{' '}
|
||||
<code className={styles.code}>pages/index.js</code>
|
||||
</p>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<a href="https://nextjs.org/docs" className={styles.card}>
|
||||
<h3>Documentation →</h3>
|
||||
<p>Find in-depth information about Next.js features and API.</p>
|
||||
</a>
|
||||
|
||||
<a href="https://nextjs.org/learn" className={styles.card}>
|
||||
<h3>Learn →</h3>
|
||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/vercel/next.js/tree/master/examples"
|
||||
className={styles.card}
|
||||
>
|
||||
<h3>Examples →</h3>
|
||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
className={styles.card}
|
||||
>
|
||||
<h3>Deploy →</h3>
|
||||
<p>
|
||||
Instantly deploy your Next.js site to a public URL with Vercel.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Powered by{' '}
|
||||
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
import Page from "../components/Page";
|
||||
import Navbar from "../components/Navbar";
|
||||
import Landing from "../components/Landing";
|
||||
import Projects from "../components/Projects";
|
||||
import Contact from "../components/Contact";
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Page description="A simple portfolio website to display my projects." title="Guus van Meerveld">
|
||||
<Navbar />
|
||||
<Landing />
|
||||
<Projects />
|
||||
<Contact />
|
||||
<Footer />
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 3.6 KiB |
@ -0,0 +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."
|
||||
}
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 460 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1017 B |
|
After Width: | Height: | Size: 696 B |
|
After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1,122 +0,0 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 5rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-top: 1px solid #eaeaea;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
flex-basis: 45%;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,54 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
.contact {
|
||||
.header {
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
font-family: "Raleway";
|
||||
|
||||
#message {
|
||||
resize: none;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
.footer {
|
||||
background-color: #f4f5f6;
|
||||
border-top: 0.1rem solid #d1d1d1;
|
||||
|
||||
padding: 3rem;
|
||||
|
||||
font-family: "Raleway";
|
||||
|
||||
.profile {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
img {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
@import "nav.scss";
|
||||
@import "landing.scss";
|
||||
@import "project.scss";
|
||||
@import "contact.scss";
|
||||
@import "footer.scss";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
.landing {
|
||||
background: #f4f5f6;
|
||||
margin-top: 6rem;
|
||||
|
||||
.container {
|
||||
padding: 7rem 3rem;
|
||||
}
|
||||
|
||||
.profile {
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
margin: auto;
|
||||
margin-bottom: 3rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-family: "Raleway";
|
||||
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.navigation {
|
||||
z-index: 1;
|
||||
background-color: #f4f5f6;
|
||||
border-bottom: 0.1rem solid #d1d1d1;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
font-family: "Raleway";
|
||||
padding: 1.5rem 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.items {
|
||||
float: right;
|
||||
|
||||
a {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
.projects {
|
||||
.header {
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
font-family: "Raleway";
|
||||
margin-top: 3rem;
|
||||
|
||||
.project {
|
||||
border-top: 0.1rem solid #f4f5f6;
|
||||
|
||||
padding: 5rem 0;
|
||||
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
font-size: 2rem;
|
||||
width: 50%;
|
||||
|
||||
.button:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 50%;
|
||||
|
||||
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;
|
||||
|
||||
img {
|
||||
height: 15rem;
|
||||
width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"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