From a16ed257de6d3c9306286e004d9e70d7f9123e8c Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:26:19 -0300 Subject: [PATCH 1/9] Feat: Add new page component 'NotFoundPage.tsx' --- src/components/pages/NotFoundPage.tsx | 70 +++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/pages/NotFoundPage.tsx diff --git a/src/components/pages/NotFoundPage.tsx b/src/components/pages/NotFoundPage.tsx new file mode 100644 index 0000000..617bafa --- /dev/null +++ b/src/components/pages/NotFoundPage.tsx @@ -0,0 +1,70 @@ +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 + ? '/iturres-reactive-portfolio/' + : '/iturres-reactive-portfolio/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; From 7bc5fe884faec5c9a48e73b503e9da73a0fe7f89 Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:32:14 -0300 Subject: [PATCH 2/9] Styles: Add new page stylesheet 'NotFoundPage.scss' --- src/styles/pages/NotFoundPage.scss | 58 ++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/styles/pages/NotFoundPage.scss 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; + } +} From 6e38dd79d4f28120bd2045e86b0fe6064eef611e Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:33:26 -0300 Subject: [PATCH 3/9] Chore: Add new file's rules to '.eslintrc.json' - disable 'no-undef' for all '.ts' and '.tsx' files. --- .eslintrc.json | 6 ++++++ 1 file changed, 6 insertions(+) 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/"] From 69755356a8d7863fa4a9dcc6095189f9a2ac4c3a Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:34:32 -0300 Subject: [PATCH 4/9] Chore: Remove '404.html' now unused file --- public/404.html | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 public/404.html 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 @@ - - - - - - - - From 6aee39fc9f2a815aaf9214824d32e58a4502b6d6 Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:35:19 -0300 Subject: [PATCH 5/9] Styles: Add new style class to the general UI 'buttons.scss' --- src/styles/UI/button.scss | 4 ++++ 1 file changed, 4 insertions(+) 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; +} From 03e205cf17ea09b4fcb620f43d5f49f55a9cdecc Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 22:50:45 -0300 Subject: [PATCH 6/9] Feat: Import and render 'NotFoundPage' at 'App' component --- src/App.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 1660a2b..b1091c8 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 = () => ( <> } /> - } /> + } + /> + } /> ); From 376e2df793664aeded6cb51cdb9723985c86648e Mon Sep 17 00:00:00 2001 From: iturres Date: Fri, 1 Mar 2024 23:22:46 -0300 Subject: [PATCH 7/9] Feat: Import and render 'NotFoundPage' at 'HomePage' component --- src/components/pages/HomePage.tsx | 2 ++ 1 file changed, 2 insertions(+) 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 = () => { } /> } /> } /> + } /> From 4540716598c4ec81bcfd5c760693a41508ae231f Mon Sep 17 00:00:00 2001 From: iturres Date: Sat, 2 Mar 2024 00:05:21 -0300 Subject: [PATCH 8/9] Feat: Migrate from BrowserRouter to HashRouter 'index.tsx' --- src/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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( - + - + , ); From 2ca42d9f7bd6e3a8ec8cba8e408a649fbd3cfb13 Mon Sep 17 00:00:00 2001 From: iturres Date: Sat, 2 Mar 2024 00:05:53 -0300 Subject: [PATCH 9/9] Feat: Remove the '/iturres-reactive-portfolio/' prefix from all URL paths - src/App.tsx - src/components/UI/AnimatedButton.tsx - src/components/UI/FileTabsNavbar.tsx - src/components/UI/Navbar.tsx - src/components/pages/AboutPage.tsx - src/components/pages/AccessPage.tsx - src/components/pages/NotFoundPage.tsx Since we are now using HashRouter, we don't need to use the '/iturres-reactive-portfolio/' prefix in the paths anymore. --- src/App.tsx | 4 ++-- src/components/UI/AnimatedButton.tsx | 15 +++------------ src/components/UI/FileTabsNavbar.tsx | 8 ++++---- src/components/UI/Navbar.tsx | 10 +++++----- src/components/pages/AboutPage.tsx | 2 +- src/components/pages/AccessPage.tsx | 2 +- src/components/pages/NotFoundPage.tsx | 4 +--- 7 files changed, 17 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b1091c8..e3dbd3a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,9 +8,9 @@ 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/NotFoundPage.tsx b/src/components/pages/NotFoundPage.tsx index 617bafa..e405b52 100644 --- a/src/components/pages/NotFoundPage.tsx +++ b/src/components/pages/NotFoundPage.tsx @@ -28,9 +28,7 @@ const AstronautStyleProps = { const NotFoundPage: React.FC = ({ fromPath }) => { const isWildCardAtAccessPage = fromPath === '/'; - const pathTo = isWildCardAtAccessPage - ? '/iturres-reactive-portfolio/' - : '/iturres-reactive-portfolio/homepage'; + const pathTo = isWildCardAtAccessPage ? '/' : '/homepage'; return (