Skip to content

Commit d5cdd1b

Browse files
siddharthmohitesiddharthmohite
committed
Moved css Files fixed Folder doubleclick bug
1 parent dc6692e commit d5cdd1b

20 files changed

+52
-82
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎app/routes/_index.tsx

+21-61
Original file line numberDiff line numberDiff line change
@@ -14,45 +14,33 @@ export const meta: MetaFunction = () => {
1414
export default function Index()
1515
{
1616
const inputRef = useRef<HTMLInputElement>(null);
17-
const videoRef = useRef<HTMLVideoElement>(null);
1817
const [dayState, setDayState] = useState("");
1918
const [monthState, setMonthState] = useState("");
2019
const [dateState, setDateState] = useState(0);
2120
const [currentTimeState, setCurrentTimeState] = useState("");
22-
const [isFirstClick, setIsFirstClick] = useState(false);
2321
const [shake, setShake] = useState(false);
2422
const [password, setPassword] = useState("");
2523
const navigate = useNavigate(); // Initialize navigate hook
2624
const [isQuestionMClicked, setIsQuestionMClicked] = useState(false);
2725
const [isQuestionHovered, setIsQuestionHovered] = useState(false);
2826

29-
30-
//Add event listeners to listen for mouse and keyboard events
3127
useEffect(() => {
32-
33-
const handleMouseClick = (event:MouseEvent) =>{
34-
setIsFirstClick(true);
35-
}
36-
37-
const handleEnterClick = (event: KeyboardEvent) => {
38-
if(event.key == "Enter" && isFirstClick == false){
39-
setIsFirstClick(true);
28+
const handleEvent = (event: KeyboardEvent | MouseEvent) => {
29+
if ("key" in event && event.key === "Enter") {
30+
navigate("/homepage");
4031
}
41-
if(event.key == "Enter" && isFirstClick == true){
42-
if(password == "Hireme"){
43-
navigate("/")
44-
}
32+
else if (event instanceof MouseEvent) {
33+
navigate("/homepage");
4534
}
46-
}
47-
48-
document.addEventListener("click", handleMouseClick);
49-
document.addEventListener("keydown", handleEnterClick);
35+
};
36+
document.addEventListener("keydown", handleEvent);
37+
document.addEventListener("click", handleEvent);
5038

51-
return () => {
52-
document.removeEventListener("click", handleMouseClick);
53-
document.removeEventListener("keydown", handleEnterClick);
54-
};
55-
}, []);
39+
return () => {
40+
document.removeEventListener("keydown", handleEvent);
41+
document.removeEventListener("click", handleEvent);
42+
};
43+
}, [navigate]);
5644

5745

5846
const updateTime = () =>
@@ -70,17 +58,11 @@ export default function Index()
7058
}
7159

7260
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) =>{
73-
if(event.key === "Enter" && isFirstClick){
74-
if(password === "Hireme" && videoRef.current){
75-
const timestamp = videoRef.current.currentTime;
61+
if(event.key === "Enter" ){
62+
{
7663
navigate("/homepage", {
77-
state: { timestamp } // Pass timestamp as state
7864
});
7965
}
80-
else{
81-
setShake(true); // Trigger the shake effect
82-
setTimeout(() => setShake(false), 300); // Remove the shake class after 300ms
83-
}
8466
}
8567
}
8668

@@ -100,24 +82,12 @@ export default function Index()
10082
};
10183
},[]);
10284

103-
useEffect(() => {
104-
if (isFirstClick && inputRef.current) {
105-
inputRef.current.focus();
106-
}
107-
}, [isFirstClick]);
108-
109-
11085
return (
11186
<div className="full-screen-container">
112-
<video
113-
ref={videoRef}
114-
className="background-video"
115-
autoPlay
116-
muted
117-
loop={true}
118-
>
119-
<source src="/22sec.mp4" type="video/mp4" />
120-
</video>
87+
<img
88+
className="background-image"
89+
src="/wallpaper.webp">
90+
</img>
12191
<div className="content-wrapper-upperpart">
12292
<div className="overlay-upperpart">
12393
<div className="overlay-upperpart__textwrapper">
@@ -135,27 +105,18 @@ export default function Index()
135105
<span className="overlay-lowerpart__pass-text">Hireme</span>
136106
</div>
137107
) : (
138-
<img className="overlay-lowerpart__img"src="/basketball2.png"
108+
<img className="overlay-lowerpart__img"src="/basketball2.webp"
139109
/>
140110
)}
141-
{!isFirstClick ? (
142111
<p className="overlay-lowerpart__text-username">sid</p>
143-
) : (
144112
<input
145113
ref = {inputRef}
146-
value={password}
114+
value="HireMe"
147115
onChange={(e) => setPassword(e.target.value)}
148116
onKeyDown={handleKeyDown}
149117
className={`overlay-lowerpart__input ${shake ? "shake" : ""}`}
150118
type="password"
151119
/>
152-
)}
153-
{isFirstClick && password && (
154-
<span className="right-icon">
155-
<CircleRightIcon />
156-
</span>
157-
)}
158-
{isFirstClick && (
159120
<button
160121
onClick={handleQuestionMarkClick}
161122
onMouseEnter={() => {
@@ -167,7 +128,6 @@ export default function Index()
167128
className="question-mark">
168129
<QuestionMarkIcon fill={isQuestionHovered ? "white" : "rgba(245,245,247,0.7)"} />
169130
</button>
170-
)}
171131
<p className="overlay-lowerpart__text-info">Touch ID or Enter Password</p>
172132
</div>
173133
</div>

‎app/routes/components/AboutMe.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "../styles/AboutMe.scss";
12
export default function AboutMe(){
23

34

‎app/routes/components/Achievements.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "../styles/Achievements.scss";
12
export default function Achievements(){
23
return(
34
<div className="top-bar">

‎app/routes/components/AppleLogoMenu.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
export default function AppleLogoMenu(){
1+
import "../styles/AppleLogoMenu.scss";
22

3+
export default function AppleLogoMenu(){
34

45
return (
56

‎app/routes/components/BatteryMenu.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2+
import '../styles/BatteryMenu.scss';
23

34
export default function BatteryMenu(){
45

‎app/routes/components/Blog.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useState } from 'react';
2+
import '../styles/Blog.scss';
3+
24
export default function Blog({onClose}) {
35
const [isExpanded, setIsExpanded] = useState(false);
46

‎app/routes/components/Calculator.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState, useRef } from "react";
2+
import '../styles/Calculator.scss';
23
export default function Calculator(){
34
const [display, setDisplay] = useState('');
45

‎app/routes/components/Certifications.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useState, useEffect } from "react";
2+
import "../styles/Certification.scss";
3+
24
export default function Certifications(){
35
const [currentIndex, setCurrentIndex] = useState(0);
46

‎app/routes/components/ControlCenter.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import AudioPlayIcon from "../icons/AudioPlayIcon"
1111
import AudioNextIcon from "../icons/AudioNextIcon"
1212
import AudioPauseIcon from "../icons/AudioPauseIcon"
1313
import { FullScreenContext } from "./FullScreenContext";
14+
import "../styles/ControlCenter.scss"
1415
import { useState, useRef, useContext, useEffect} from "react"
1516
import React from "react"
1617
export default function ControlCenter(){

‎app/routes/components/Experience.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from "react"
2+
import '../styles/Experience.scss';
23

34
export default function Experience(){
45
const [selectedId, setSelectedId] =useState(null);

‎app/routes/components/Finder.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Experience from '../components/Experience'
66
import Projects from '../components/Projects'
77
import Certifications from '../components/Certifications'
88
import Achievements from '../components/Achievements'
9+
import "../styles/Finder.scss";
910

1011
import { useEffect, useState } from 'react';
1112

@@ -15,7 +16,8 @@ const [isExpanded, setIsExpanded] = useState(false);
1516
const [selectedTagId, setSelectedTagId] = useState(null);
1617

1718
useEffect(() => {
18-
if (folderId !== undefined && folderId !== selectedFolderId) {
19+
console.log("folderId", folderId);
20+
if (folderId !== undefined) {
1921
setSelectedFolderId(folderId);
2022
}
2123
else

‎app/routes/components/Folder.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState } from "react";
2+
import "../Styles/Folder.scss";
23

34
export default function Folder({filename}){
45
const [FileClick,setFileClick ] = useState(false);

‎app/routes/components/Projects.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { useState } from "react";
2+
import "../styles/Projects.scss";
3+
24
export default function Projects(){
35

46
const [selectedProject, setSelectedProject] = useState(null);

‎app/routes/components/SendAMessage.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import SendEmailIcon from "../icons/SendEmailIcon"
22
import { useState ,useRef } from "react";
3+
import "../styles/SendAMessage.scss";
4+
35
export default function SendAMessage({onClose}){
46

57
const [isExpanded, setIsExpanded] = useState(false);

‎app/routes/components/SpotLightSearch.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11

22
import { useState, useEffect } from "react";
33
import SearchIcon from '../icons/SearchIcon';
4+
import "../styles/SpotLightSearch.scss";
5+
46
export default function SpotLightSearch()
57
{
68
// Control the visibility of the overlay

‎app/routes/homepage.tsx

+3-18
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,6 @@ import { createContext, useEffect, useRef, useState ,useContext } from "react";
22
import sdk from "@stackblitz/sdk"
33
import { useLocation } from "@remix-run/react";
44
import "/app/routes/styles/homepage.scss"
5-
import "app/routes/styles/Folder.scss"
6-
import "app/routes/styles/Finder.scss"
7-
import "app/routes/styles/AppleLogoMenu.scss"
8-
import "app/routes/styles/AboutMe.scss"
9-
import "app/routes/styles/Experience.scss"
10-
import "app/routes/styles/Achievements.scss"
11-
import "app/routes/styles/Certification.scss"
12-
import "app/routes/styles/Projects.scss"
13-
import "app/routes/styles/BatteryMenu.scss"
14-
import "app/routes/styles/ControlCenter.scss"
15-
import "app/routes/styles/SendAMessage.scss"
16-
import "app/routes/styles/Calculator.scss"
17-
import "app/routes/styles/Blog.scss"
18-
import "app/routes/styles/SpotLightSearch.scss"
195
import Folder from './components/Folder'
206
import Finder from './components/Finder'
217
import AppleLogoMenu from './components/AppleLogoMenu'
@@ -264,10 +250,9 @@ useEffect(() => {
264250
return(
265251
<FullScreenProvider>
266252
<div className="homepage-container">
267-
<video
268-
ref={videoRef}
269-
className="background-video"
270-
src="/22sec.mp4"
253+
<img
254+
className="background-image"
255+
src="/wallpaper.webp"
271256
/>
272257
{( appleButtonClicked &&
273258
<div className="Menu-container">

‎app/routes/styles/index.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@
2222
z-index: 1;
2323
}
2424

25+
.background-image{
26+
width: 100vw;
27+
height: 100vh;
28+
}
29+
2530
.content-wrapper-upperpart {
2631
position: absolute;
2732
top: 8vh; /* Adjust this value to control the space from the top */
@@ -168,7 +173,7 @@
168173
.question-mark{
169174
position: absolute;
170175
right: -4.75rem;
171-
top: 104.0%;
176+
top: 138.0%;
172177
// transform: translateY(-50%);
173178
display: flex;
174179
align-items: center;

‎public/basketball2.webp

168 KB
Binary file not shown.

‎public/wallpaper.webp

466 KB
Binary file not shown.

0 commit comments

Comments
 (0)