just call me

.eslintrc.json

@@ -2,7 +2,7 @@
 	"plugins": ["@typescript-eslint"],
 	"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
 	"rules": {
-		"@typescript-eslint/no-unused-vars": "error",
+		"@typescript-eslint/no-unused-vars": "off",
 		"@typescript-eslint/no-explicit-any": "off"
 	}
 }

public/readmes/overview.md

@@ -1,5 +1,9 @@
 # 📖 Overview <a href="https://www.youtube.com/watch?v=B46EdJApFmI"><img class="overview" src="/icons/teal_ribbon.ico" style="width:15px;" /></a> <a href="https://youtu.be/DlFkfOqtgR8?si=T-OzRtnyO_S0aW0X"><img class="overview" src="/icons/orange_ribbon.ico" style="width:15px;" /></a>
 
+<div align="left" style="font-size: 16px;background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 2px;">
+					I strive to be known as the most approachable person. Always here for friends, nk. call me &#128524;
+</div>
+
 ## 🚀 Summary
 
 Hey there! I’m a junior studying computer science and math. Over the past two years, I've immersed myself in numerous projects, improving my technical and managerial skills, and having a great time exploring new frameworks and software techniques.

src/app/(home)/page.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Grid, IconButton, Link, Stack, Tooltip, Typography } from "@mui/material";
 import { links } from "@/utils/links";
-// import PlayList from "@/components/HomeLayout/PlayList";
+import PlayList from "@/components/HomeLayout/PlayList";
 
 export default function Home() {
 	const iconLink = (link: any) => {
@@ -34,7 +34,7 @@ export default function Home() {
 						padding: "5px",
 						fontSize: { xs: "0.4rem", sm: "0.8rem" }
 					}}>
-					I strive to be known as the most approachable person. Always here for friends, nk 😌
+					I strive to be known as the most approachable person. Always here for friends, nk. call me 😌
 				</Typography>
 			</Grid>
 			{/* Links at the bottom */}
@@ -49,9 +49,9 @@ export default function Home() {
 			</Grid>
 
 			{/* Playlist occupying most of the screen */}
-			{/* <Grid item xs={12} sx={{ flexGrow: 1, minWidth: "100%", justifyContent: "center" }}>
+			<Grid item xs={12} sx={{ flexGrow: 1, minWidth: "100%", justifyContent: "center" }}>
 				<PlayList />
-			</Grid> */}
+			</Grid>
 		</Grid>
 	);
 }

src/components/HomeLayout/Layout.tsx

@@ -12,7 +12,6 @@ import { useParams, usePathname, useRouter } from "next/navigation";
 import createCache from "@emotion/cache";
 import { useServerInsertedHTML } from "next/navigation";
 import { CacheProvider } from "@emotion/react";
-import PlayList from "./PlayList";
 
 interface Page {
 	index: number;
@@ -37,6 +36,7 @@ interface VSCodeLayoutProps {
 export default function VSCodeLayout({ options, children }: VSCodeLayoutProps) {
 	const router = useRouter();
 	const params = useParams();
+	const pathname = usePathname();
 	const [expanded, setExpanded] = useState(isBrowser);
 	const [selectedIndex, setSelectedIndex] = useState(routeToPage[params.slug as string]?.index ?? null);
 	const [currentComponent, setCurrentComponent] = useState("");
@@ -100,6 +100,12 @@ export default function VSCodeLayout({ options, children }: VSCodeLayoutProps) {
 		return { cache, flush };
 	});
 
+	useEffect(() => {
+		if (!isBrowser && pathname === "/") {
+			router.push("/overview");
+		}
+	}, [router, pathname]);
+
 	useServerInsertedHTML(() => {
 		const names = flush();
 		if (names.length === 0) {
@@ -171,7 +177,7 @@ export default function VSCodeLayout({ options, children }: VSCodeLayoutProps) {
 								<Grid
 									sx={{
 										scrollBehavior: "smooth",
-										overflowY: "hidden",
+										overflowY: "auto",
 										maxHeight: "calc(100vh - 53px)",
 										background: !darkMode ? "#FFFFFF" : "#1e1e1e"
 									}}>
@@ -184,17 +190,6 @@ export default function VSCodeLayout({ options, children }: VSCodeLayoutProps) {
 										}}>
 										{children}
 									</Container>
-									{usePathname() === "/" && (
-										<Grid
-											item
-											sx={{
-												mt: { xs: -98, sm: -62 },
-												minWidth: "100%",
-												justifyContent: "center"
-											}}>
-											<PlayList isBrowser={isBrowser} />
-										</Grid>
-									)}
 								</Grid>
 							</Grid>
 						</Grid>

src/components/HomeLayout/PlayList.tsx

@@ -125,13 +125,12 @@ function PlayListListView() {
 	);
 }
 
-export default function PlayList({ isBrowser = true }: { isBrowser: boolean }) {
+export default function PlayList() {
 	const hoverRef = useRef<number>(-1);
 	const [hoverIndex, setHoverIndex] = useState<number>(-1);
 	const [hoverTimeoutId, setHoverTimeoutId] = useState<NodeJS.Timeout | undefined>();
 	// const switchRef = useRef<number>(0);
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const [isMobile, setIsMobile] = useState<boolean>(isBrowser);
 	const randomSongsOffset = useRef<number>(0);
 	const randomSongs = useMemo(() => shuffle(songs), []);
 	const [displayedSongs, setDisplayedSongs] = useState<any[]>(randomSongs.slice(0, ITEMS_PER_LOAD));
@@ -306,18 +305,13 @@ export default function PlayList({ isBrowser = true }: { isBrowser: boolean }) {
 			}),
 		[displayedSongs, hoverIndex, handleBubbleClick, hoverTimeoutId]
 	);
-	console.log("isMobile", isMobile);
 
 	return (
 		<Container sx={{ position: "relative", maxHeight: "70%" }}>
 			<PlaylistLabel />
-			{isMobile ? (
-				<BubbleUI options={options} className="myBubbleUI" loadMore={loadMore}>
-					{songBubbles}
-				</BubbleUI>
-			) : (
-				<PlayListListView />
-			)}
+			<BubbleUI options={options} className="myBubbleUI" loadMore={loadMore}>
+				{songBubbles}
+			</BubbleUI>
 		</Container>
 	);
 }