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

Made app next export compatible

Browse Source
dependabot/npm_and_yarn/typescript-eslint/parser-4.33.0
guusvanmeerveld 2 years ago
parent 68e9bca751
commit a9047e0e8a
27 changed files with 1516 additions and 160 deletions
Show Stats Download Patch File Download Diff File

14
.eslintrc.json
Unescape View File

@ -1,9 +1,7 @@
{
"plugins": [
"prettier"
],
"extends": "next/core-web-vitals",
"rules": {
"prettier/prettier": "error"
}
}
"plugins": ["prettier"],
"extends": "next/core-web-vitals",
"rules": {
"prettier/prettier": "error"
}
}

5
.github/workflows/build.yml vendored
Unescape View File

@ -22,7 +22,7 @@ jobs:
- name: ESlint check
run: yarn lint
docker:
needs: test
runs-on: ubuntu-latest
@ -35,7 +35,7 @@ jobs:
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v1
@ -58,4 +58,3 @@ jobs:
- name: Image digest
run: echo ${{ steps.docker_build.outputs.digest }}

3
.prettierignore
Unescape View File

@ -8,4 +8,5 @@ LICENSE
.env
.prettierrc
.next
next-env.d.ts
next-env.d.ts
out

8
docker-compose.yml
Unescape View File

@ -1,7 +1,7 @@
version: '3'
services:
app:
container_name: portfolio
build: .
env_file: .env
app:
container_name: portfolio
build: .
env_file: .env

10
next.config.js
Unescape View File

@ -1,16 +1,18 @@
// @ts-check
const { i18n } = require('./next-i18next.config');
/**
* @type {import('next').NextConfig}
*/
module.exports = {
i18n,
images: {
domains: [process.env.CDN_ENDPOINT],
loader: 'imgix',
path: process.env.IMGIX_PATH ?? 'https://guusvanmeerveld.imgix.net',
},
env: {
CDN_ENDPOINT: process.env.CDN_ENDPOINT,
},
webpack: (config) => {
config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'] });
return config;
},
};

5
package.json
Unescape View File

@ -5,6 +5,7 @@
"scripts": {
"dev": "next dev",
"build": "next build",
"export": "next build && next export",
"start": "next start",
"prettify": "prettier --write .",
"lint": "next lint"
@ -20,9 +21,11 @@
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"sass": "^1.42.1",
"sharp": "^0.29.1"
"sharp": "^0.29.1",
"swr": "^1.0.1"
},
"devDependencies": {
"@svgr/webpack": "^5.5.0",
"@types/node": "^15.6.1",
"@types/react": "^17.0.6",
"eslint": "^7.27.0",

5
public/locales/en/404.json
Unescape View File

@ -1,5 +0,0 @@
{
"title": "Page not found",
"description": "This page either doesn't exist or has been deleted",
"back": "Go back"
}

0
public/locales/en/common.json
Unescape View File

9
public/locales/en/home.json
Unescape View File

@ -1,9 +0,0 @@
{
"title": "Home",
"description": "A simple portfolio website to display my projects.",
"subtitle": "Hi, I am a full stack web developer",
"projects": {
"title": "Projects",
"button": "Check out my projects"
}
}

6
public/locales/en/nav.json
Unescape View File

@ -1,6 +0,0 @@
{
"title": "Portfolio",
"projects": "Projects",
"contact": "Contact",
"github": "Source code"
}

5
public/locales/nl/404.json
Unescape View File

@ -1,5 +0,0 @@
{
"title": "Pagina niet gevonden",
"description": "Deze pagina bestaat niet of is verwijderd",
"back": "Ga terug"
}

0
public/locales/nl/common.json
Unescape View File

9
public/locales/nl/home.json
Unescape View File

@ -1,9 +0,0 @@
{
"title": "Thuis",
"description": "Een simpele portfolio website om mijn projecten te bekijken.",
"subtitle": "Hoi, Ik ben een full stack web developer",
"projects": {
"title": "Projecten",
"button": "Bekijk mijn projecten"
}
}

6
public/locales/nl/nav.json
Unescape View File

@ -1,6 +0,0 @@
{
"title": "Portfolio",
"projects": "Projecten",
"contact": "Contact",
"github": "Bron code"
}

4
public/manifest.json
Unescape View File

@ -3,7 +3,7 @@
"name": "Guus van Meerveld's portfolio",
"icons": [
{
"src": "/assets/images/profile-192.png",
"src": "/favicon.ico",
"type": "image/png",
"sizes": "192x192"
}
@ -13,4 +13,4 @@
"scope": "/",
"theme_color": "#388e3c",
"description": "A simple portfolio website to display my projects."
}
}

13
src/components/Footer.tsx
Unescape View File

@ -1,26 +1,21 @@
import Image from 'next/image';
import Link from 'next/link';
import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa';
import { FC } from 'react';
import { ProfileImage } from '@svg/index';
import styles from './Footer.module.scss';
const Footer: FC = () => {
return (
<footer className={styles.body}>
<div className="container">
<Image
src="/assets/images/profile.svg"
width={50}
height={50}
alt=""
className={styles.profile + ' profile'}
/>
<ProfileImage className={styles.profile + ' profile'} width={50} height={50} />
<div className={styles.branding}>
Guus van Meerveld <br />
&#169; 2021
&#169; 2017 - {new Date().getFullYear()}
</div>
<div className={styles.socials}>
<Link passHref href="https://twitter.com/GuusvanMeerveld" aria-label="twitter link">

5
src/components/Navbar.module.scss
Unescape View File

@ -21,9 +21,8 @@
.header {
flex: 1;
// height: max-content;
font-size: 2rem;
display: flex;
align-items: center;
}
.select {

48
src/components/Navbar.tsx
Unescape View File

@ -1,38 +1,18 @@
import { useRouter } from 'next/router';
import { useTheme } from 'next-themes';
import Link from 'next/link';
import React, { ChangeEvent, FC } from 'react';
import { useTranslation } from 'next-i18next';
import React, { FC } from 'react';
import { BiMoon } from 'react-icons/bi';
import { ImSun } from 'react-icons/im';
import styles from './Navbar.module.scss';
import { useTranslation } from 'next-i18next';
const LanguageSelector: FC = () => {
const router = useRouter();
const locale = router.locale;
const updateLocale = (e: ChangeEvent<HTMLSelectElement>) => {
router.push('', '', { locale: e.target.value });
};
return (
<select className={styles.select} onChange={updateLocale} defaultValue={locale}>
{router.locales.map((locale) => (
<option key={locale} value={locale}>
{locale.toUpperCase()}
</option>
))}
</select>
);
};
import { ProfileImage } from '@svg/index';
const Navbar: FC = () => {
const { t } = useTranslation('nav');
const { theme, setTheme } = useTheme();
const switchTheme = (): void => setTheme(theme == 'dark' ? 'light' : 'dark');
@ -40,22 +20,26 @@ const Navbar: FC = () => {
<nav className={styles.bar}>
<div className="container">
<div className={styles.content}>
<div className={styles.header}>{t('title')}</div>
<div className={styles.header}>
<Link href="/">
<a>
<ProfileImage className="profile" width={32} height={32} />
</a>
</Link>
</div>
<div className={styles.items}>
<Link href="/#projects">
<a>{t('projects')}</a>
<a>Projects</a>
</Link>
<Link href="/blog">
<a>Contact</a>
</Link>
{/* <Link href="/contact">
<a>{t('contact')}</a>
</Link> */}
<Link href="https://github.com/guusvanmeerveld/portfolio">
<a>{t('github')}</a>
<a>Github</a>
</Link>
<BiMoon onClick={switchTheme} className={styles.moon} />
<ImSun onClick={switchTheme} className={styles.sun} />
<LanguageSelector />
</div>
</div>
</div>

2
src/components/Page.tsx
Unescape View File

@ -16,7 +16,7 @@ const Page: FC<{
<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="/assets/images/profile-192.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/favicon.ico" />
</Head>
{children}
</>

7
src/components/Project.tsx
Unescape View File

@ -27,12 +27,7 @@ const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, righ
</div>
{cover ? (
<div className={styles.cover}>
<Image
src={`https://${process.env.CDN_ENDPOINT}/portfolio/${cover}`}
width={200}
height={200}
alt={name}
/>
<Image src={cover} width={200} height={200} alt={name} />
</div>
) : null}
</div>

5
src/models/svg.d.ts vendored
Unescape View File

@ -0,0 +1,5 @@
declare module '*svg' {
import React from 'react';
const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
export default SVG;
}

15
src/pages/404.tsx
Unescape View File

@ -7,23 +7,16 @@ import Layout from '@components/Layout';
import PageBuilder from '@components/PageBuilder';
const NotFound: NextPage = () => {
const { t } = useTranslation('404');
const title = 'Page not found';
const description = "This page either doesn't exist or has been deleted";
return (
<Page title={t('title')} description={t('description')}>
<Page title={title} description={description}>
<Layout>
<PageBuilder button={t('back')} header={t('title')} subtitle={t('description')} />
<PageBuilder button="Go back" header={title} subtitle={description} />
</Layout>
</Page>
);
};
export const getStaticProps: GetStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale, ['404', 'nav'])),
},
};
};
export default NotFound;

31
src/pages/index.tsx
Unescape View File

@ -3,36 +3,35 @@ import { GetStaticProps, NextPage } from 'next';
import axios, { AxiosError } from 'axios';
import chalk from 'chalk';
import Image from 'next/image';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import ProjectModel from '@models/project';
import Layout from '@components/Layout';
import Page from '@components/Page';
import Project from '@components/Project';
import ProjectModel from '@models/project';
import { ProfileImage } from '@svg/index';
import styles from './Index.module.scss';
const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
const { t } = useTranslation('home');
return (
<Page description={t('description')} title={t('title')}>
<Page description="A simple portfolio website to display my projects." title="Home">
<Layout>
<div className={styles.body}>
<div className={styles.content + ' container'}>
<div className={styles.profile + ' profile'}>
<Image src="/assets/images/profile.svg" width={100} height={100} alt="" />
<div className={styles.profile}>
<ProfileImage height={100} width={100} className="profile" />
</div>
<h1>Guus van Meerveld</h1>
<h4 className={styles.subtitle}>{t('subtitle')}</h4>
<h4 className={styles.subtitle}>Full-stack developer</h4>
<a href="#projects" className="button">
{t('projects.button')}
Check out my projects
</a>
</div>
</div>
@ -40,7 +39,7 @@ const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
<div className={styles.projects}>
<div className="container">
<h1 className={styles.projectsHeader} id="projects">
{t('projects.title')}
Projects
</h1>
{projects.map((project, i) => {
@ -54,12 +53,9 @@ const Home: NextPage<{ projects: ProjectModel[] }> = ({ projects }) => {
);
};
export const getStaticProps: GetStaticProps = async ({ locale }) => {
const translation = await serverSideTranslations(locale, ['home', 'nav']);
const projects: ProjectModel[] | undefined = await axios(
`https://${process.env.CDN_ENDPOINT}/portfolio/projects-${locale}.json`
)
export const getStaticProps: GetStaticProps = async () => {
const projects: ProjectModel[] | undefined = await axios
.get(`https://${process.env.CDN_ENDPOINT}/portfolio/projects-en.json`)
.then(({ data }) => {
console.log(
chalk`{magenta event} - retrieved projects from ` +
@ -78,7 +74,6 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
if (projects) {
return {
props: {
...translation,
projects,
},
};

1
src/svg/index.ts
Unescape View File

@ -0,0 +1 @@
export { default as ProfileImage } from './profile.svg';

0
public/assets/images/profile.svg → src/svg/profile.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 629 B

After

Width:  |  Height:  |  Size: 629 B

3
tsconfig.json
Unescape View File

@ -3,11 +3,10 @@
"baseUrl": "src",
"paths": {
"@components/*": ["components/*"],
"@svg/*": ["svg/*"],
"@styles/*": ["styles/*"],
"@models/*": ["models/*"],
"@config/*": ["config/*"],
"@utils/*": ["utils/*"],
"@src/*": ["./*"]
},
"target": "es5",

1457
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save