diff --git a/.eslintrc.json b/.eslintrc.json index 754b0fa..7e9b51d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -34,6 +34,12 @@ { "files": ["src/**/*Slice.js"], "rules": { "no-param-reassign": ["error", { "props": false }] } + }, + { + "files": ["src/**/*.ts", "src/**/*.tsx"], + "rules": { + "no-undef": "off" + } } ], "ignorePatterns": ["dist/", "build/"] diff --git a/public/404.html b/public/404.html deleted file mode 100644 index 7f1ea07..0000000 --- a/public/404.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - diff --git a/src/App.tsx b/src/App.tsx index 1660a2b..e3dbd3a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,12 +3,17 @@ import { Routes, Route } from 'react-router-dom'; import AccessPage from './components/pages/AccessPage.tsx'; import HomePage from './components/pages/HomePage.tsx'; +import NotFoundPage from './components/pages/NotFoundPage.tsx'; const App: React.FC = () => ( <> - } /> - } /> + } /> + } + /> + } /> ); diff --git a/src/components/UI/AnimatedButton.tsx b/src/components/UI/AnimatedButton.tsx index 02370d0..a52d527 100644 --- a/src/components/UI/AnimatedButton.tsx +++ b/src/components/UI/AnimatedButton.tsx @@ -9,22 +9,13 @@ const AnimatedButton: React.FC = () => ( className="animated-button my-btn" aria-label="navigates to expertise page" > - + languages - + frameworks - + skills { const paths = useMemo( () => ({ - homepage: '/iturres-reactive-portfolio/homepage', - projects: '/iturres-reactive-portfolio/homepage/projects', - contact: '/iturres-reactive-portfolio/homepage/contact', - expertise: '/iturres-reactive-portfolio/homepage/expertise', + homepage: '/homepage', + projects: '/homepage/projects', + contact: '/homepage/contact', + expertise: '/homepage/expertise', }), [], ); diff --git a/src/components/UI/Navbar.tsx b/src/components/UI/Navbar.tsx index 4e07571..72d562e 100644 --- a/src/components/UI/Navbar.tsx +++ b/src/components/UI/Navbar.tsx @@ -88,7 +88,7 @@ const Navbar: React.FC = () => {
  • - +
    • @@ -97,7 +97,7 @@ const Navbar: React.FC = () => { {windowWidth < minWith && ( <>
  • - + {
  • - + {
  • - + {
  • - + { diff --git a/src/components/pages/AccessPage.tsx b/src/components/pages/AccessPage.tsx index 63364be..dbdd44e 100644 --- a/src/components/pages/AccessPage.tsx +++ b/src/components/pages/AccessPage.tsx @@ -50,7 +50,7 @@ const AccessPage = () => { } }, 200); - $videoElement.current.addEventListener('ended', () => navigate('/iturres-reactive-portfolio/homepage')); + $videoElement.current.addEventListener('ended', () => navigate('/homepage')); } }; diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx index ddd1d83..859a239 100644 --- a/src/components/pages/HomePage.tsx +++ b/src/components/pages/HomePage.tsx @@ -7,6 +7,7 @@ import Navbar from '../UI/Navbar.tsx'; import ExpertiseSummaryPage from './ExpertiseSummaryPage.tsx'; import ContactPage from './ContactPage.tsx'; import ProjectsPage from './ProjectsPage.tsx'; +import NotFoundPage from './NotFoundPage.tsx'; import FileTabsNavbar from '../UI/FileTabsNavbar.tsx'; const HomePage: React.FC = () => { @@ -30,6 +31,7 @@ const HomePage: React.FC = () => { } /> } /> } /> + } /> diff --git a/src/components/pages/NotFoundPage.tsx b/src/components/pages/NotFoundPage.tsx new file mode 100644 index 0000000..e405b52 --- /dev/null +++ b/src/components/pages/NotFoundPage.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import FloatingAstronaut from '../animations/FloatingAstronaut.tsx'; + +import '../../styles/pages/NotFoundPage.scss'; + +type NotFoundPageProps = { + fromPath: string; +}; + +const AstronautStyleProps = { + animationSpeed: 45, + maxWidth: 50, + move: { + fromTop: 200, + toTop: 270, + fromLeft: -50, + toLeft: 100, + fromRight: 0, + toRight: 0, + }, + rotation: { + rotate: -130, + }, +}; + +const NotFoundPage: React.FC = ({ fromPath }) => { + const isWildCardAtAccessPage = fromPath === '/'; + + const pathTo = isWildCardAtAccessPage ? '/' : '/homepage'; + + return ( +
    + + +
    +

    + 🚀 +   Oops! It looks like you've drifted off course!   + 🌌 +

    +

    + Houston, we have a problem... The page you're searching for seems + to have floated away into the cosmic abyss. Our astronauts are out + there on a mission to find it, but in the meantime, why not explore + some of the other stellar destinations on the portfolio? +

    + + {isWildCardAtAccessPage + ? 'Go back to the Access Page' + : 'Go back to the Home Page'} + +
    +
    + ); +}; + +export default NotFoundPage; diff --git a/src/index.tsx b/src/index.tsx index aa112c6..a026a51 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { BrowserRouter } from 'react-router-dom'; +import { HashRouter } from 'react-router-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; import './styles/index.scss'; @@ -12,8 +12,8 @@ const root = ReactDOM.createRoot( root.render( - + - + , ); diff --git a/src/styles/UI/button.scss b/src/styles/UI/button.scss index 8c082f7..13ef4cd 100644 --- a/src/styles/UI/button.scss +++ b/src/styles/UI/button.scss @@ -29,3 +29,7 @@ $color2-hover: colors.$color2-hover; background-color: $color2-hover; } } + +.static-shadow { + box-shadow: 0 0 200px $color2-hover; +} diff --git a/src/styles/pages/NotFoundPage.scss b/src/styles/pages/NotFoundPage.scss new file mode 100644 index 0000000..ef82ecf --- /dev/null +++ b/src/styles/pages/NotFoundPage.scss @@ -0,0 +1,58 @@ +@use '../variables/colors' as colors; +@use '../variables/fonts' as fonts; + +$color1: colors.$color1; +$color2-hover: colors.$color2-hover; +$font-family-regular: fonts.$font-family-regular; + +.not-found-page { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + + header { + text-align: center; + padding: 0.5rem; + + h2 { + font-size: 1.2em; + font-weight: 900; + margin-bottom: 1rem; + color: $color1; + + span { + font-size: 1.5rem; + } + } + + p { + font-family: 'Jura', sans-serif; + font-size: 1.1rem; + padding-bottom: 2rem; + max-width: 500px; + margin: 0 auto; + } + } +} + +.not-found-page-btn { + text-decoration: none; + font-size: 0.8rem; + font-family: $font-family-regular; + background-color: transparent; + border-radius: 0.5rem; + color: $color2-hover; + border: 1px solid $color2-hover; + margin-top: 4rem; + padding: 0.9rem 2rem; + transition: all 0.3s ease; + + &:hover { + box-shadow: 0 0 200px $color2-hover; + } + + &:focus { + box-shadow: 0 0 10px $color2-hover; + } +}