feat: updated copyright and is now fully responsive

package.json

@@ -25,8 +25,8 @@
 		"react-router-dom": "^6.20.1"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.42",
-		"@types/react-dom": "^18.2.17",
+		"@types/react": "^18.2.47",
+		"@types/react-dom": "^18.2.18",
 		"@typescript-eslint/eslint-plugin": "^6.13.2",
 		"@typescript-eslint/parser": "^6.13.2",
 		"@typescript-eslint/typescript-estree": "^6.13.2",
@@ -36,14 +36,14 @@
 		"eslint-plugin-prettier": "^5.0.1",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-react-refresh": "^0.4.5",
-		"gh-pages": "^6.1.0",
-		"postcss": "^8.4.32",
-		"prettier": "^3.1.0",
-		"prettier-plugin-tailwindcss": "^0.5.9",
-		"sass": "^1.69.5",
+		"gh-pages": "^6.1.1",
+		"postcss": "^8.4.33",
+		"prettier": "^3.1.1",
+		"prettier-plugin-tailwindcss": "^0.5.11",
+		"sass": "^1.69.7",
 		"tailwindcss": "^3.3.6",
 		"typescript": "^5.3.3",
-		"vite": "^5.0.6"
+		"vite": "^5.0.11"
 	},
 	"packageManager": "yarn@4.0.2"
 }

src/components/Footer.tsx

@@ -1,9 +1,9 @@
 export function Footer() {
 	return (
-		<div id="footer" className="flex w-full justify-center bg-verdant-bg lg:fixed lg:bottom-8 lg:w-11/12">
+		<div id="footer" className="flex w-full justify-center bg-verdant-bg lg:fixed lg:bottom-10">
 			<div className="mx-auto flex justify-center">
 				<span className="px-4 py-4 text-center text-verdant-fg lg:px-0">
-					© 2023 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
+					© 2023-2024 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
 				</span>
 			</div>
 		</div>

src/components/MainContainer.tsx

@@ -2,31 +2,30 @@ export function MainContainer() {
 	return (
 		<div id="main" className="flex justify-center bg-verdant-bg">
 			<div className="flex flex-col items-center justify-center lg:flex-row">
-				<div className="mx-12 mb-8 mt-16 sm:mt-96 md:mt-48 lg:mb-0 lg:mt-0">
+				<div className="mx-12 mb-8 mt-8 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-12 items-center justify-center lg:mx-8 lg:mb-0">
+				<div className="mx-12 mb-8 items-center justify-center lg:mx-8 lg:mb-0">
 					<div className="text-3xl font-bold text-verdant-fg">
 						Heya! I'm <span className="text-verdant-blue">Jan Leigh</span>!
 					</div>
 					<div className="text-base text-verdant-fg-dark">
-						I am a Filipino first-year college student and a self-taught full-stack developer.
+						I am a Filipino first-year college student and self-taught full-stack developer.
 						<br />
 						<br />
-						I have been programming since 2018, and I have a passion
+						I've been programming since 2018, and I enjoy creating web applications,
 						<br />
-						for creating web applications, and sometimes <span className="line-through">shitty</span>{" "}
-						software.
+						and occasionally <span className="line-through">shitty</span> software.
 						<br />
-						<br />I am proficient in a variety of programming languages, including{" "}
+						<br />I am proficient in a variety of programming languages, such as{" "}
 						<span className="text-verdant-blue">TypeScript</span>,{" "}
 						<span className="text-verdant-purple">Rust</span>, and{" "}
 						<span className="text-verdant-red">C</span>.
-						<br />I am also familiar with a variety of web development frameworks and tools such as{" "}
+						<br />I am also familiar with a range of web development frameworks and tools such as{" "}
 						<span className="text-verdant-orange">React</span>,
 						<br />
 						<span className="text-verdant-blue">Next.js</span>, and{" "}

src/components/Navbar.tsx

@@ -1,12 +1,12 @@
 export function Navbar() {
 	return (
-		<div id="navbar" className="fixed flex w-full justify-center bg-verdant-bg-light lg:w-11/12 lg:bg-verdant-bg">
+		<div id="navbar" className="flex w-full justify-center bg-verdant-bg-light lg:fixed lg:top-8 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="mr-6 mt-2 flex lg:mx-auto lg:my-auto">
+			<div className="mr-6 mt-3 flex lg:mx-auto lg:my-auto">
 				<div className="flex justify-end">
 					<div className="flex lowercase">
 						<a href="https://github.com/janleigh" target="_blank" className="p-4 text-verdant-fg">

src/main.tsx

@@ -4,6 +4,8 @@ import { HashRouter as Router, Route, Routes } from "react-router-dom";
 import App from "./pages/App";
 import NotFound from "./pages/404";
 
+import "./styles/index.css";
+
 ReactDOM.render(
 	<Router>
 		<Routes>

src/pages/App.tsx

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

yarn.lock

@@ -582,12 +582,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.2.17":
-  version: 18.2.17
-  resolution: "@types/react-dom@npm:18.2.17"
+"@types/react-dom@npm:^18.2.18":
+  version: 18.2.18
+  resolution: "@types/react-dom@npm:18.2.18"
   dependencies:
     "@types/react": "npm:*"
-  checksum: fe0dbb3224b48515da8fe25559e3777d756a27c3f22903f0b1b020de8d68bd57eb1f0af62b52ee65d9632637950afed8cbad24d158c4f3d910d083d49bd73fba
+  checksum: 4ef7725b4cebd4a32e049097ddfdfd855a178e63ead97ab6d3084872e7d6c1acd71aa923488123cd1015f0e0b11489d2b44f674a1df8fe82d7827eabbec6dbf1
   languageName: node
   linkType: hard
 
@@ -602,14 +602,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.2.42":
-  version: 18.2.42
-  resolution: "@types/react@npm:18.2.42"
+"@types/react@npm:^18.2.47":
+  version: 18.2.47
+  resolution: "@types/react@npm:18.2.47"
   dependencies:
     "@types/prop-types": "npm:*"
     "@types/scheduler": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: b6ee1873ba551ca7bf87cefff00a615aa4322cd68d425858a2e09be260d8037d7fc68865739d2b05cc88cefa7acd009afdaea43e9856fc6302b322cc8c19464e
+  checksum: 0a98c2ef8303909f78c973ac9731cb671f3a0b96bc5213b538d1a50cbaae6e51b6befd64845a9cb95af8528767315d5bd99a85608eb716c020393c7d33a9b477
   languageName: node
   linkType: hard
 
@@ -1875,9 +1875,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gh-pages@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "gh-pages@npm:6.1.0"
+"gh-pages@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "gh-pages@npm:6.1.1"
   dependencies:
     async: "npm:^3.2.4"
     commander: "npm:^11.0.0"
@@ -1889,7 +1889,7 @@ __metadata:
   bin:
     gh-pages: bin/gh-pages.js
     gh-pages-clean: bin/gh-pages-clean.js
-  checksum: feed88a4ff759955420bdee2648baf37bd24e7b7d0819aa599fc6ebe4e94dab344daf8cce7fdad5508f03230b4948bf2ed5bb191a8aae5b728b6e390895db3e7
+  checksum: b821a1f24bfa7070e3a8fbc8e4956a137511bb17d8c3e3eaad27eefabb8ccdf61f41d891cac11c0f476f3c5b3078fdcbd3e61e8d960a7e9e6af16c02cd62f971
   languageName: node
   linkType: hard
 
@@ -2279,8 +2279,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "janleigh.github.io@workspace:."
   dependencies:
-    "@types/react": "npm:^18.2.42"
-    "@types/react-dom": "npm:^18.2.17"
+    "@types/react": "npm:^18.2.47"
+    "@types/react-dom": "npm:^18.2.18"
     "@typescript-eslint/eslint-plugin": "npm:^6.13.2"
     "@typescript-eslint/parser": "npm:^6.13.2"
     "@typescript-eslint/typescript-estree": "npm:^6.13.2"
@@ -2290,17 +2290,17 @@ __metadata:
     eslint-plugin-prettier: "npm:^5.0.1"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.5"
-    gh-pages: "npm:^6.1.0"
-    postcss: "npm:^8.4.32"
-    prettier: "npm:^3.1.0"
-    prettier-plugin-tailwindcss: "npm:^0.5.9"
+    gh-pages: "npm:^6.1.1"
+    postcss: "npm:^8.4.33"
+    prettier: "npm:^3.1.1"
+    prettier-plugin-tailwindcss: "npm:^0.5.11"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-router-dom: "npm:^6.20.1"
-    sass: "npm:^1.69.5"
+    sass: "npm:^1.69.7"
     tailwindcss: "npm:^3.3.6"
     typescript: "npm:^5.3.3"
-    vite: "npm:^5.0.6"
+    vite: "npm:^5.0.11"
   languageName: unknown
   linkType: soft
 
@@ -3050,6 +3050,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.33":
+  version: 8.4.33
+  resolution: "postcss@npm:8.4.33"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.0.2"
+  checksum: e22a4594c255f26117f38419fb494d7ecab0f596cd409f7aadc8a6173abf180ed7ea970cd13fd366ab12b5840be901d2a09b25197700c2ebcb5a8077326bf519
+  languageName: node
+  linkType: hard
+
 "prelude-ls@npm:^1.2.1":
   version: 1.2.1
   resolution: "prelude-ls@npm:1.2.1"
@@ -3066,9 +3077,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-plugin-tailwindcss@npm:^0.5.9":
-  version: 0.5.9
-  resolution: "prettier-plugin-tailwindcss@npm:0.5.9"
+"prettier-plugin-tailwindcss@npm:^0.5.11":
+  version: 0.5.11
+  resolution: "prettier-plugin-tailwindcss@npm:0.5.11"
   peerDependencies:
     "@ianvs/prettier-plugin-sort-imports": "*"
     "@prettier/plugin-pug": "*"
@@ -3113,11 +3124,11 @@ __metadata:
       optional: true
     prettier-plugin-twig-melody:
       optional: true
-  checksum: 6450ee245c7ce5a1989dae0425ce35304ed6d117c05f9306db27070f0c54b57448f30c9b88450ba263b66cf235932c8992b22199805c6dc2acc3f26c29e69b80
+  checksum: 79d294c035845f35dbf4cdb0707c3da235dd9c0eb5d2a7db9d779da9efdd8851dbb435646d872f507e55657dc348050c5a15fcbed09d00ef95359ccfa50ff400
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.0":
+"prettier@npm:^3.1.1":
   version: 3.1.1
   resolution: "prettier@npm:3.1.1"
   bin:
@@ -3371,16 +3382,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.69.5":
-  version: 1.69.5
-  resolution: "sass@npm:1.69.5"
+"sass@npm:^1.69.7":
+  version: 1.69.7
+  resolution: "sass@npm:1.69.7"
   dependencies:
     chokidar: "npm:>=3.0.0 <4.0.0"
     immutable: "npm:^4.0.0"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: b320ab22061b3c7fe8cee43b13329b281dd7d86691b8b7c55dec3e47d3ede988989dac56db4dff57ee847d10252a26b611be1b0a5f7c3a0f6a6405ef37a6d018
+  checksum: 9c6d3fe468a267949e8dd766085351f59988caf5d3d5c13eb041d370366f869ad3704b5046586fd3584b2cbf59c03650d237b62a4c6ed26a0c003e27f9ef4e89
   languageName: node
   linkType: hard
 
@@ -3826,9 +3837,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.6":
-  version: 5.0.6
-  resolution: "vite@npm:5.0.6"
+"vite@npm:^5.0.11":
+  version: 5.0.11
+  resolution: "vite@npm:5.0.11"
   dependencies:
     esbuild: "npm:^0.19.3"
     fsevents: "npm:~2.3.3"
@@ -3862,7 +3873,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: c4647591c76ad5a3b818efef37fb23d793512be832b7daa6c54719f24b0dbadfe383b18cf0896e2c4eaf9d1acab031b3caeaa36570b79ce9da2be6a328d27a1e
+  checksum: f1a8fea35ed9f162d7a10fd13efb2c96637028b0a319d726aeec8b31e20e4d047272bda5df82167618e7774a520236c66f3093ed172802660aec5227814072f4
   languageName: node
   linkType: hard