Moved scss files, added paths

components/Navbar.tsx

@@ -10,4 +10,6 @@ const Navbar = () => (
   </nav>
 );
 
+const darkButton = () => {};
+
 export default Navbar;

next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    webpack(config) {
+        config.module.rules.push({
+            test: /\.svg$/,
+            use: ["@svgr/webpack"]
+        });
+
+        return config;
+    }
+};

package.json

@@ -8,8 +8,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
+    "@svgr/webpack": "^5.5.0",
+    "axios": "^0.21.1",
     "next": "10.0.8",
+    "next-iron-session": "^4.1.12",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-lazyload": "^3.2.0",

pages/404.tsx

@@ -1,10 +1,10 @@
-import Page from "../components/Page";
-import Layout from "../components/Layout";
+import Page from "@components/Page";
+import Layout from "@components/Layout";
 
 const NotFound = () => (
   <Page title="Page not found" description="This page either doesn't exist or has been deleted">
     <Layout>
-      <div className="message">
+      <div className="page">
         <div>
           <div className="header">Not found</div>
           <div className="subtitle">This page either doesn't exist or has been deleted</div>

pages/_app.tsx

@@ -2,9 +2,6 @@ import "../styles/milligram.min.css";
 import "../styles/raleway.css";
 
 import "../styles/sass/index.scss";
-import "../styles/sass/thanks.scss";
-import "../styles/sass/binas.scss";
-import "../styles/sass/upload.scss";
 
 function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/binas.tsx

@@ -1,7 +1,7 @@
-import Page from "../components/Page";
+import Page from "@components/Page";
 import LazyLoad from "react-lazyload";
 import { Component } from "react";
-import Layout from "../components/Layout";
+import Layout from "@components/Layout";
 
 class Binas extends Component {
   links: string[];

pages/index.tsx

@@ -1,8 +1,8 @@
-import Page from "../components/Page";
-import Landing from "../components/Landing";
-import Projects from "../components/Projects";
-import Contact from "../components/Contact";
-import Layout from "../components/Layout";
+import Page from "@components/Page";
+import Landing from "@components/Landing";
+import Projects from "@components/Projects";
+import Contact from "@components/Contact";
+import Layout from "@components/Layout";
 
 const Home = () => (
   <Page description="A simple portfolio website to display my projects." title="Projects">

pages/thanks.tsx

@@ -1,5 +1,5 @@
-import Page from "../components/Page";
-import Layout from "../components/Layout";
+import Page from "@components/Page";
+import Layout from "@components/Layout";
 
 const Thanks = () => (
   <Page title="Thanks!" description="Thanks for submitting your contact form!">

pages/upload.tsx

@@ -1,12 +0,0 @@
-import Page from "../components/Page";
-import Layout from "../components/Layout";
-
-const Upload = () => (
-  <Page title="Upload" description="Upload a custom file to the cdn">
-    <Layout>
-      <div className="container upload"></div>
-    </Layout>
-  </Page>
-);
-
-export default Upload;

styles/sass/index.scss

@@ -1,8 +1,12 @@
-@import "home/nav.scss";
-@import "home/landing.scss";
-@import "home/project.scss";
-@import "home/contact.scss";
-@import "home/footer.scss";
+@import "nav.scss";
+@import "landing.scss";
+@import "project.scss";
+@import "contact.scss";
+@import "footer.scss";
+
+@import "binas.scss";
+@import "upload.scss";
+@import "page.scss";
 
 body {
   margin: 0;

styles/sass/page.scss

@@ -1,4 +1,4 @@
-.message {
+.page {
   font-family: "Raleway";
   height: 100vh;
   width: 100vw;

tsconfig.json

@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@public/*": ["public/*"]
+    },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,