merge: #3

.editorconfig

@@ -4,7 +4,7 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js,json,yml,jsx,tsx}]
+[*.{js,cjs,mjs,ts,tsx,json,yml}]
 charset = utf-8
 indent_style = tab
 indent_size = 4

.eslintrc.json

@@ -29,7 +29,7 @@
 		"curly": ["error", "multi-line", "consistent"],
 		"dot-location": ["error", "property"],
 		"handle-callback-err": "off",
-		"indent": ["error", "tab"],
+		"indent": ["off", "tab"],
 		"keyword-spacing": "error",
 		"max-nested-callbacks": ["error", { "max": 4 }],
 		"max-statements-per-line": ["error", { "max": 2 }],

.nvmrc

@@ -1 +1 @@
-v19.7.0
+v20.5.1

.yarnrc.yml

@@ -1,2 +1,3 @@
-yarnPath: .yarn/releases/yarn-3.6.0.cjs
 nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

package.json

@@ -1,7 +1,12 @@
 {
-	"name": "portfolio-v2",
+	"name": "janleigh.github.io",
 	"private": true,
-	"version": "0.0.0",
+	"version": "3.0.0",
+	"description": "My personal website.",
+	"author": {
+		"name": "Jan Leigh",
+		"email": "[email protected]"
+	},
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -20,7 +25,8 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.12.1",
-		"sass": "^1.63.3"
+		"sass": "^1.63.3",
+		"tuicss": "^2.1.2"
 	},
 	"devDependencies": {
 		"@types/react": "^18.0.37",
@@ -38,5 +44,5 @@
 		"typescript": "^5.0.2",
 		"vite": "^4.3.9"
 	},
-	"packageManager": "[email protected].0"
+	"packageManager": "[email protected].3"
 }

src/app/Footer.tsx

@@ -0,0 +1,16 @@
+function Footer() {
+	return (
+		<div>
+			<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.
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Footer;

src/app/Header.tsx

@@ -0,0 +1,13 @@
+function Header() {
+	return (
+		<div>
+			<div className="terminal is-accent">
+				<div className="prompt">
+					<span>RUN ./portfolio.o</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

src/app/NotFound.tsx

@@ -0,0 +1,31 @@
+function NotFound() {
+	return (
+		<>
+			<section className="section is-small animate__animated animate__fadeIn" id="not-found">
+				<div className="columns">
+					<div className="column is-three-fifths is-centered tui-window">
+						<fieldset className="tui-fieldset tui-border-solid">
+							<legend className="center">Error</legend>
+							<div className="is-flex is-align-content-center">
+								<p>
+									It seems that you have stumbled upon a page that does not exist. Do you want to go
+									back to the <span className="is-accent main-font">home page</span>?
+								</p>
+							</div>
+							<div className="is-flex is-justify-content-center" style={{ padding: "3rem" }}>
+								<a href="/" className="tui-button active-button">
+									Yes
+								</a>
+								<button className="tui-button disabled-button disabled" disabled>
+									No
+								</button>
+							</div>
+						</fieldset>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+}
+
+export default NotFound;

src/app/home/AboutMe.tsx

@@ -0,0 +1,41 @@
+function AboutMe() {
+	return (
+		<div>
+			<div className="column tui-window" id="about">
+				<fieldset className="tui-fieldset tui-border-solid">
+					<legend className="center">About Me</legend>
+					<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" />
+							</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.
+									<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.
+									<br />
+									<br />I have been programming for about{" "}
+									<span className="is-accent">6 years now</span>, and I have a passion for creating
+									web applications, and sometimes{" "}
+									<span style={{ textDecoration: "line-through" }}>shitty</span> software.
+									<br />
+									<br />I am proficient in a variety of programming languages, including{" "}
+									<span className="is-accent">TypeScript</span>, <span className="is-accent">Go</span>
+									, and <span className="is-accent">C</span>. I am also familiar with a variety of web
+									development frameworks and tools such as <span className="is-accent">React</span>,{" "}
+									<span className="is-accent">Next.js</span>, and{" "}
+									<span className="is-accent">Vite</span>.
+								</p>
+							</div>
+						</div>
+					</div>
+				</fieldset>
+			</div>
+		</div>
+	);
+}
+
+export default AboutMe;

src/app/home/Navbar.tsx

@@ -0,0 +1,24 @@
+function Navbar() {
+	return (
+		<div className="column is-full tui-window">
+			<fieldset className="tui-fieldset tui-border-solid">
+				<legend className="center">Navbar</legend>
+				<div className="is-flex is-align-content-end" id="navbar-menu">
+					<div className="navbar-end">
+						<a className="navbar-item" href="/">
+							<span className="is-accent">h</span>ome.
+						</a>
+						<a className="navbar-item" href="#/projects">
+							<span className="is-accent">p</span>rojects.
+						</a>
+						<a className="navbar-item" href="#/contact">
+							<span className="is-accent">c</span>ontact.
+						</a>
+					</div>
+				</div>
+			</fieldset>
+		</div>
+	);
+}
+
+export default Navbar;

src/main.tsx

@@ -2,9 +2,10 @@ import ReactDOM from "react-dom";
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
 
 import App from "./pages/App";
-import NotFound from "./pages/NotFound";
+import NotFound from "./app/NotFound";
 
 import "animate.css";
+import "tuicss";
 import "../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
 import "./styles/index.scss";
 

src/pages/App.tsx

@@ -1,14 +1,18 @@
-import MainColumn from "../components/MainColumn";
-import Sidebar from "../components/Sidebar";
+import Footer from "../app/Footer";
+import Header from "../app/Header";
+import AboutMe from "../app/home/AboutMe";
+import Navbar from "../app/home/Navbar";
 
 export function App() {
 	return (
 		<>
-			<section className="section is-small">
-				<div className="columns">
-					<Sidebar />
-					<MainColumn />
+			<section className="section is-small animate__animated animate__fadeIn">
+				<Header />
+				<div style={{ margin: "1rem 2rem" }}>
+					<Navbar />
+					<AboutMe />
 				</div>
+				<Footer />
 			</section>
 		</>
 	);