diff --git a/.dockerignore b/.dockerignore deleted file mode 100644 index df04c1a..0000000 --- a/.dockerignore +++ /dev/null @@ -1,9 +0,0 @@ -** - -!next-i18next.config.js -!next.config.js -!tsconfig.json -!package.json -!yarn.lock -!public -!src \ No newline at end of file diff --git a/.env b/.env index 2c63e65..50e1332 100644 --- a/.env +++ b/.env @@ -1 +1,5 @@ -CDN_ENDPOINT=cdn.guusvanmeerveld.dev \ No newline at end of file +VITE_GITHUB_USERNAME=Guusvanmeerveld +VITE_TWITTER_USERNAME=Guusvanmeerveld +VITE_KOFI_USERNAME=Guusvanmeerveld +VITE_YOUTUBE_CHANNEL_ID=UCYuqpoMay5SezCBrA_HKVWQ +VITE_MASTODON_URL=https://c.im/web/@guusvanmeerveld \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index bcc104d..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "plugins": ["prettier"], - "extends": "next/core-web-vitals", - "rules": { - "prettier/prettier": "error" - } -} diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 6f19dde..9707178 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,88 +1,42 @@ -name: Build / test application and deploy to Docker hub & Github Pages +name: "Deploy website" on: push: branches: - main + paths: + - src/** + - package.json + - yarn.lock + - tsconfig.* + - vite.config.ts + - .env + - index.html + - public jobs: - check: + deploy_to_pages: + name: Build pages runs-on: ubuntu-latest steps: - - name: Setup checkout + - name: Setup uses: actions/checkout@v2 - - name: Setup NodeJS v12 + - name: Setup Node.js uses: actions/setup-node@v2 with: - node-version: '12.x' + node-version: "16.x" + cache: "yarn" - - name: Install Dependencies + - name: Install NPM dependencies run: yarn install - - name: ESlint check - run: yarn lint + - name: Build client + run: yarn run build - pages: - needs: check - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - - name: Use Node.js - uses: actions/setup-node@v2 - with: - node-version: '12.x' - - - name: Install dependencies - run: yarn install - - - name: Export website - run: yarn export - env: - GITHUB_USERNAME: ${{ GITHUB_REPOSITORY_OWNER }} - - - name: Create .nojekyll file - run: touch out/.nojekyll - - - name: Deploy + - name: Deploy to pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: out - - docker: - needs: check - runs-on: ubuntu-latest - steps: - - name: Setup checkout - uses: actions/checkout@v2 - - - name: Login to Docker Hub - uses: docker/login-action@v1.10.0 - with: - username: ${{ secrets.DOCKERHUB_USERNAME }} - password: ${{ secrets.DOCKERHUB_TOKEN }} - - - name: Set up Docker Buildx - uses: docker/setup-buildx-action@v1 - - - name: Cache Docker layers - uses: actions/cache@v2 - with: - path: /tmp/.buildx-cache - key: ${{ runner.os }}-buildx-${{ github.sha }} - restore-keys: | - ${{ runner.os }}-buildx- - - - name: Build and push - uses: docker/build-push-action@v2 - with: - push: true - tags: guusvanmeerveld/portfolio:latest - cache-from: type=local,src=/tmp/.buildx-cache - cache-to: type=local,dest=/tmp/.buildx-cache - builder: ${{ steps.buildx.outputs.name }} - - - name: Image digest - run: echo ${{ steps.docker_build.outputs.digest }} + publish_dir: ./dist + cname: guusvanmeerveld.dev diff --git a/.gitignore b/.gitignore index e3b3fe7..a547bf3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,34 +1,24 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* - -# local env files -.env.local -.env.development.local -.env.test.local -.env.production.local - -# vercel -.vercel \ No newline at end of file +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index c12154c..0000000 --- a/.prettierignore +++ /dev/null @@ -1,12 +0,0 @@ -dist -node_modules -README.md -.vscode -yarn.lock -package-lock.json -LICENSE -.env -.prettierrc -.next -next-env.d.ts -out \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index 8e97d94..de0f127 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,27 @@ { - "trailingComma": "es5", - "useTabs": true, - "semi": true, - "singleQuote": true, - "tabWidth": 2, - "printWidth": 100, - "arrowParens": "always" -} \ No newline at end of file + "trailingComma": "none", + "useTabs": true, + "semi": true, + "printWidth": 80, + "arrowParens": "always", + "importOrderSeparation": true, + "importOrder": [ + "@rollup/.*", + "rollup-.*", + "^..?/.*", + "^use-local-storage-state$", + "^styled-components$", + "^react.*", + "^preact$", + "^preact.*", + "^axios.*", + "^@src/.*", + "^@models/.*", + "^@interfaces/.*", + "^@styles/.*", + "^@shared/.*", + "^@utils/.*", + "^@components/.*", + "^@svg/.*" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index f9287c4..ff24a05 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "prettier.configPath": ".prettierrc" -} \ No newline at end of file + "prettier.configPath": ".prettierrc" +} diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index a43bc57..0000000 --- a/Dockerfile +++ /dev/null @@ -1,34 +0,0 @@ - -FROM node:12-alpine AS deps - -WORKDIR /app -COPY package.json yarn.lock ./ -RUN yarn install --frozen-lockfile - -FROM node:12-alpine 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:12-alpine 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/next-i18next.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"] diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 3f8d60a..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2021 Guus van Meerveld - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md index 2fe0b3e..fa6cf43 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,5 @@ -

Portfolio

-

- - - -

\ No newline at end of file +# Portfolio + +This is my portfolio website to show off all of my projects and provide my socials. + +It's build using Preact and Styled-Components and uses Vite as its build tool. diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100644 index e10d2ca..0000000 --- a/docker-compose.yml +++ /dev/null @@ -1,7 +0,0 @@ -version: '3' - -services: - app: - container_name: portfolio - build: . - env_file: .env diff --git a/index.html b/index.html new file mode 100644 index 0000000..b2597d9 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Guus' Portfolio + + + +
+ + + + diff --git a/next-env.d.ts b/next-env.d.ts deleted file mode 100644 index 9bc3dd4..0000000 --- a/next-env.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/// -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next.config.js b/next.config.js deleted file mode 100644 index c737472..0000000 --- a/next.config.js +++ /dev/null @@ -1,18 +0,0 @@ -// @ts-check - -/** - * @type {import('next').NextConfig} - */ -module.exports = { - images: { - 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; - }, -}; diff --git a/package.json b/package.json index 88ddaf5..42033f4 100644 --- a/package.json +++ b/package.json @@ -1,36 +1,39 @@ { - "name": "portfolio", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "export": "next build && next export", - "start": "next start", - "prettify": "prettier --write .", - "lint": "next lint" - }, - "dependencies": { - "axios": "^0.21.4", - "chalk": "^4.1.2", - "milligram": "^1.4.1", - "next": "^11.1.2", - "next-themes": "^0.0.15", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-icons": "^4.2.0", - "sass": "^1.42.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", - "eslint-config-next": "11.1.2", - "eslint-plugin-prettier": "^3.4.0", - "prettier": "^2.3.0", - "typescript": "^4.4.3" - } + "name": "portfolio", + "private": true, + "version": "0.1.0", + "type": "module", + "scripts": { + "format": "prettier src --write", + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@fontsource/montserrat": "^4.5.11", + "@fontsource/prompt": "^4.5.8", + "@tanstack/react-query": "^4.0.10", + "@tanstack/react-query-devtools": "^4.0.10", + "axios": "^0.27.2", + "bootstrap": "^5.2.0", + "preact": "^10.9.0", + "react-bootstrap": "^2.4.0", + "react-icons": "^4.4.0", + "react-router-dom": "6", + "react-spring": "^9.5.2", + "reset-css": "^5.0.1", + "styled-components": "^5.3.5", + "use-local-storage-state": "^18.1.0", + "vite-plugin-imagemin": "^0.6.1" + }, + "devDependencies": { + "@preact/preset-vite": "^2.3.0", + "@rollup/plugin-alias": "^3.1.9", + "@trivago/prettier-plugin-sort-imports": "^3.3.0", + "@types/styled-components": "^5.1.25", + "prettier": "^2.7.1", + "typescript": "^4.6.4", + "vite": "^3.0.0", + "vite-tsconfig-paths": "^3.5.0" + } } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 5fae432..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/logo-dark.png b/public/logo-dark.png new file mode 100644 index 0000000..3d02b34 Binary files /dev/null and b/public/logo-dark.png differ diff --git a/public/logo-light.png b/public/logo-light.png new file mode 100644 index 0000000..e185295 Binary files /dev/null and b/public/logo-light.png differ diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 3faf295..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "short_name": "Porfolio", - "name": "Guus van Meerveld's portfolio", - "icons": [ - { - "src": "/favicon.ico", - "type": "image/png", - "sizes": "192x192" - } - ], - "background_color": "#FFFFFF", - "display": "standalone", - "scope": "/", - "theme_color": "#388e3c", - "description": "A simple portfolio website to display my projects." -} diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index 6f27bb6..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,2 +0,0 @@ -User-agent: * -Disallow: \ No newline at end of file diff --git a/public/topography.svg b/public/topography.svg new file mode 100644 index 0000000..dbaa571 --- /dev/null +++ b/public/topography.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/CssBaseline.tsx b/src/components/CssBaseline.tsx new file mode 100644 index 0000000..9175c6c --- /dev/null +++ b/src/components/CssBaseline.tsx @@ -0,0 +1,24 @@ +import { createGlobalStyle } from "styled-components"; + +const Baseline = createGlobalStyle` + body { + color: ${({ theme }) => theme.palette.text.primary}; + background-color: ${({ theme }) => theme.palette.background.primary}; + font-family: "Montserrat", sans-serif; + + background-image: url("/topography.svg"); + background-repeat: repeat; + } + + a { + color: ${({ theme }) => theme.palette.text.primary}; + text-decoration: none; + :hover { + color: ${({ theme }) => theme.palette.text.secondary}; + } + } +`; + +const CssBaseline = Baseline as () => JSX.Element; + +export default CssBaseline; diff --git a/src/components/Dots.tsx b/src/components/Dots.tsx new file mode 100644 index 0000000..b49129d --- /dev/null +++ b/src/components/Dots.tsx @@ -0,0 +1,290 @@ +import styled, { useTheme } from "styled-components"; + +import { FunctionalComponent } from "preact"; + +const Container = styled.div` + width: 100%; + transform: ${(props) => (props.left ? "scale(-1, -1)" : "none")}; +`; + +const Dots: FunctionalComponent<{ + left?: boolean; +}> = ({ left }) => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Dots; diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss deleted file mode 100644 index d371e2b..0000000 --- a/src/components/Footer.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../styles/colors.scss'; - -.body { - background-color: $bg-secondary; - border-top: 0.1rem solid $borders; - - padding: 3rem; -} - -.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; -} - -.socialLink { - height: 3rem; - width: 3rem; - margin-right: 2rem; -} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 9d54e95..c067a9d 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,50 +1,61 @@ -import Link from 'next/link'; +import styled, { DefaultTheme } from "styled-components"; -import { FaTwitter, FaYoutube, FaCoffee, FaGithub } from 'react-icons/fa'; +import Col from "react-bootstrap/Col"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; -import { FC } from 'react'; +import { FunctionalComponent } from "preact"; -import { ProfileImage } from '@svg/index'; +import socials from "@utils/socials"; -import styles from './Footer.module.scss'; +import Header from "@components/Header"; -const Footer: FC = () => { +const Body = styled.div` + background-color: ${({ theme }: { theme: DefaultTheme }) => + theme.palette.background.secondary}; + + border-top: 2px solid + ${({ theme }: { theme: DefaultTheme }) => theme.palette.border}; + padding: 2rem; +`; + +const ListHeader = styled(Header)` + font-size: 2rem; +`; + +const ListItem = styled.li` + font-size: 1.25rem; + margin-top: 1rem; +`; + +const ListItemIcon = styled.span` + margin-right: 1rem; +`; + +const Footer: FunctionalComponent = () => { return ( -
-
- -
- Guus van Meerveld
- © 2017 - {new Date().getFullYear()} -
-
- - - - - - - - - - - - - - - - - - - - -
-
-
+ + + + +
Guus van Meerveld
+ + + + + + + ); }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..7c800ab --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,10 @@ +import styled from "styled-components"; + +const Header = styled.h1` + font-family: "Prompt", sans-serif; + margin-bottom: 1rem; + font-size: 3rem; + margin-bottom: ${(props) => (props.gutter ? "1rem" : "0")}; +`; + +export default Header; diff --git a/src/components/Image.tsx b/src/components/Image.tsx new file mode 100644 index 0000000..5e20208 --- /dev/null +++ b/src/components/Image.tsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; + +const Image = styled.img.attrs(() => ({ draggable: false }))` + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + user-select: none; +`; + +export default Image; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3f46e59..931869e 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -1,14 +1,14 @@ -import { FC } from 'react'; +import { FunctionalComponent } from "preact"; -import Navbar from '@components/Navbar'; -import Footer from '@components/Footer'; +import Footer from "@components/Footer"; -const Layout: FC<{ children: JSX.Element | JSX.Element[] }> = ({ children }) => ( - <> - - {children} -