refactor: add file categories directory

src/components/Button/index.tsx → src/components/general/Button/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface PropsButton {
 	className?: string;

src/components/IconButton/index.tsx → src/components/general/IconButton/index.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface PropsButton {
 	className?: string;

src/components/Modal/BackDrop.tsx → src/components/general/Modal/BackDrop.tsx

@@ -1,6 +1,6 @@
 import { motion, Variants } from "framer-motion";
 import React from "react";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 const variants: Variants = {
 	hidden: {

src/components/Modal/ModalItem.tsx → src/components/general/Modal/ModalItem.tsx

@@ -1,6 +1,6 @@
 import { motion, Variants } from "framer-motion";
 import React from "react";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 import BackDrop from "./BackDrop";
 
 const variants: Variants = {

src/components/Modal/index.tsx → src/components/general/Modal/index.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence } from "framer-motion";
 import React from "react";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 import ModalItem from "./ModalItem";
 
 interface Props {

src/components/Page/index.tsx → src/components/general/Page/index.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface Props {
 	className?: string;

src/components/PageTransition/index.tsx → src/components/general/PageTransition/index.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, motion, Variants } from "framer-motion";
 import { useRouter } from "next/router";
 import React from "react";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 const variants: Variants = {
 	initial: {

src/components/Title/index.tsx → src/components/general/Title/index.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import React from "react";
-import type { FC } from "../../lib/types";
-import config from "../../../config.json";
+import type { FC } from "../../../lib/types";
+import config from "../../../../config.json";
 
 const Title: FC<{ title: string }> = ({ title }) => {
 	return (

src/components/Discord/index.tsx → src/components/other/Discord/index.tsx

@@ -1,10 +1,10 @@
-import type { Data } from "../../lib/hooks/Lanyard/types";
-import type { FC, FCWithLanyard } from "../../lib/types";
-import { getAvatar, getEmojiString, getStatusColor } from "../../lib/utils";
-import Button from "../Button";
-import ToolTip from "../Tooltip";
+import type { Data } from "../../../lib/hooks/Lanyard/types";
+import type { FC, FCWithLanyard } from "../../../lib/types";
+import { getAvatar, getEmojiString, getStatusColor } from "../../../lib/utils";
+import Button from "../../general/Button";
+import ToolTip from "../../general/Tooltip";
 
-export const Discord: FCWithLanyard = ({ lanyard: { status } }) => {
+const Discord: FCWithLanyard = ({ lanyard: { status } }) => {
 	return status ? (
 		<div className="discord-container">
 			<div className="discord-user">
@@ -66,3 +66,5 @@ const Spotify: FC<{ status: Data }> = ({ status }) => {
 		</div>
 	) : null;
 };
+
+export default Discord;

src/components/Footer/index.tsx → src/components/other/Footer/index.tsx

@@ -1,9 +1,9 @@
-import type { FCWithLanyard } from "../../lib/types";
-import Button from "../Button";
-import IconButton from "../IconButton";
-import Page from "../Page";
+import type { FCWithLanyard } from "../../../lib/types";
+import Button from "../../general/Button";
+import IconButton from "../../general/IconButton";
+import Page from "../../general/Page";
 
-export const Footer: FCWithLanyard = ({ lanyard }) => {
+const Footer: FCWithLanyard = ({ lanyard }) => {
 	return (
 		<Page className="footer-container-wrapper">
 			<div className="footer-container">
@@ -63,3 +63,5 @@ export const Footer: FCWithLanyard = ({ lanyard }) => {
 		</Page>
 	);
 };
+
+export default Footer;

src/components/Navbar/DesktopNavbar.tsx → src/components/other/Navbar/DesktopNavbar.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import type { FCWithLanyard } from "../../lib/types";
-import Button from "../Button";
-import { Discord } from "../Discord";
+import type { FCWithLanyard } from "../../../lib/types";
+import Button from "../../general/Button";
+import Discord from "../Discord";
 import { motion, useAnimation, Variants } from "framer-motion";
 import Link from "next/link";
 
-export const DesktopNavbar: FCWithLanyard = ({ lanyard }) => {
+const DesktopNavbar: FCWithLanyard = ({ lanyard }) => {
 	const controller = useAnimation();
 	const [discordVisible, setDiscordVisible] = useState(false);
 	const [discordVisibleOverride, setDiscordVisibleOverride] = useState(false);
@@ -84,3 +84,5 @@ export const DesktopNavbar: FCWithLanyard = ({ lanyard }) => {
 		</div>
 	);
 };
+
+export default DesktopNavbar;

src/components/Navbar/MenuButton.tsx → src/components/other/Navbar/MenuButton.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface Props {
 	onClick: () => void;

src/components/Navbar/MobileNavbar.tsx → src/components/other/Navbar/MobileNavbar.tsx

@@ -1,12 +1,12 @@
 import { motion, useAnimation } from "framer-motion";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
-import type { FCWithLanyard } from "../../lib/types";
-import Button from "../Button";
-import { Discord } from "../Discord";
+import type { FCWithLanyard } from "../../../lib/types";
+import Button from "../../general/Button";
+import Discord from "../Discord";
 import MenuButton from "./MenuButton";
 
-export const MobileNavbar: FCWithLanyard = ({ lanyard }) => {
+const MobileNavbar: FCWithLanyard = ({ lanyard }) => {
 	const [enabled, setEnabled] = useState(false);
 	const mobileNavbarController = useAnimation();
 
@@ -58,3 +58,5 @@ export const MobileNavbar: FCWithLanyard = ({ lanyard }) => {
 		</>
 	);
 };
+
+export default MobileNavbar;

src/components/other/Navbar/index.tsx

@@ -0,0 +1,16 @@
+import type { FCWithLanyard } from "../../../lib/types";
+import DesktopNavbar from "./DesktopNavbar";
+import MobileNavbar from "./MobileNavbar";
+
+const Navbar: FCWithLanyard = ({ lanyard }) => {
+	return (
+		<>
+			{/* Created to block items from moving under navbar */}
+			<div className="fake-navbar" />
+			<MobileNavbar lanyard={lanyard} />
+			<DesktopNavbar lanyard={lanyard} />
+		</>
+	);
+};
+
+export default Navbar;

src/components/About/AboutCard.tsx → src/components/page-related/About/AboutCard.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface Props {
 	title: string;

src/components/About/AboutList.tsx → src/components/page-related/About/AboutList.tsx

@@ -1,6 +1,6 @@
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 import AboutListItem from "./AboutListItem";
-import config from "../../../config.json";
+import config from "../../../../config.json";
 
 const AboutList: FC = () => {
 	return (

src/components/About/AboutListItem.tsx → src/components/page-related/About/AboutListItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import type { FC } from "../../lib/types";
-import IconButton from "../IconButton";
-import Modal from "../Modal";
+import type { FC } from "../../../lib/types";
+import IconButton from "../../general/IconButton";
+import Modal from "../../general/Modal";
 import AboutCard from "./AboutCard";
 
 interface Props {

src/components/Anime/AnimeCard.tsx → src/components/page-related/Anime/AnimeCard.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 interface Props {
 	image: string;

src/components/Anime/AnimeList.tsx → src/components/page-related/Anime/AnimeList.tsx

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
-import type { AnimeList, FC } from "../../lib/types";
+import type { AnimeList, FC } from "../../../lib/types";
 import AnimeListItem from "./AnimeListItem";
 
 const AnimeListComp: FC = () => {

src/components/Anime/AnimeListItem.tsx → src/components/page-related/Anime/AnimeListItem.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { AnimeList, AnimeStatus, FC } from "../../lib/types";
-import { getKitsuCoverImage } from "../../lib/utils";
-import Button from "../Button";
-import IconButton from "../IconButton";
-import Modal from "../Modal";
+import { AnimeList, AnimeStatus, FC } from "../../../lib/types";
+import { getKitsuCoverImage } from "../../../lib/utils";
+import Button from "../../general/Button";
+import IconButton from "../../general/IconButton";
+import Modal from "../../general/Modal";
 import AnimeCard from "./AnimeCard";
 import Skeleton from "react-loading-skeleton";
 

src/components/PinnedRepos/PinnedRepoCard.tsx → src/components/page-related/PinnedRepos/PinnedRepoCard.tsx

@@ -1,4 +1,4 @@
-import type { FC, PinnedRepoItem as iPinnedRepoItem } from "../../lib/types";
+import type { FC, PinnedRepoItem as iPinnedRepoItem } from "../../../lib/types";
 import Link from "next/link";
 
 interface Props {

src/components/PinnedRepos/PinnedRepoCardSkeleton.tsx → src/components/page-related/PinnedRepos/PinnedRepoCardSkeleton.tsx

@@ -1,5 +1,5 @@
 import Skeleton from "react-loading-skeleton";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 const PinnedRepoCardSkeleton: FC = () => {
 	return (

src/components/PinnedRepos/index.tsx → src/components/page-related/PinnedRepos/index.tsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import type { FC, PinnedRepoItem as iPinnedRepoItem } from "../../lib/types";
+import type { FC, PinnedRepoItem as iPinnedRepoItem } from "../../../lib/types";
 import PinnedRepoItem from "./PinnedRepoCard";
 import PinnedRepoCardSkeleton from "./PinnedRepoCardSkeleton";
 

src/components/WakaTimeStats/WakaTimeChart.tsx → src/components/page-related/WakaTimeStats/WakaTimeChart.tsx

@@ -1,7 +1,7 @@
-import type { FC, WakaTimeApiResult } from "../../lib/types";
+import type { FC, WakaTimeApiResult } from "../../../lib/types";
 import ms from "ms";
 import { Cell, Pie, PieChart } from "recharts";
-import config from "../../../config.json";
+import config from "../../../../config.json";
 
 const WakaTimeChart: FC<{ stats: WakaTimeApiResult }> = ({ stats }) => {
 	return (

src/components/WakaTimeStats/WakaTimeSkeleton.tsx → src/components/page-related/WakaTimeStats/WakaTimeSkeleton.tsx

@@ -1,5 +1,5 @@
 import Skeleton from "react-loading-skeleton";
-import type { FC } from "../../lib/types";
+import type { FC } from "../../../lib/types";
 
 const WakaTimeSkeleton: FC = () => {
 	return (

src/components/WakaTimeStats/index.tsx → src/components/page-related/WakaTimeStats/index.tsx

@@ -1,6 +1,6 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
-import type { FC, WakaTimeApiResult } from "../../lib/types";
+import type { FC, WakaTimeApiResult } from "../../../lib/types";
 import WakaTimeChart from "./WakaTimeChart";
 import WakaTimeSkeleton from "./WakaTimeSkeleton";
 

src/pages/404.tsx

@@ -1,12 +1,12 @@
-import Page from "../components/Page";
+import Page from "../components/general/Page";
 import type { NextPageWithLanyard } from "../lib/types";
 import React, { useState } from "react";
 import { TicTacToe } from "../lib/games/tictactoe";
-import Modal from "../components/Modal";
+import Modal from "../components/general/Modal";
 import { AI_ICON, USER_ICON } from "../lib/constants";
-import IconButton from "../components/IconButton";
-import Button from "../components/Button";
-import Title from "../components/Title";
+import IconButton from "../components/general/IconButton";
+import Button from "../components/general/Button";
+import Title from "../components/general/Title";
 
 const NotFound: NextPageWithLanyard = () => {
 	const [game, setGame] = useState(new TicTacToe());

src/pages/_app.tsx

@@ -5,10 +5,11 @@ import "react-loading-skeleton/dist/skeleton.css";
 import type { AppProps } from "next/app";
 import { useLanyard } from "../lib/hooks/Lanyard/UseLanyard";
 import type { UseLanyardResults } from "../lib/hooks/Lanyard/types";
-import { Navbar, Footer } from "../components";
 import Head from "next/head";
-import PageTransition from "../components/PageTransition";
 import config from "../../config.json";
+import Navbar from "../components/other/Navbar";
+import PageTransition from "../components/general/PageTransition";
+import Footer from "../components/other/Footer";
 
 const App = ({ Component, pageProps }: AppProps<{ lanyard: UseLanyardResults }>) => {
 	const lanyard = useLanyard({ userId: config.discord });

src/pages/about.tsx

@@ -1,7 +1,7 @@
-import AboutList from "../components/About/AboutList";
-import AnimeList from "../components/Anime/AnimeList";
-import Page from "../components/Page";
-import Title from "../components/Title";
+import AboutList from "../components/page-related/About/AboutList";
+import AnimeList from "../components/page-related/Anime/AnimeList";
+import Page from "../components/general/Page";
+import Title from "../components/general/Title";
 import type { NextPageWithLanyard } from "../lib/types";
 import config from "../../config.json";
 

src/pages/index.tsx

@@ -1,9 +1,9 @@
 import TypewriterComponent from "typewriter-effect";
-import IconButton from "../components/IconButton";
-import Page from "../components/Page";
+import IconButton from "../components/general/IconButton";
+import Page from "../components/general/Page";
 import type { NextPageWithLanyard } from "../lib/types";
 import { motion, Variants } from "framer-motion";
-import Title from "../components/Title";
+import Title from "../components/general/Title";
 import config from "../../config.json";
 
 const getVariants = (key: number) => {

src/pages/stats.tsx

@@ -1,9 +1,9 @@
-import Page from "../components/Page";
+import Page from "../components/general/Page";
 import type { NextPageWithLanyard } from "../lib/types";
 import GitHubCalendar from "react-github-calendar";
-import PinnedRepos from "../components/PinnedRepos";
-import WakaTimeStats from "../components/WakaTimeStats";
-import Title from "../components/Title";
+import PinnedRepos from "../components/page-related/PinnedRepos";
+import WakaTimeStats from "../components/page-related/WakaTimeStats";
+import Title from "../components/general/Title";
 import config from "../../config.json";
 
 const Stats: NextPageWithLanyard = () => {