Switched to server side Next.js

dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 1890d022ff
commit 050e382984

@ -0,0 +1,33 @@
FROM node:slim AS deps
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
FROM node:slim AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
ENV NEXT_TELEMETRY_DISABLED 1;
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
FROM node:slim AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
USER nextjs
EXPOSE 3000
CMD ["yarn", "start"]

@ -0,0 +1,6 @@
module.exports = {
i18n: {
locales: ['en-US', 'nl-NL'],
defaultLocale: 'en-US',
},
}

@ -7,8 +7,7 @@
"build": "next build",
"start": "next start",
"prettify": "prettier --write .",
"lint": "eslint src",
"export": "next build && next export"
"lint": "eslint src"
},
"dependencies": {
"@types/luxon": "^1.27.1",
@ -37,4 +36,4 @@
"prettier": "^2.3.0",
"typescript": "^4.2.4"
}
}
}

@ -1,29 +0,0 @@
{
"updated": "2021-07-15T22:29:19.164Z",
"parsed": [
{
"start": "2021-07-07T17:00:00.000Z",
"end": "2021-07-07T19:00:00.000Z"
},
{
"start": "2021-07-08T17:00:00.000Z",
"end": "2021-07-08T20:00:00.000Z"
},
{
"start": "2021-07-10T17:00:00.000Z",
"end": "2021-07-10T20:30:00.000Z"
},
{
"start": "2021-07-14T17:30:00.000Z",
"end": "2021-07-14T19:30:00.000Z"
},
{
"start": "2021-07-17T17:00:00.000Z",
"end": "2021-07-17T20:30:00.000Z"
},
{
"start": "2021-07-18T10:00:00.000Z",
"end": "2021-07-18T13:30:00.000Z"
}
]
}

@ -1,2 +1,2 @@
User-agent: *
Disallow:
Disallow: /shifts

@ -5,11 +5,6 @@
padding: 3rem;
}
.profile {
width: 5rem;
height: 5rem;
}
.branding {
display: inline-block;
font-size: 2rem;
@ -25,6 +20,9 @@
}
.socialLink {
// color: var(--primary);
// cursor: pointer;
height: 3rem;
width: 3rem;
margin-right: 2rem;

@ -1,3 +1,6 @@
import Image from 'next/image';
import Link from 'next/link';
import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
import { FC } from 'react';
@ -8,10 +11,10 @@ const Footer: FC = () => {
return (
<footer className={styles.body}>
<div className="container">
<img
<Image
src="/assets/images/profile.svg"
width="100%"
height="100%"
width={50}
height={50}
alt=""
className={styles.profile + ' profile'}
/>
@ -20,21 +23,30 @@ const Footer: FC = () => {
&#169; 2021
</div>
<div className={styles.socials}>
<a href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
<FaTwitter className={styles.socialLink} />
</a>
<a
<Link passHref href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">
<a>
<FaTwitter className={styles.socialLink} />
</a>
</Link>
<Link
passHref
href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ"
aria-label="youtube link"
>
<FaYoutube className={styles.socialLink} />
</a>
<a href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
<FaCoffee className={styles.socialLink} />
</a>
<a href="https://github.com/guusvanmeerveld" aria-label="github link">
<FaGithub className={styles.socialLink} />
</a>
<a>
<FaYoutube className={styles.socialLink} />
</a>
</Link>
<Link passHref href="https://ko-fi.com/guusvanmeerveld" aria-label="kofi link">
<a>
<FaCoffee className={styles.socialLink} />
</a>
</Link>
<Link passHref href="https://github.com/guusvanmeerveld" aria-label="github link">
<a>
<FaGithub className={styles.socialLink} />
</a>
</Link>
</div>
</div>
</footer>

@ -1,4 +1,6 @@
import { useTheme } from 'next-themes';
import Link from 'next/link';
import { BiMoon } from 'react-icons/bi';
import { ImSun } from 'react-icons/im';
@ -15,9 +17,15 @@ const Navbar: FC = () => {
<div className="container">
<span className={styles.header}>Portfolio</span>
<div className={styles.items}>
<a href="/#projects">Projects</a>
<a href="/contact">Contact</a>
<a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
<Link href="/#projects">
<a>Projects</a>
</Link>
<Link href="/contact">
<a>Contact</a>
</Link>
<Link href="https://github.com/guusvanmeerveld/portfolio">
<a>Source code</a>
</Link>
<BiMoon onClick={switchTheme} className={styles.moon} />
<ImSun onClick={switchTheme} className={styles.sun} />

@ -28,13 +28,9 @@
.cover {
width: 50%;
img {
display: block;
margin: auto;
height: 20rem;
width: 20rem;
}
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 600px) {

@ -1,3 +1,6 @@
import Image from 'next/image';
import Link from 'next/link';
import { FC } from 'react';
import ProjectType from '@models/project';
@ -18,14 +21,14 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
<br />
<br />
{buttons.map((button, i) => (
<a href={button.link} className={styles.button + ' button'} key={i}>
{button.text}
</a>
<Link href={button.link} key={i}>
<a className={styles.button + ' button'}>{button.text}</a>
</Link>
))}
</div>
{cover ? (
<div className={styles.cover}>
<img src={`/assets/images/${cover}`} width="100%" height="100%" alt="" />
<Image src={`/assets/images/${cover}`} width={200} height={200} alt="" />
</div>
) : null}
</div>

@ -31,7 +31,7 @@
},
{
"name": "Keyzo",
"description": "Keyzo is an electron-based program written in JavaScript and CSS but I amplanning on moving to TypeScript. It's main use is to bring every keybind you will every need into a single program, with a simple and neat interface.",
"description": "Keyzo is an electron-based program written in JavaScript and CSS but I am planning on moving to TypeScript. It's main use is to bring every keybind you will every need into a single program, with a simple and neat interface.",
"buttons": [
{
"link": "https://keyzo.net",

@ -1,8 +1,10 @@
import Page from 'src/components/Page';
import Layout from 'src/components/Layout';
import Link from 'next/link';
import { FC } from 'react';
import Page from '@components/Page';
import Layout from '@components/Layout';
const NotFound: FC = () => (
<Page title="Page not found" description="This page either doesn't exist or has been deleted">
<Layout>
@ -10,9 +12,9 @@ const NotFound: FC = () => (
<div>
<div className="header">Not found</div>
<div className="subtitle">This page either doesn&apos;t exist or has been deleted</div>
<a href="/" className="link button">
Go back
</a>
<Link href="/">
<a className="link button">Go back</a>
</Link>
</div>
</div>
</Layout>

@ -10,8 +10,6 @@
}
.profile {
height: 10rem;
width: 10rem;
margin: auto;
margin-bottom: 3rem;
display: block;

@ -1,5 +1,7 @@
import { NextPage } from 'next';
import Image from 'next/image';
import Layout from '@components/Layout';
import Page from '@components/Page';
@ -14,14 +16,11 @@ const Home: NextPage = () => (
<div className={styles.body}>
<div className={styles.content + ' container'}>
<span className={styles.profile + ' profile'}>
<img src="/assets/images/profile.svg" width="100%" height="100%" alt="" />
<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
</span>
<span className={styles.title}>Guus van Meerveld</span>
<span className={styles.subtitle}>
TypeScript / Dart developer, <br />
currently working on Argo.
</span>
<span className={styles.subtitle}>Hi, I am a full stack web developer</span>
<a href="#projects" className="button d-block m-auto">
Check out my projects

@ -1,4 +1,6 @@
import { NextPage } from 'next';
import Link from 'next/link';
import { Info, DateTime } from 'luxon';
import useSWR from 'swr';
@ -24,9 +26,11 @@ const Error: FC = () => (
<div className={styles.error}>
<h1>Error retrieving shift information</h1>
<button className="button">Retry</button>
<a href="/">
<button className="button">Go back</button>
</a>
<Link href="/">
<a>
<button className="button">Go back</button>
</a>
</Link>
</div>
</>
);

@ -1,6 +1,8 @@
import Page from 'src/components/Page';
import Layout from 'src/components/Layout';
import { NextPage } from 'next';
import Link from 'next/link';
import Page from '@components/Page';
import Layout from '@components/Layout';
const Thanks: NextPage = () => (
<Page title="Thanks!" description="Thanks for submitting your contact form!">
@ -14,9 +16,9 @@ const Thanks: NextPage = () => (
</div>
<div className="header">Thank you!</div>
<div className="subtitle">Your submission is greatly appreciated!</div>
<a href="/" className="link button">
Go back
</a>
<Link href="/">
<a className="link button">Go back</a>
</Link>
</div>
</div>
</Layout>

Loading…
Cancel
Save