chore: refactoring

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "janleigh.github.io",
 	"private": true,
-	"version": "3.0.0",
-	"description": "My personal website.",
+	"version": "3.0.1",
+	"description": "My personal website. Powered using React, Vite and Bulma.",
 	"author": {
 		"name": "Jan Leigh",
 		"email": "[email protected]"

src/app/Footer.tsx

@@ -4,8 +4,8 @@ function Footer() {
 			<div className="terminal is-accent" style={{ marginTop: ".5rem" }}>
 				<div className="prompt">
 					<span>
-						Powered using <a href="https://bulma.io">Bulma</a> and <a href="https://reactjs.org">React</a>.
-						Copyright © 2023 <span className="is-accent">Jan Leigh Muñoz</span>. All Rights Reserved.
+						Powered using <a href="https://reactjs.org">React</a>, <a href="https://vitejs.dev/">Vite</a>,
+						and <a href="https://bulma.io">Bulma</a>. Copyright © 2023 Jan Leigh Muñoz. All Rights Reserved.
 					</span>
 				</div>
 			</div>

src/app/contact/Contact.tsx

@@ -0,0 +1,37 @@
+function Contact() {
+	return (
+		<>
+			<section className="section is-small animate__animated animate__fadeIn" id="contact">
+				<div className="columns">
+					<div className="column is-three-fifths is-centered tui-window">
+						<fieldset className="tui-fieldset tui-border-solid">
+							<legend className="center">Contact</legend>
+							<div className="is-flex is-align-content-center" style={{ margin: "1rem 3rem" }}>
+								<p>
+									<span className="is-accent main-font">E</span>mail:{" "}
+									<a href="mailto:[email protected]">mailto:[email protected]</a>
+									<br />
+									<span className="is-accent main-font">I</span>nstagram:{" "}
+									<a href="https://www.instagram.com/jnlghmz/">https://www.instagram.com/jnlghmz</a>
+									<br />
+									<span className="is-accent main-font">K</span>o-fi:{" "}
+									<a href="https://ko-fi.com/janleigh/">https://ko-fi.com/janleigh</a>
+									<br />
+									<span className="is-accent main-font">G</span>itHub:{" "}
+									<a href="https://github.com/janleigh">https://github.com/janleigh</a>
+								</p>
+							</div>
+							<div className="is-flex is-justify-content-center" style={{ padding: "2rem 3rem 2.5rem" }}>
+								<a href="/" className="tui-button active-button">
+									Return to Home Page
+								</a>
+							</div>
+						</fieldset>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+}
+
+export default Contact;

src/app/home/AboutMe.tsx

@@ -7,12 +7,12 @@ function AboutMe() {
 					<div className="is-flex">
 						<div className="columns is mobile" style={{ margin: "0.5rem" }}>
 							<div className="column is-one-quarter">
-								<img src="/term.png" alt="Profile" />
+								<img className="tui-shadow" src="https://github.com/janleigh.png" alt="Profile" />
 							</div>
 							<div className="column is-flex is-align-items-center">
 								<p>
 									<h1 className="is-accent">Hello, dear reader!</h1>
-									I am a Filipino senior high school student and a self-taught full-stack developer.
+									I am a Filipino first-year college student and a self-taught full-stack developer.
 									<br />
 									My real name is <span className="is-accent">Jan Leigh</span>, but I prefer the name{" "}
 									<span className="is-accent">Kizu</span> on the internet.

src/app/home/Navbar.tsx

@@ -8,7 +8,7 @@ function Navbar() {
 						<a className="navbar-item" href="/">
 							<span className="is-accent">h</span>ome.
 						</a>
-						<a className="navbar-item" href="#/projects">
+						<a className="navbar-item" href="https://github.com/janleigh?tab=repositories&type=source">
 							<span className="is-accent">p</span>rojects.
 						</a>
 						<a className="navbar-item" href="#/contact">

src/main.tsx

@@ -2,6 +2,7 @@ import ReactDOM from "react-dom";
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
 
 import App from "./pages/App";
+import Contact from "./app/contact/Contact";
 import NotFound from "./app/NotFound";
 
 import "animate.css";
@@ -13,6 +14,7 @@ ReactDOM.render(
 	<Router>
 		<Routes>
 			<Route path="/" element={<App />} />
+			<Route path="contact" element={<Contact />} />
 			<Route path="*" element={<NotFound />} />
 		</Routes>
 	</Router>,

src/styles/_app.scss

@@ -22,7 +22,8 @@
 }
 
 .active-button {
-	background-color: $accent-active !important;
+	background-color: $foreground-color !important;
+	color: $background-color !important;
 }
 
 .disabled-button {

src/styles/_overrides.scss

@@ -32,6 +32,16 @@ span {
 	font-family: $font-alt;
 }
 
+a {
+	&:hover {
+		color: lighten($color: $accent, $amount: 20) !important;
+	}
+
+	&:active, &:focus {
+		color: $accent !important;
+	}
+}
+
 .tui-window {
 	background-color: $background-color;
 	box-shadow: none;
@@ -55,11 +65,23 @@ span {
 	border-color: $border-inactive;
 }
 
+.tui-shadow {
+	box-shadow: 10px 10px darken($color: #1a1a1a, $amount: 5%) !important;
+}
+
 .tui-button {
 	font-family: $font-main !important;
-	box-shadow: 10px 10px darken($color: #1a1a1a, $amount: 5%);
+	box-shadow: 10px 10px darken($color: #1a1a1a, $amount: 5%) !important;
 	padding: 0rem 1rem;
 	margin: 0rem 3rem;
+
+	&:active {
+		background-color: inherit !important;
+	}
+
+	&:focus {
+		color: inherit !important;
+	}
 }
 
 @import "../../node_modules/bulma/sass/base/_all.sass";