Guusvanmeerveld
/
Portfolio
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switched to server side Next.js

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
Guusvanmeerveld 3 years ago
parent 1890d022ff
commit 050e382984
16 changed files with 119 additions and 88 deletions
Show Stats Download Patch File Download Diff File

33
Dockerfile
Unescape View File

@ -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"]

6
next.config.js
Unescape View File

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

3
package.json
Unescape View File

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

29
public/appie.json
Unescape View File

@ -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"
}
]
}

2
public/robots.txt
Unescape View File

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

8
src/components/Footer.module.scss
Unescape View File

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

42
src/components/Footer.tsx
Unescape View File

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

14
src/components/Navbar.tsx
Unescape View File

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

10
src/components/Project.module.scss
Unescape View File

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

11
src/components/Project.tsx
Unescape View File

@ -1,3 +1,6 @@
import Image from 'next/image';
import Link from 'next/link';
import { FC } from 'react'; import { FC } from 'react';
import ProjectType from '@models/project'; import ProjectType from '@models/project';
@ -18,14 +21,14 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
<br /> <br />
<br /> <br />
{buttons.map((button, i) => ( {buttons.map((button, i) => (
<a href={button.link} className={styles.button + ' button'} key={i}> <Link href={button.link} key={i}>
{button.text} <a className={styles.button + ' button'}>{button.text}</a>
</a> </Link>
))} ))}
</div> </div>
{cover ? ( {cover ? (
<div className={styles.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> </div>
) : null} ) : null}
</div> </div>

2
src/config/projects.json
Unescape View File

@ -31,7 +31,7 @@
}, },
{ {
"name": "Keyzo", "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": [ "buttons": [
{ {
"link": "https://keyzo.net", "link": "https://keyzo.net",

12
src/pages/404.tsx
Unescape View File

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

2
src/pages/Home.module.scss
Unescape View File

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

9
src/pages/index.tsx
Unescape View File

@ -1,5 +1,7 @@
import { NextPage } from 'next'; import { NextPage } from 'next';
import Image from 'next/image';
import Layout from '@components/Layout'; import Layout from '@components/Layout';
import Page from '@components/Page'; import Page from '@components/Page';
@ -14,14 +16,11 @@ const Home: NextPage = () => (
<div className={styles.body}> <div className={styles.body}>
<div className={styles.content + ' container'}> <div className={styles.content + ' container'}>
<span className={styles.profile + ' profile'}> <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>
<span className={styles.title}>Guus van Meerveld</span> <span className={styles.title}>Guus van Meerveld</span>
<span className={styles.subtitle}> <span className={styles.subtitle}>Hi, I am a full stack web developer</span>
TypeScript / Dart developer, <br />
currently working on Argo.
</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

10
src/pages/shifts.tsx
Unescape View File

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

12
src/pages/thanks.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save