feat: update footer year dynamically and enhance navbar layout

Author: janleigh

package.json

@@ -20,30 +20,30 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.20.1"
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-router-dom": "^6.28.1"
 	},
 	"devDependencies": {
-		"@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",
-		"@vitejs/plugin-react-swc": "^3.5.0",
-		"autoprefixer": "^10.4.16",
-		"eslint": "^8.55.0",
-		"eslint-plugin-prettier": "^5.0.1",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-react-refresh": "^0.4.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.11"
+		"@types/react": "^18.3.18",
+		"@types/react-dom": "^18.3.5",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"@typescript-eslint/typescript-estree": "^6.21.0",
+		"@vitejs/plugin-react-swc": "^3.7.2",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^8.57.1",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"eslint-plugin-react-refresh": "^0.4.16",
+		"gh-pages": "^6.3.0",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.2",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"sass": "^1.83.0",
+		"tailwindcss": "^3.4.17",
+		"typescript": "^5.7.2",
+		"vite": "^5.4.11"
 	},
 	"packageManager": "[email protected]"
 }

src/components/Footer.tsx

@@ -1,9 +1,14 @@
 export function Footer() {
+	const getCurrentYear = () => {
+		return new Date().getFullYear();
+	};
+
 	return (
 		<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-2024 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
+					© {getCurrentYear()} <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights
+					Reserved.
 				</span>
 			</div>
 		</div>

src/components/MainContainer.tsx

@@ -14,7 +14,7 @@ export function MainContainer() {
 						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 self-taught full-stack developer.
+						I am a Filipino college student and self-taught full-stack developer.
 						<br />
 						<br />
 						I've been programming since 2018, and I enjoy creating web applications,
@@ -23,9 +23,9 @@ export function MainContainer() {
 						<br />
 						<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 range of web development frameworks and tools such as{" "}
+						<span className="text-verdant-orange">Python</span>, and{" "}
+						<span className="text-verdant-">Java</span>.
+						<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,47 +1,40 @@
 export function Navbar() {
 	return (
-		<div id="navbar" className="flex w-full justify-center bg-verdant-bg-light lg:fixed lg:top-8 lg:bg-verdant-bg">
+		<div
+			id="navbar"
+			className="flex w-full flex-row items-center justify-center bg-verdant-bg-light lg:fixed lg:top-8 lg:flex-row lg:justify-between 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-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">
-							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="22.5" viewBox="0 0 496 512">
-								<path
-									fill="#dfdddd"
-									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>
-						<a href="https://www.instagram.com/jnlghmz" target="_blank" className="p-4 text-white">
-							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="22.5" viewBox="0 0 480 512">
-								<path
-									fill="#dfdddd"
-									d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
-								/>
-							</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="22.5" width="22.5" viewBox="0 0 512 512">
-								<path
-									fill="#dfdddd"
-									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> */}
-						<a href="mailto:[email protected]" target="_blank" className="p-4 text-white">
-							<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512">
-								<path
-									fill="#dfdddd"
-									d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
-								/>
-							</svg>
-						</a>
-					</div>
+			<div className="flex lg:mx-auto lg:my-auto">
+				<div className="flex flex-row md:mr-4">
+					<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="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>
+					<a href="https://www.linkedin.com/in/jnlghmz/" target="_blank" className="p-4 text-verdant-fg">
+						<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 448 512">
+							<path
+								fill="#dfdddd"
+								d="M416 32H32C14.3 32 0 46.3 0 64v384c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32zM134.6 416H76V200h58.6v216zm-29.3-248c-19.4 0-35-15.6-35-34.7 0-19.1 15.6-34.7 35-34.7 19.4 0 34.9 15.6 34.9 34.7 0 19.1-15.6 34.7-34.9 34.7zm242.7 248h-58.6V304c0-24.6-.5-56.3-34.3-56.3-34.3 0-39.6 26.8-39.6 54.5V416H186V200h56.3v28.9h.8c7.9-15 27.3-30.9 56.1-30.9 60.1 0 71 39.5 71 90.8V416z"
+							/>
+						</svg>
+					</a>
+					<a href="mailto:[email protected]" target="_blank" className="p-4 text-white">
+						<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512">
+							<path
+								fill="#dfdddd"
+								d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
+							/>
+						</svg>
+					</a>
 				</div>
 			</div>
 		</div>