refactor: consolidate into src

next.config.js

@@ -1,4 +1,4 @@
-import million from "million/compiler";
+import million from 'million/compiler';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -12,7 +12,7 @@ const nextConfig = {
 };
 
 const millionConfig = {
-	auto: true,// if you're using RSC: auto: { rsc: true },
+	auto: true, // if you're using RSC: auto: { rsc: true },
 };
 
 export default million.next(nextConfig, millionConfig);

package.json

@@ -8,9 +8,9 @@
     "build": "next build",
     "start": "next start",
     "test": "bun test",
-    "lint": "bunx eslint src pages",
-    "lint-fix": "bunx eslint --fix src pages",
-    "format": "prettier --write src pages",
+    "lint": "bunx eslint src",
+    "lint-fix": "bunx eslint --fix src",
+    "format": "prettier --write src",
     "coverage": "bun test --coverage"
   },
   "dependencies": {

src/components/Event/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .eventContainer {
 	display: flex;

src/components/EventCarousel/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .carouselContainer {
 	padding: 2em 0 5em 0;

src/components/Footer/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .footer {
 	bottom: 0;

src/components/Gradient/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .canvas {
 	height: 100%;

src/components/Hero/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 $hero-gradient: linear-gradient(#0003, #000a 30%, #000e 60%, #000f 80%);
 

src/components/Navbar/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .navbarContainer {
 	top: 0;

src/components/Project/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .projectContainer {
 	display: flex;

src/components/RoundButton/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .roundButton {
 	width: fit-content;

src/components/Timeline/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .timelineContainer {
 	border-collapse: collapse;

src/components/Typography/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .centered {
 	text-align: center;

src/icons/AfterEffectsIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function AfterEffectsIcon({

src/icons/BaseIcon/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 %baseSvgIconContainer {
 	width: 100%;

src/icons/FacebookIcon/index.tsx

@@ -1,5 +1,5 @@
+import styles from 'styles/index.module.scss';
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function FacebookIcon({

src/icons/FigmaIcon/index.tsx

@@ -1,5 +1,5 @@
+import styles from 'styles/index.module.scss';
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function FigmaIcon({

src/icons/FlutterIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function FlutterIcon({
 	className,

src/icons/IllustratorIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function IllustratorIcon({

src/icons/InstagramIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function InstagramIcon({

src/icons/JavaIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function JavaIcon({
 	className,

src/icons/JavaScriptIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function JavaScriptIcon({
 	className,

src/icons/LinkIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function LinkIcon({
 	className,

src/icons/MattermostIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function MattermostIcon({

src/icons/MediumIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function MediumIcon({

src/icons/MongoDbIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function MongoDbIcon({
 	className,

src/icons/NextJsIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function NextJsIcon({
 	className,

src/icons/OpenStreetMapIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function OpenStreetMapIcon({

src/icons/ProcreateIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function ProcreateIcon({

src/icons/ReactIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function ReactIcon({

src/icons/SlackIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function SlackIcon({

src/icons/TailwindIcon/index.tsx

@@ -1,6 +1,6 @@
 import BaseIcon from '../BaseIcon';
 import { SvgIconProps } from '../SvgIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 
 export default function TailwindIcon({
 	className,

src/icons/TypeScriptIcon/index.tsx

@@ -1,5 +1,5 @@
 import BaseIcon from '../BaseIcon';
-import styles from '../styles/index.module.scss';
+import styles from 'styles/index.module.scss';
 import { SvgIconProps } from '../SvgIcon';
 
 export default function TypeScriptIcon({

src/layouts/BaseLayout/index.module.scss

@@ -1,5 +1,5 @@
-@import '~/styles/variables.scss';
-@import '~/styles/mixins.scss';
+@import 'styles/variables.scss';
+@import 'styles/mixins.scss';
 
 .pageContainer {
 	display: flex;

pages/_app.tsx → src/pages/_app.tsx

@@ -2,13 +2,13 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCircle as faCircleHollow } from '@fortawesome/free-regular-svg-icons';
 import { faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
 import type { AppProps } from 'next/app';
-import '../styles/globals.scss';
+import 'styles/globals.scss';
 
 function MyApp({ Component, pageProps }: AppProps) {
 	library.add(faBars);
 	library.add(faCircle);
 	library.add(faCircleHollow);
-	return <Component {...pageProps} />;
+	return <Component suppressHydrationWarning {...pageProps} />;
 }
 
 export default MyApp;

pages/design.tsx → src/pages/design.tsx

@@ -1,13 +1,13 @@
 import Image from 'next/image';
-import Project from '../src/components/Project';
-import Timeline from '../src/components/Timeline';
-import Typography from '../src/components/Typography';
-import AfterEffectsIcon from '../src/icons/AfterEffectsIcon';
-import FigmaIcon from '../src/icons/FigmaIcon';
-import IllustratorIcon from '../src/icons/IllustratorIcon';
-import ProcreateIcon from '../src/icons/ProcreateIcon';
-import BaseLayout from '../src/layouts/BaseLayout';
-import styles from '../styles/Design.module.scss';
+import Project from 'components/Project';
+import Timeline from 'components/Timeline';
+import Typography from 'components/Typography';
+import AfterEffectsIcon from 'icons//AfterEffectsIcon';
+import FigmaIcon from 'icons//FigmaIcon';
+import IllustratorIcon from 'icons//IllustratorIcon';
+import ProcreateIcon from 'icons//ProcreateIcon';
+import BaseLayout from 'layouts/BaseLayout';
+import styles from 'styles/Design.module.scss';
 
 export default function Design() {
 	return (

pages/events.tsx → src/pages/events.tsx

@@ -1,9 +1,9 @@
 import Image from 'next/image';
-import Event from '../src/components/Event';
-import Timeline from '../src/components/Timeline';
-import Typography from '../src/components/Typography';
-import BaseLayout from '../src/layouts/BaseLayout';
-import styles from '../styles/Events.module.scss';
+import Event from 'components/Event';
+import Timeline from 'components/Timeline';
+import Typography from 'components/Typography';
+import BaseLayout from 'layouts/BaseLayout';
+import styles from 'styles/Events.module.scss';
 
 export default function Events() {
 	return (

pages/index.tsx → src/pages/index.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/legacy/image';
-import EventCarousel from '../src/components/EventCarousel';
-import Hero from '../src/components/Hero';
-import RoundButton from '../src/components/RoundButton';
-import Typography from '../src/components/Typography';
-import BaseLayout from '../src/layouts/BaseLayout';
-import styles from '../styles/Home.module.scss';
+import EventCarousel from 'components/EventCarousel';
+import Hero from 'components/Hero';
+import RoundButton from 'components/RoundButton';
+import Typography from 'components/Typography';
+import BaseLayout from 'layouts/BaseLayout';
+import styles from 'styles/Home.module.scss';
 
 export default function Home() {
 	return (

pages/tech.tsx → src/pages/tech.tsx

@@ -1,9 +1,9 @@
 import Image from 'next/image';
-import Project from '../src/components/Project';
-import Timeline from '../src/components/Timeline';
-import Typography from '../src/components/Typography';
-import BaseLayout from '../src/layouts/BaseLayout';
-import styles from '../styles/Tech.module.scss';
+import Project from 'components/Project';
+import Timeline from 'components/Timeline';
+import Typography from 'components/Typography';
+import BaseLayout from 'layouts/BaseLayout';
+import styles from 'styles/Tech.module.scss';
 
 export default function Tech() {
 	return (

styles/variables.scss → src/styles/variables.scss

@@ -28,10 +28,10 @@ $text-size-subtitle-xs: 0.4rem;
 $container-padding: 1em 1.5em 1em 1.5em;
 
 $box-shadow:
-  0 1px 2px rgba(0, 0, 0, 0.07), 
-  0 2px 4px rgba(0, 0, 0, 0.07),
-  0 4px 8px rgba(0, 0, 0, 0.07), 
-  0 8px 16px rgba(0, 0, 0, 0.07);
+	0 1px 2px rgba(0, 0, 0, 0.07),
+	0 2px 4px rgba(0, 0, 0, 0.07),
+	0 4px 8px rgba(0, 0, 0, 0.07),
+	0 8px 16px rgba(0, 0, 0, 0.07);
 $text-shadow: 1px 1px 10px #0005;
 
 $button-hover: #d9d9d9;

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "baseUrl": "src",
     "useDefineForClassFields": true,
     "lib": [
       "ESNext",

tsconfig.node.json

@@ -9,5 +9,5 @@
       "moduleResolution": "bundler",
       "allowSyntheticDefaultImports": true
     },
-    "include": ["vite.config.ts"]
+    "include": ["vite.config.ts", "next.config.js"]
 }