Completed Project For Reveal

itsjustshubh · Jan 24, 2024 · d946c77 · d946c77
1 parent aa43c55
commit d946c77
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,14 @@
 <p align="center">
-  <br>
-  <img src="public/person-walking-arrow-loop-left.svg" alt="Project Loading Screen" width="150"/>
+  <img src="public/person-walking-arrow-loop-left.svg" alt="Project Loading Screen Logo" width="150"/>
 </p>
 
-# Project Loading Screen 
+# Project Loading Screen
 ## Introduction
 "Project Loading Screen" is a web-based project that offers an endless display of iconic Apple and Windows loading screens. Designed by Shubh Thorat, this project is a unique artistic interpretation of the most familiar wait screens we encounter, intended to mesmerize and engage the audience.
 
-![Project Loading Screen](<URL_to_screenshot_of_the_project>)
+<p align="center">
+  <img src="public/screenshot.png" alt="Project Loading Screen Screenshot"/>
+</p>
 
 ## Technology Stack
 - React
@@ -21,9 +22,11 @@
 - A creative and artistic take on everyday digital elements
 
 ## Usage
-Simply visit the deployed application at [Project Loading Screen](<deployed_application_URL>) and enjoy the seamless display of loading screens.
+Simply visit the deployed application at [Project Loading Screen](https://project-loading-screen.vercel.app) and enjoy the seamless display of loading screens.
 
-![GIF of Application in Use](<URL_to_GIF_of_application_in_use>)ate a new Pull Request)
+<p align="center">
+  <img src="public/animated.gif" alt="GIF showing the application in use"/>
+</p>
 
 ## License
 This project is protected under a custom license. The use, reproduction, modification, or distribution of this project and its code are strictly prohibited without prior written permission from Shubh Thorat. For inquiries regarding the use or distribution of this project, please contact [reapers-arras.0y@icloud.com](mailto:reapers-arras.0y@icloud.com).

diff --git a/public/animated.gif b/public/animated.gif
diff --git a/public/screen-recording.mp4 b/public/screen-recording.mp4
diff --git a/public/screenshot.png b/public/screenshot.png
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,23 @@
-// App.js
 import React from 'react';
-import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
-import Home from './pages/Home/Home'; // Adjust the path if your folder structure is different
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
+import Home from './pages/Home/Home';
 import Apple from "./pages/Apple/Apple";
 import Windows from "./pages/Windows/Windows";
-import Layout from "./pages/Layout/Layout";
 import DVD from "./pages/DVD/DVD";
+import NotFoundPage from "./pages/404Page/404Page";
+import Layout from "./pages/Layout/Layout";
 
 function App() {
     return (
         <Router>
-            <Layout>
-                <Routes>
-                    {/* Main page routers */}
-                    <Route path="/" element={<Home/>}/>
-                    <Route path="/apple" element={<Apple/>}/>
-                    <Route path="/windows" element={<Windows/>}/>
-                    <Route path="/dvd" element={DVD}/>
-                </Routes>
-            </Layout>
+            <Routes>
+                <Route path="/" element={<Layout isNotFound={false}><Home/></Layout>}/>
+                <Route path="/apple" element={<Layout isNotFound={false}><Apple/></Layout>}/>
+                <Route path="/windows" element={<Layout isNotFound={false}><Windows/></Layout>}/>
+                <Route path="/dvd" element={<Layout isNotFound={false}><DVD/></Layout>}/>
+                {/* 404 Not Found route */}
+                <Route path="*" element={<Layout isNotFound={true}><NotFoundPage/></Layout>}/>
+            </Routes>
         </Router>
     );
 }

diff --git a/src/pages/404Page/404Page.css b/src/pages/404Page/404Page.css
@@ -0,0 +1,68 @@
+.notfound-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.85); /* Darker background for contrast */
+    backdrop-filter: blur(15px); /* Increased blur effect */
+    color: white;
+}
+
+.notfound-header {
+    margin-bottom: 30px;
+}
+
+.notfound-content {
+    background: rgba(255, 255, 255, 0.1); /* Slight background for content */
+    padding: 40px;
+    border-radius: 15px; /* Rounded corners for content box */
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Deeper shadow for depth */
+}
+
+.notfound-content h1 {
+    font-size: 120px;
+    line-height: 1;
+    margin: 0;
+    color: #007bff; /* Blue color for the number 404 */
+}
+
+.notfound-content h2 {
+    font-size: 28px;
+    margin: 10px 0;
+}
+
+.notfound-content p {
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.home-link {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.home-link:hover {
+    background-color: #0056b3;
+}
+
+@media only screen and (max-width: 600px) {
+    .notfound-content h1 {
+        font-size: 60px;
+    }
+
+    .notfound-content h2 {
+        font-size: 22px;
+    }
+
+    .notfound-content {
+        width: 90%; /* Adjust width for mobile */
+        padding: 20px; /* Less padding on mobile */
+    }
+}
diff --git a/src/pages/404Page/404Page.js b/src/pages/404Page/404Page.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './404Page.css';
+
+const NotFoundPage = () => {
+    return (
+        <div className="notfound-container">
+            <div className="notfound-content">
+                <div className="notfound-header">
+                    <h1>404</h1>
+                    <h2>Oops! Page not found.</h2>
+                </div>
+                <p>Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.</p>
+                <a href="/" className="home-link">Return Home</a>
+            </div>
+        </div>
+    );
+}
+
+export default NotFoundPage;
diff --git a/src/pages/Layout/Layout.css b/src/pages/Layout/Layout.css
@@ -283,8 +283,7 @@ body {
         overflow: auto;
     }
 
-
     .navbar {
         display: none; /* Hide the navbar on phone screens */
     }
-}
+}
diff --git a/src/pages/Layout/Layout.js b/src/pages/Layout/Layout.js
@@ -7,7 +7,7 @@ import {faApple, faWindows} from '@fortawesome/free-brands-svg-icons';
 import {faExpandArrowsAlt} from '@fortawesome/free-solid-svg-icons';
 import {CSSTransition, TransitionGroup} from 'react-transition-group';
 
-function Layout({children}) {
+function Layout({ children, isNotFound }) {
     const location = useLocation();
 
     useEffect(() => {
@@ -160,48 +160,50 @@ function Layout({children}) {
 
     return (
         <div className="layout-background">
-            <div className="navbar" style={{display: (isMobile || isFullScreen) ? 'none' : 'flex'}}>
-                <ul>
-                    <li><NavLink to="/"
-                                 className={isActive('/') ? 'nav-link nav-link-active' : 'nav-link'}>Home</NavLink></li>
-
-                    {/* DVD NavLink */}
-                    <li>
-                        <NavLink to="/apple"
-                                 className={isActive('/apple') ? 'nav-link nav-link-active apple-link' : 'nav-link apple-link'}>
-                            <FontAwesomeIcon icon={faApple} className="nav-icon"/>
-                            Apple
-                        </NavLink>
-                    </li>
-
-                    {/* Windows NavLink */}
-                    <li>
-                        <NavLink to="/windows"
-                                 className={isActive('/windows') ? 'nav-link nav-link-active windows-link' : 'nav-link windows-link'}>
-                            <FontAwesomeIcon icon={faWindows} className="nav-icon"/>
-                            Windows
-                        </NavLink>
-                    </li>
-
-                    {/* DVD Logo NavLink */}
-                    {/*<li>*/}
-                    {/*  <NavLink to="/dvd" className={isActive('/dvd') ? 'nav-link nav-link-active dvd-link' : 'nav-link dvd-link'}>*/}
-                    {/*    <img src={dvdLogo} alt="DVD Logo" className="nav-icon"/> /!* Add this line *!/*/}
-                    {/*    DVD Logo*/}
-                    {/*  </NavLink>*/}
-                    {/*</li>*/}
-
-                    {/* Full Screen NavLink */}
-                    {showFullScreenLink && (
-                        <li className={linkTransition}>
-                            <NavLink onClick={toggleFullScreen} className='nav-link fullscreen-link'>
-                                <FontAwesomeIcon icon={faExpandArrowsAlt} className="nav-icon"/>
-                                Full Screen
+            {!isNotFound && (
+                <div className="navbar" style={{display: (isMobile || isFullScreen) ? 'none' : 'flex'}}>
+                    <ul>
+                        <li><NavLink to="/"
+                                     className={isActive('/') ? 'nav-link nav-link-active' : 'nav-link'}>Home</NavLink></li>
+
+                        {/* DVD NavLink */}
+                        <li>
+                            <NavLink to="/apple"
+                                     className={isActive('/apple') ? 'nav-link nav-link-active apple-link' : 'nav-link apple-link'}>
+                                <FontAwesomeIcon icon={faApple} className="nav-icon"/>
+                                Apple
                             </NavLink>
                         </li>
-                    )}
-                </ul>
-            </div>
+
+                        {/* Windows NavLink */}
+                        <li>
+                            <NavLink to="/windows"
+                                     className={isActive('/windows') ? 'nav-link nav-link-active windows-link' : 'nav-link windows-link'}>
+                                <FontAwesomeIcon icon={faWindows} className="nav-icon"/>
+                                Windows
+                            </NavLink>
+                        </li>
+
+                        {/* DVD Logo NavLink */}
+                        {/*<li>*/}
+                        {/*  <NavLink to="/dvd" className={isActive('/dvd') ? 'nav-link nav-link-active dvd-link' : 'nav-link dvd-link'}>*/}
+                        {/*    <img src={dvdLogo} alt="DVD Logo" className="nav-icon"/> /!* Add this line *!/*/}
+                        {/*    DVD Logo*/}
+                        {/*  </NavLink>*/}
+                        {/*</li>*/}
+
+                        {/* Full Screen NavLink */}
+                        {showFullScreenLink && (
+                            <li className={linkTransition}>
+                                <NavLink onClick={toggleFullScreen} className='nav-link fullscreen-link'>
+                                    <FontAwesomeIcon icon={faExpandArrowsAlt} className="nav-icon"/>
+                                    Full Screen
+                                </NavLink>
+                            </li>
+                        )}
+                    </ul>
+                </div>
+            )}
 
             {!isMobile && !isFullScreen && <AnimatedCursor {...cursorConfig} />}