Merge pull request #13 from vnvyvu/init

Responsive
vnvyvu · May 8, 2024 · d5a9b56 · d5a9b56
2 parents c10c259 + c26fb54
commit d5a9b56
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/src/app/@main/layout.tsx b/src/app/@main/layout.tsx
@@ -1,4 +1,7 @@
-export default async function MainLayout({
+'use client';
+import { useMediaQuery } from '@/lib/useMediaQuery';
+
+export default function MainLayout({
 	summary,
 	projects,
 	skills,
@@ -9,14 +12,15 @@ export default async function MainLayout({
 	skills: React.ReactNode;
 	certificates: React.ReactNode;
 }) {
+	const isMobile = useMediaQuery();
 	return (
 		<main className='flex max-md:flex-col px-8 py-4 bg-white text-black gap-4 shadow-md'>
 			<div className='flex flex-col basis-3/4 gap-4'>
 				{summary}
-				{projects}
+				{isMobile ? skills : projects}
 			</div>
 			<div className='flex flex-col basis-1/4 gap-4'>
-				{skills}
+				{isMobile ? projects : skills}
 				{certificates}
 			</div>
 		</main>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -24,6 +24,7 @@ body {
 			rgb(var(--background-end-rgb))
 		)
 		rgb(var(--background-start-rgb));
+	overflow-x: hidden;
 }
 
 @layer utilities {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,10 +22,19 @@ export default function RootLayout({
 	return (
 		<html lang='en'>
 			<body className={inter.className}>
-				<div className='bg-[#dcdbe0]'>
+				<div className='bg-[#dcdbe0] overflow-clip'>
 					{header}
 					{main}
 					{footer}
+					{/* <video
+						className='absolute right-0 top-64'
+						width={100}
+						autoPlay
+						muted
+						loop
+						playsInline
+						src='/mew.webm'
+					/> */}
 				</div>
 			</body>
 		</html>

diff --git a/src/lib/useMediaQuery.ts b/src/lib/useMediaQuery.ts
@@ -0,0 +1,23 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * isMatches is undefined before hook effect
+ * @param width to make max-width media query. Default is 767
+ * @returns {undefined | boolean} Is media query matches. Undefined if there is no window reference yet
+ */
+export const useMediaQuery = (width = 767): undefined | boolean => {
+	const [isMatches, setIsMatches] = useState<undefined | boolean>(false);
+	const onChange = useCallback(
+		() =>
+			setIsMatches(window.matchMedia(`(max-width: ${width}px)`).matches),
+		[width],
+	);
+
+	useEffect(() => {
+		onChange();
+		window.addEventListener('resize', onChange);
+		return () => window.removeEventListener('resize', onChange);
+	}, [onChange]);
+
+	return isMatches;
+};