From 421d054cd820239870eb004b3ca34af15e2e9302 Mon Sep 17 00:00:00 2001 From: Guusvanmeerveld Date: Tue, 9 Mar 2021 16:34:07 +0000 Subject: [PATCH] Moved to Next.js instead of express --- README.md | 34 ---------- components/Contact.tsx | 27 ++++++++ components/Footer.tsx | 27 ++++++++ components/Landing.tsx | 23 +++++++ components/Navbar.tsx | 13 ++++ components/Page.tsx | 27 ++++++++ components/Projects.tsx | 93 ++++++++++++++++++++++++++ next-env.d.ts | 2 + package-lock.json | 120 +++++++++++++++++++++++++++++++++- package.json | 8 ++- pages/_app.js | 7 -- pages/_app.tsx | 9 +++ pages/api/hello.js | 5 -- pages/index.js | 65 ------------------- pages/index.tsx | 18 ++++++ public/argo.png | Bin 0 -> 19575 bytes public/autologin.png | Bin 0 -> 5099 bytes public/favicon.ico | Bin 15086 -> 3726 bytes public/manifest.json | 16 +++++ public/profile-192.png | Bin 0 -> 10852 bytes public/profile.png | Bin 0 -> 11539 bytes public/svg/coffee.svg | 1 + public/svg/github.svg | 1 + public/svg/twitter.svg | 1 + public/svg/youtube.svg | 1 + public/tempo.png | Bin 0 -> 22289 bytes public/vercel.svg | 4 -- styles/Home.module.css | 122 ----------------------------------- styles/globals.css | 16 ----- styles/milligram.min.css | 3 + styles/milligram.min.css.map | 1 + styles/raleway.css | 54 ++++++++++++++++ styles/sass/contact.scss | 16 +++++ styles/sass/footer.scss | 33 ++++++++++ styles/sass/index.scss | 9 +++ styles/sass/landing.scss | 31 +++++++++ styles/sass/nav.scss | 24 +++++++ styles/sass/project.scss | 64 ++++++++++++++++++ tsconfig.json | 19 ++++++ 39 files changed, 639 insertions(+), 255 deletions(-) delete mode 100644 README.md create mode 100644 components/Contact.tsx create mode 100644 components/Footer.tsx create mode 100644 components/Landing.tsx create mode 100644 components/Navbar.tsx create mode 100644 components/Page.tsx create mode 100644 components/Projects.tsx create mode 100644 next-env.d.ts delete mode 100644 pages/_app.js create mode 100644 pages/_app.tsx delete mode 100644 pages/api/hello.js delete mode 100644 pages/index.js create mode 100644 pages/index.tsx create mode 100644 public/argo.png create mode 100644 public/autologin.png create mode 100644 public/manifest.json create mode 100644 public/profile-192.png create mode 100644 public/profile.png create mode 100644 public/svg/coffee.svg create mode 100644 public/svg/github.svg create mode 100644 public/svg/twitter.svg create mode 100644 public/svg/youtube.svg create mode 100644 public/tempo.png delete mode 100644 public/vercel.svg delete mode 100644 styles/Home.module.css delete mode 100644 styles/globals.css create mode 100644 styles/milligram.min.css create mode 100644 styles/milligram.min.css.map create mode 100644 styles/raleway.css create mode 100644 styles/sass/contact.scss create mode 100644 styles/sass/footer.scss create mode 100644 styles/sass/index.scss create mode 100644 styles/sass/landing.scss create mode 100644 styles/sass/nav.scss create mode 100644 styles/sass/project.scss create mode 100644 tsconfig.json diff --git a/README.md b/README.md deleted file mode 100644 index b12f3e3..0000000 --- a/README.md +++ /dev/null @@ -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. diff --git a/components/Contact.tsx b/components/Contact.tsx new file mode 100644 index 0000000..b62743b --- /dev/null +++ b/components/Contact.tsx @@ -0,0 +1,27 @@ +const Contact = () => ( +
+
+
+ Contact +
+
+
+ + + + + + + +
+
+
+
+); + +export default Contact; diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..2905800 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,27 @@ +const Footer = () => ( + +); + +export default Footer; diff --git a/components/Landing.tsx b/components/Landing.tsx new file mode 100644 index 0000000..0c8eea4 --- /dev/null +++ b/components/Landing.tsx @@ -0,0 +1,23 @@ +import Image from "next/image"; + +const Landing = () => ( +
+
+ + + + + Guus van Meerveld + + TypeScript / Dart developer,
+ currently working on Argo. + + + + Check out my projects + +
+
+); + +export default Landing; diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..01fe949 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,13 @@ +const Navbar = () => ( + +); + +export default Navbar; diff --git a/components/Page.tsx b/components/Page.tsx new file mode 100644 index 0000000..e1fdc76 --- /dev/null +++ b/components/Page.tsx @@ -0,0 +1,27 @@ +import Head from "next/head"; + +const Page = ({ + title, + description, + children, +}: { + title: string; + description: string; + children: JSX.Element[] | JSX.Element; +}) => ( + <> + + + + + Portfolio | {title} + + + + + + {children} + +); + +export default Page; diff --git a/components/Projects.tsx b/components/Projects.tsx new file mode 100644 index 0000000..e9fccf7 --- /dev/null +++ b/components/Projects.tsx @@ -0,0 +1,93 @@ +const Projects = () => ( +
+
+
+ Projects +
+ +
+
+
+
Argo
+ Argo is a new app for Magister 6, made with Dart and Flutter. 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. +
+
+ + Website + + + Github + +
+
+ +
+
+
+ +
+
+
+ +
+
+
Tempo
+ Tempo is a "simple" Discord bot which can be used to play YouTube, SoundCloud and even Spotify songs. It's + made in pure TypeScript and has plentiful settings.
+
+ + Website + + + Invite + +
+
+
+ +
+
+
+
Keyzo
+ 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.
+
+ + Website + + + Github + +
+
+
+
+ +
+
+
+ +
+
+
Magister Auto-Login
+ Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you.
+
+ + Add to Chrome + + + Github + +
+
+
+
+
+); + +export default Projects; diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..7b7aa2c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/package-lock.json b/package-lock.json index 2c637b9..ea1d2d1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,11 +5,18 @@ "requires": true, "packages": { "": { + "name": "portfolio", "version": "0.1.0", "dependencies": { "next": "10.0.8", "react": "17.0.1", - "react-dom": "17.0.1" + "react-dom": "17.0.1", + "sass": "^1.32.8" + }, + "devDependencies": { + "@types/node": "^14.14.32", + "@types/react": "^17.0.3", + "typescript": "^4.2.3" } }, "node_modules/@babel/code-frame": { @@ -204,6 +211,35 @@ "node": ">=8.0.0" } }, + "node_modules/@types/node": { + "version": "14.14.32", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz", + "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==", + "dev": true + }, + "node_modules/@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, + "node_modules/@types/react": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz", + "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==", + "dev": true + }, "node_modules/anser": { "version": "1.4.9", "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.9.tgz", @@ -721,6 +757,12 @@ "node": ">=6" } }, + "node_modules/csstype": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==", + "dev": true + }, "node_modules/data-uri-to-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", @@ -1815,6 +1857,20 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/sass": { + "version": "1.32.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz", + "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==", + "dependencies": { + "chokidar": ">=2.0.0 <4.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/scheduler": { "version": "0.20.1", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", @@ -2104,6 +2160,19 @@ "node": ">=8" } }, + "node_modules/typescript": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz", + "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -2371,6 +2440,35 @@ "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==" }, + "@types/node": { + "version": "14.14.32", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz", + "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==", + "dev": true + }, + "@types/prop-types": { + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", + "dev": true + }, + "@types/react": { + "version": "17.0.3", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.3.tgz", + "integrity": "sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/scheduler": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==", + "dev": true + }, "anser": { "version": "1.4.9", "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.9.tgz", @@ -2815,6 +2913,12 @@ } } }, + "csstype": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz", + "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==", + "dev": true + }, "data-uri-to-buffer": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", @@ -3678,6 +3782,14 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "sass": { + "version": "1.32.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz", + "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==", + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "scheduler": { "version": "0.20.1", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz", @@ -3918,6 +4030,12 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz", "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==" }, + "typescript": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz", + "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==", + "dev": true + }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", diff --git a/package.json b/package.json index 89783b6..ff185e5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,12 @@ "dependencies": { "next": "10.0.8", "react": "17.0.1", - "react-dom": "17.0.1" + "react-dom": "17.0.1", + "sass": "^1.32.8" + }, + "devDependencies": { + "@types/node": "^14.14.32", + "@types/react": "^17.0.3", + "typescript": "^4.2.3" } } diff --git a/pages/_app.js b/pages/_app.js deleted file mode 100644 index 1e1cec9..0000000 --- a/pages/_app.js +++ /dev/null @@ -1,7 +0,0 @@ -import '../styles/globals.css' - -function MyApp({ Component, pageProps }) { - return -} - -export default MyApp diff --git a/pages/_app.tsx b/pages/_app.tsx new file mode 100644 index 0000000..da89d1e --- /dev/null +++ b/pages/_app.tsx @@ -0,0 +1,9 @@ +import "../styles/milligram.min.css"; +import "../styles/raleway.css"; +import "../styles/sass/index.scss"; + +function App({ Component, pageProps }) { + return ; +} + +export default App; diff --git a/pages/api/hello.js b/pages/api/hello.js deleted file mode 100644 index 9987aff..0000000 --- a/pages/api/hello.js +++ /dev/null @@ -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' }) -} diff --git a/pages/index.js b/pages/index.js deleted file mode 100644 index 5787b11..0000000 --- a/pages/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import Head from 'next/head' -import styles from '../styles/Home.module.css' - -export default function Home() { - return ( - - ) -} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..c85edcb --- /dev/null +++ b/pages/index.tsx @@ -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 ( + + + + + +