diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..77b75ef
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import Nav from "../nav";
+import Image from "next/image";
+import {motion} from "framer-motion";
+
+export default function Home() {
+ return (
+
+
+
+ );
+}
+
+function Contents(){
+ return(
+
+
aboutme
+
+ aboutme
+ aboutme
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/globals.css b/app/globals.css
index 875c01e..95f7094 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,19 +2,19 @@
@tailwind components;
@tailwind utilities;
-:root {
+:root{
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
+/* @media (prefers-color-scheme: dark) {
+:root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
}
+ } */
body {
color: rgb(var(--foreground-rgb));
diff --git a/app/layout.tsx b/app/layout.tsx
index 3314e47..cf4fe55 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,13 +1,17 @@
+'use client'
+
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
+import Nav from "./nav";
+import { AnimatePresence } from "framer-motion";
+import { Router, Routes, useLocation } from "react-router-dom";
const inter = Inter({ subsets: ["latin"] });
-export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
-};
+// export const metadata: Metadata = {
+// title: "Alex's Website"
+// };
export default function RootLayout({
children,
@@ -16,7 +20,13 @@ export default function RootLayout({
}>) {
return (
- {children}
+
+
+
+ {children}
+
+
+
);
}
diff --git a/app/nav.tsx b/app/nav.tsx
new file mode 100644
index 0000000..759f399
--- /dev/null
+++ b/app/nav.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+
+const links = [
+ {
+ text: 'Home',
+ link: '/'
+ },
+ {
+ text: "Projects",
+ link: '/projects'
+ },
+ {
+ text: 'About Me',
+ link: '/about'
+ },
+ {
+ text: 'Blog',
+ link: '/blog'
+ }
+ ]
+
+export default function Nav() {
+ const [mobile, setMobile] = useState(false);
+ const hidden = !mobile ? " hidden" : "";
+
+ return (
+
+ );
+}
+
+function NavBar() {
+ const [curloc, setCurloc] = useState("");
+ useEffect(() => {
+ setCurloc(window.location.pathname);
+ }, []);
+
+ const liClass = `block py-5 px-3
+ text-gray-900 rounded md:border-0 md:p-0
+ dark:text-white`;
+ const unselectedClass = ` hover:bg-blue-400 md:hover:bg-transparent md:hover:text-blue-700`;//md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent
+ const selectedClass = ` `;
+
+ const parsed = [];
+ for (let i = 0; i < links.length; i++) {
+ const obj = links[i];
+ parsed.push(curloc !== obj.link ? (
+
+ {obj.text}
+
+ ) : (
+ { e.preventDefault() }}>
+ {obj.text}
+
+ )
+ )
+ }
+ return (
+
+ );
+}
+
+function MenuSvg() {
+ return (
+ <>
+ Open main menu
+
+
+ );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 5705d4e..1b174d8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,113 +1,21 @@
+'use client'
+
import Image from "next/image";
+import Nav from "./nav";
+import { AnimatePresence, motion } from "framer-motion";
export default function Home() {
return (
-
-
-
- Get started by editing
- app/page.tsx
-
-
-
-
-
-
-
+
+
);
}
+
+function Contents() {
+ return (
+
+ test
+
+ )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 20836f1..388ec19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
"name": "atch2203.github.io",
"version": "0.1.0",
"dependencies": {
- "next": "14.2.4",
- "react": "^18",
- "react-dom": "^18"
+ "framer-motion": "^11.2.10",
+ "next": "^14.2.4",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-router-dom": "^6.23.1"
},
"devDependencies": {
"@types/node": "^20",
@@ -425,6 +427,14 @@
"node": ">=14"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.16.1",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
+ "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@rushstack/eslint-patch": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz",
@@ -2134,6 +2144,30 @@
"url": "https://github.com/sponsors/isaacs"
}
},
+ "node_modules/framer-motion": {
+ "version": "11.2.10",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.10.tgz",
+ "integrity": "sha512-/gr3PLZUVFCc86a9MqCUboVrALscrdluzTb3yew+2/qKBU8CX6nzs918/SRBRCqaPbx0TZP10CB6yFgK2C5cYQ==",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/fs-extra": {
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -4025,6 +4059,36 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
+ "node_modules/react-router": {
+ "version": "6.23.1",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
+ "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+ "dependencies": {
+ "@remix-run/router": "1.16.1"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.23.1",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
+ "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+ "dependencies": {
+ "@remix-run/router": "1.16.1",
+ "react-router": "6.23.1"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index f312c6c..b15e0ba 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,11 @@
"deploy": "gh-pages -d build"
},
"dependencies": {
- "next": "14.2.4",
- "react": "^18",
- "react-dom": "^18"
+ "framer-motion": "^11.2.10",
+ "next": "^14.2.4",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-router-dom": "^6.23.1"
},
"devDependencies": {
"@types/node": "^20",
diff --git a/public/Happy_Negative_Galaxy.png b/public/Happy_Negative_Galaxy.png
new file mode 100644
index 0000000..b19a7c9
Binary files /dev/null and b/public/Happy_Negative_Galaxy.png differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e4bd91..b7d25c6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,15 +6,6 @@ const config: Config = {
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
- theme: {
- extend: {
- backgroundImage: {
- "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
- "gradient-conic":
- "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
- },
- },
- },
plugins: [],
};
export default config;