Skip to content

Commit d946c77

Browse files
itsjustshubhitsjustshubh
committed
Completed Project For Reveal
1 parent aa43c55 commit d946c77

File tree

9 files changed

+152
-62
lines changed

9 files changed

+152
-62
lines changed

‎README.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<p align="center">
2-
<br>
3-
<img src="public/person-walking-arrow-loop-left.svg" alt="Project Loading Screen" width="150"/>
2+
<img src="public/person-walking-arrow-loop-left.svg" alt="Project Loading Screen Logo" width="150"/>
43
</p>
54

6-
# Project Loading Screen
5+
# Project Loading Screen
76
## Introduction
87
"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.
98

10-
![Project Loading Screen](<URL_to_screenshot_of_the_project>)
9+
<p align="center">
10+
<img src="public/screenshot.png" alt="Project Loading Screen Screenshot"/>
11+
</p>
1112

1213
## Technology Stack
1314
- React
@@ -21,9 +22,11 @@
2122
- A creative and artistic take on everyday digital elements
2223

2324
## Usage
24-
Simply visit the deployed application at [Project Loading Screen](<deployed_application_URL>) and enjoy the seamless display of loading screens.
25+
Simply visit the deployed application at [Project Loading Screen](https://project-loading-screen.vercel.app) and enjoy the seamless display of loading screens.
2526

26-
![GIF of Application in Use](<URL_to_GIF_of_application_in_use>)ate a new Pull Request)
27+
<p align="center">
28+
<img src="public/animated.gif" alt="GIF showing the application in use"/>
29+
</p>
2730

2831
## License
2932
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).

‎public/animated.gif

459 KB
Loading

‎public/screen-recording.mp4

8.33 MB
Binary file not shown.

‎public/screenshot.png

272 KB
Loading

‎src/App.js

+12-13
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
// App.js
21
import React from 'react';
3-
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
4-
import Home from './pages/Home/Home'; // Adjust the path if your folder structure is different
2+
import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
3+
import Home from './pages/Home/Home';
54
import Apple from "./pages/Apple/Apple";
65
import Windows from "./pages/Windows/Windows";
7-
import Layout from "./pages/Layout/Layout";
86
import DVD from "./pages/DVD/DVD";
7+
import NotFoundPage from "./pages/404Page/404Page";
8+
import Layout from "./pages/Layout/Layout";
99

1010
function App() {
1111
return (
1212
<Router>
13-
<Layout>
14-
<Routes>
15-
{/* Main page routers */}
16-
<Route path="/" element={<Home/>}/>
17-
<Route path="/apple" element={<Apple/>}/>
18-
<Route path="/windows" element={<Windows/>}/>
19-
<Route path="/dvd" element={DVD}/>
20-
</Routes>
21-
</Layout>
13+
<Routes>
14+
<Route path="/" element={<Layout isNotFound={false}><Home/></Layout>}/>
15+
<Route path="/apple" element={<Layout isNotFound={false}><Apple/></Layout>}/>
16+
<Route path="/windows" element={<Layout isNotFound={false}><Windows/></Layout>}/>
17+
<Route path="/dvd" element={<Layout isNotFound={false}><DVD/></Layout>}/>
18+
{/* 404 Not Found route */}
19+
<Route path="*" element={<Layout isNotFound={true}><NotFoundPage/></Layout>}/>
20+
</Routes>
2221
</Router>
2322
);
2423
}

‎src/pages/404Page/404Page.css

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.notfound-container {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
height: 100vh;
6+
text-align: center;
7+
background: rgba(0, 0, 0, 0.85); /* Darker background for contrast */
8+
backdrop-filter: blur(15px); /* Increased blur effect */
9+
color: white;
10+
}
11+
12+
.notfound-header {
13+
margin-bottom: 30px;
14+
}
15+
16+
.notfound-content {
17+
background: rgba(255, 255, 255, 0.1); /* Slight background for content */
18+
padding: 40px;
19+
border-radius: 15px; /* Rounded corners for content box */
20+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* Deeper shadow for depth */
21+
}
22+
23+
.notfound-content h1 {
24+
font-size: 120px;
25+
line-height: 1;
26+
margin: 0;
27+
color: #007bff; /* Blue color for the number 404 */
28+
}
29+
30+
.notfound-content h2 {
31+
font-size: 28px;
32+
margin: 10px 0;
33+
}
34+
35+
.notfound-content p {
36+
font-size: 16px;
37+
line-height: 1.6;
38+
}
39+
40+
.home-link {
41+
display: inline-block;
42+
margin-top: 20px;
43+
padding: 10px 20px;
44+
background-color: #007bff;
45+
color: #fff;
46+
text-decoration: none;
47+
border-radius: 5px;
48+
transition: background-color 0.3s;
49+
}
50+
51+
.home-link:hover {
52+
background-color: #0056b3;
53+
}
54+
55+
@media only screen and (max-width: 600px) {
56+
.notfound-content h1 {
57+
font-size: 60px;
58+
}
59+
60+
.notfound-content h2 {
61+
font-size: 22px;
62+
}
63+
64+
.notfound-content {
65+
width: 90%; /* Adjust width for mobile */
66+
padding: 20px; /* Less padding on mobile */
67+
}
68+
}

‎src/pages/404Page/404Page.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import './404Page.css';
3+
4+
const NotFoundPage = () => {
5+
return (
6+
<div className="notfound-container">
7+
<div className="notfound-content">
8+
<div className="notfound-header">
9+
<h1>404</h1>
10+
<h2>Oops! Page not found.</h2>
11+
</div>
12+
<p>Sorry, the page you're looking for doesn't exist. If you think something is broken, report a problem.</p>
13+
<a href="/" className="home-link">Return Home</a>
14+
</div>
15+
</div>
16+
);
17+
}
18+
19+
export default NotFoundPage;

‎src/pages/Layout/Layout.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -283,8 +283,7 @@ body {
283283
overflow: auto;
284284
}
285285

286-
287286
.navbar {
288287
display: none; /* Hide the navbar on phone screens */
289288
}
290-
}
289+
}

‎src/pages/Layout/Layout.js

+43-41
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {faApple, faWindows} from '@fortawesome/free-brands-svg-icons';
77
import {faExpandArrowsAlt} from '@fortawesome/free-solid-svg-icons';
88
import {CSSTransition, TransitionGroup} from 'react-transition-group';
99

10-
function Layout({children}) {
10+
function Layout({ children, isNotFound }) {
1111
const location = useLocation();
1212

1313
useEffect(() => {
@@ -160,48 +160,50 @@ function Layout({children}) {
160160

161161
return (
162162
<div className="layout-background">
163-
<div className="navbar" style={{display: (isMobile || isFullScreen) ? 'none' : 'flex'}}>
164-
<ul>
165-
<li><NavLink to="/"
166-
className={isActive('/') ? 'nav-link nav-link-active' : 'nav-link'}>Home</NavLink></li>
167-
168-
{/* DVD NavLink */}
169-
<li>
170-
<NavLink to="/apple"
171-
className={isActive('/apple') ? 'nav-link nav-link-active apple-link' : 'nav-link apple-link'}>
172-
<FontAwesomeIcon icon={faApple} className="nav-icon"/>
173-
Apple
174-
</NavLink>
175-
</li>
176-
177-
{/* Windows NavLink */}
178-
<li>
179-
<NavLink to="/windows"
180-
className={isActive('/windows') ? 'nav-link nav-link-active windows-link' : 'nav-link windows-link'}>
181-
<FontAwesomeIcon icon={faWindows} className="nav-icon"/>
182-
Windows
183-
</NavLink>
184-
</li>
185-
186-
{/* DVD Logo NavLink */}
187-
{/*<li>*/}
188-
{/* <NavLink to="/dvd" className={isActive('/dvd') ? 'nav-link nav-link-active dvd-link' : 'nav-link dvd-link'}>*/}
189-
{/* <img src={dvdLogo} alt="DVD Logo" className="nav-icon"/> /!* Add this line *!/*/}
190-
{/* DVD Logo*/}
191-
{/* </NavLink>*/}
192-
{/*</li>*/}
193-
194-
{/* Full Screen NavLink */}
195-
{showFullScreenLink && (
196-
<li className={linkTransition}>
197-
<NavLink onClick={toggleFullScreen} className='nav-link fullscreen-link'>
198-
<FontAwesomeIcon icon={faExpandArrowsAlt} className="nav-icon"/>
199-
Full Screen
163+
{!isNotFound && (
164+
<div className="navbar" style={{display: (isMobile || isFullScreen) ? 'none' : 'flex'}}>
165+
<ul>
166+
<li><NavLink to="/"
167+
className={isActive('/') ? 'nav-link nav-link-active' : 'nav-link'}>Home</NavLink></li>
168+
169+
{/* DVD NavLink */}
170+
<li>
171+
<NavLink to="/apple"
172+
className={isActive('/apple') ? 'nav-link nav-link-active apple-link' : 'nav-link apple-link'}>
173+
<FontAwesomeIcon icon={faApple} className="nav-icon"/>
174+
Apple
200175
</NavLink>
201176
</li>
202-
)}
203-
</ul>
204-
</div>
177+
178+
{/* Windows NavLink */}
179+
<li>
180+
<NavLink to="/windows"
181+
className={isActive('/windows') ? 'nav-link nav-link-active windows-link' : 'nav-link windows-link'}>
182+
<FontAwesomeIcon icon={faWindows} className="nav-icon"/>
183+
Windows
184+
</NavLink>
185+
</li>
186+
187+
{/* DVD Logo NavLink */}
188+
{/*<li>*/}
189+
{/* <NavLink to="/dvd" className={isActive('/dvd') ? 'nav-link nav-link-active dvd-link' : 'nav-link dvd-link'}>*/}
190+
{/* <img src={dvdLogo} alt="DVD Logo" className="nav-icon"/> /!* Add this line *!/*/}
191+
{/* DVD Logo*/}
192+
{/* </NavLink>*/}
193+
{/*</li>*/}
194+
195+
{/* Full Screen NavLink */}
196+
{showFullScreenLink && (
197+
<li className={linkTransition}>
198+
<NavLink onClick={toggleFullScreen} className='nav-link fullscreen-link'>
199+
<FontAwesomeIcon icon={faExpandArrowsAlt} className="nav-icon"/>
200+
Full Screen
201+
</NavLink>
202+
</li>
203+
)}
204+
</ul>
205+
</div>
206+
)}
205207

206208
{!isMobile && !isFullScreen && <AnimatedCursor {...cursorConfig} />}
207209

0 commit comments

Comments
 (0)