diff --git a/package-lock.json b/package-lock.json index aa714c8..fda014e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "grommet-icons": "^4.12.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.66", @@ -1073,6 +1074,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/@rollup/rollup-android-arm-eabi": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", @@ -3483,6 +3492,36 @@ "node": ">=0.10.0" } }, + "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 7fb7e99..d51a00d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "dependencies": { "grommet-icons": "^4.12.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/assets/main.css b/src/assets/main.css index 1f75884..bd6213e 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,14 +1,3 @@ @tailwind base; @tailwind components; -@tailwind utilities; - -.crayon { - padding:0.5rem 0.5rem; - margin:0 0.5rem; - font-size:1rem; - - border-top-left-radius: 255px 15px; - border-top-right-radius: 15px 225px; - border-bottom-right-radius: 225px 15px; - border-bottom-left-radius:15px 255px; -} \ No newline at end of file +@tailwind utilities; \ No newline at end of file diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..7ff342b --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,45 @@ +import { useState, useEffect } from 'react'; +import { + Twitter, + Github, + Lastfm +} from 'grommet-icons' + +export default function Footer() { + const [mailState, setMailState] = useState(false); + + useEffect(() => { + setTimeout(() => { + setMailState(false) + }, 3000) + }, [mailState]) + + return ( +
+

© {new Date().getFullYear()}, Alex Frantz. All Rights Reserved

+ + { + mailState ? ( +

+ Copied! +

+ ) : ( + + ) + } + +
+ {/* socials */} + + + + + + + + + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..606706e --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,14 @@ +export default function Header() { + return ( +
+

Alex Frantz

+

Professional button clicker & word typer

+
+ Home + Experience +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/Project.tsx b/src/components/Project.tsx new file mode 100644 index 0000000..a8db245 --- /dev/null +++ b/src/components/Project.tsx @@ -0,0 +1,51 @@ +export default function Project({ + name, + description, + urlTo, + subtitle, + bullets +}: { + name: string, + description: string, + urlTo?: string, + subtitle?: string, + bullets?: string[] +}) { + const mapBullets = () => { + return bullets?.map((v,k) => { + return
  • {v}
    • + }) + } + + return ( +
    +
    +

    {name} + { + urlTo ? ( + + Project Website + + ) : ( + + {subtitle} + + ) + + } +

    +
    + +
    +

    {description}

    + { + bullets && ( + + ) + } +
    +
    + ) +} \ No newline at end of file diff --git a/src/components/SocialItem.tsx b/src/components/SocialItem.tsx deleted file mode 100644 index 1496ecc..0000000 --- a/src/components/SocialItem.tsx +++ /dev/null @@ -1,19 +0,0 @@ -type SocialItemType = { - urlTo: string, - title: string -} - -export default function SocialItem({ - urlTo, - title -}: SocialItemType) { - return ( - - {title} - - ) -} \ No newline at end of file diff --git a/src/experience.tsx b/src/experience.tsx new file mode 100644 index 0000000..8a993f0 --- /dev/null +++ b/src/experience.tsx @@ -0,0 +1,54 @@ +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import Project from "./components/Project"; + +export default function Experience() { + return ( +
    +
    +
    + +

    Career

    +
    + +
    + +

    Education/Certification

    +
    + + + + +
    +
    + +
    + ) +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 65da60f..1362b00 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,72 +1,33 @@ -import SocialItem from "./components/SocialItem" -import { useState, useEffect } from "react" +import Footer from "./components/Footer"; +import Header from "./components/Header"; +import Project from "./components/Project"; export default function Home() { - const [copied, setCopied] = useState(false); - - useEffect(() => { - setTimeout(() => { - setCopied(false) - }, 5000) - }, [copied]) - return ( -
    -
    -
    - +
    +
    + +
    + - - -
    -
    -

    Alex

    -
    -
    - - -
    -
    - {/* */} - - { - copied ? ( - - ) : ( - - ) - } - -
    +
    ) } \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 515e4b2..6be5aae 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,12 +1,29 @@ import React from 'react' import ReactDOM from 'react-dom/client' +import { + createBrowserRouter, + RouterProvider +} from 'react-router-dom' import './assets/main.css' // pages import MainPage from './index'; +import Experience from './experience'; + +// router +const router = createBrowserRouter([ + { + path: "/", + element: + }, + { + path: "experience", + element: + } +]) ReactDOM.createRoot(document.getElementById('root')!).render( - + , )