feat: responsive website

Author: janleigh

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "janleigh.github.io",
 	"private": true,
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"description": "My personal website. Powered using React, Vite and Bulma.",
 	"author": {
 		"name": "Jan Leigh Muñoz",

src/components/MainContainer.tsx

@@ -1,15 +1,15 @@
 export function MainContainer() {
 	return (
 		<div id="main" className="flex w-screen justify-center bg-verdant-bg">
-			<div className="flex items-center justify-center">
-				<div className="mx-12">
+			<div className="flex flex-col items-center justify-center lg:flex-row">
+				<div className="mx-12 mb-8 mt-16 lg:mb-0 lg:mt-0">
 					<img
 						src="https://github.com/janleigh.png"
 						alt="PFP"
 						className="h-60 w-60 rounded-full bg-verdant-bg-light p-4"
 					/>
 				</div>
-				<div className="mx-8 items-center justify-center">
+				<div className="mx-8 mb-12 items-center justify-center lg:mb-0">
 					<div className="text-3xl font-bold text-verdant-fg">
 						Heya! I'm <span className="text-verdant-blue">Jan Leigh</span>!
 					</div>

src/components/Navbar.tsx

@@ -1,19 +1,19 @@
 export function Navbar() {
 	return (
-		<div id="navbar" className="fixed flex w-11/12 justify-center">
-			<div className="mx-auto flex justify-start">
+		<div id="navbar" className="fixed flex w-full justify-center bg-verdant-bg-light lg:w-11/12 lg:bg-verdant-bg">
+			<div className="mx-12 flex justify-start lg:mx-auto">
 				<span className="py-4 text-verdant-fg">
 					janleigh<span className="text-verdant-blue">.is-a.dev</span>
 				</span>
 			</div>
-			<div className="mx-auto flex rounded-2xl bg-verdant-bg-light px-2">
+			<div className="mr-6 mt-2 flex lg:mx-auto">
 				<div className="flex justify-end">
 					<div className="flex lowercase">
-						<a href="https://github.com/janleigh" target="_blank" className="p-4 text-stone-50">
-							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="22.5" viewBox="0 0 480 512">
+						<a href="https://github.com/janleigh" target="_blank" className="p-4 text-verdant-fg">
+							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="22.5" viewBox="0 0 496 512">
 								<path
 									fill="#dfdddd"
-									d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
+									d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
 								/>
 							</svg>
 						</a>
@@ -26,10 +26,10 @@ export function Navbar() {
 							</svg>
 						</a>
 						<a href="https://ko-fi.com/janleigh" target="_blank" className="p-4 text-white">
-							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="25" viewBox="0 0 640 512">
+							<svg xmlns="http://www.w3.org/2000/svg" height="22.5" width="22.5" viewBox="0 0 512 512">
 								<path
 									fill="#dfdddd"
-									d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"
+									d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"
 								/>
 							</svg>
 						</a>

src/pages/App.tsx

@@ -2,20 +2,21 @@ import Footer from "../components/Footer";
 import MainContainer from "../components/MainContainer";
 import Navbar from "../components/Navbar";
 
-import NotFound from "./404";
-
 export function App() {
 	return (
-		<div id="app" className="flex h-screen w-screen justify-center bg-verdant-bg px-8 py-8">
-			{window.innerWidth > 768 ? (
+		<div id="app" className="flex h-screen w-screen justify-center bg-verdant-bg lg:px-8 lg:py-8">
+			{/* {window.innerWidth > 768 ? (
 				<>
 					<Navbar />
 					<MainContainer />
 					<Footer />
 				</>
 			) : (
 				<NotFound />
-			)}
+			)} */}
+			<Navbar />
+			<MainContainer />
+			<Footer />
 		</div>
 	);
 }