Skip to content

Commit 291ffcd

Browse files
shreya0204shreya0204
committed
Landing Page added
1 parent e3c8b27 commit 291ffcd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+12205
-10847
lines changed

‎package.json

+10-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
"@testing-library/react": "^11.1.0",
88
"@testing-library/user-event": "^12.1.10",
99
"aos": "^2.3.4",
10+
"gsap": "^3.8.0",
11+
"lax": "^0.0.40",
12+
"lax.js": "1.2.5",
13+
"node-sass": "^4.0.0",
14+
"react-gsap": "^3.2.1",
15+
"react-responsive-carousel": "^3.2.22",
16+
"react-script-tag": "^1.1.2",
17+
"react-video-scroll": "^1.0.1",
18+
"use-lax": "3.1.0",
1019
"bootstrap": "^5.1.1",
1120
"jquery": "^3.6.0",
1221
"react": "^17.0.2",
@@ -48,4 +57,4 @@
4857
"last 1 safari version"
4958
]
5059
}
51-
}
60+
}

‎src/App.js

+22-29
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from 'react';
22
import './App.css';
33
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
4-
5-
import AOS from "aos";
6-
import "aos/dist/aos.css";
7-
import NavBar from './Components/Navbar/Navbar';
4+
import AOS from "aos"
5+
import "aos/dist/aos.css"
6+
// import NavBar from './Components/Navbar/Navbar';
87
import Landing from './Components/Landing/Landing';
98
import Sample from './Components/AlgoPages/Sample/Sample';
109
import Greedy from './Components/AlgoPages/Greedy/Greedy';
1110
import Bidirectional from './Components/AlgoPages/Bidirectional/Bidirectional';
1211
import DepthFirst from './Components/AlgoPages/dfs/dfs';
13-
import Footer from "./Components/Footer/Footer";
12+
// import Footer from "./Components/Footer/Footer";
1413
import Swarm from './Components/AlgoPages/Swarm/Swarm';
1514
import Dijkstra from './Components/AlgoPages/Dijkstra_Algo/Dijkstra_Algo';
1615
import Backtracking from './Components/AlgoPages/Backtracking/backtracking'
@@ -26,31 +25,27 @@ function App() {
2625
return (
2726
<Router>
2827
<div className="App">
29-
30-
3128
<Switch>
32-
33-
34-
{/* Project Routes*/}
35-
<Route path="/pathfinder">
36-
<Pathfinder/>
29+
{/* Project Routes*/}
30+
<Route path="/pathfinder">
31+
<Pathfinder />
3732
</Route>
3833
<Route path="/huffman">
39-
<Huffman/>
34+
<Huffman />
4035
</Route>
4136
<Route path="/sudoku">
42-
<Sudoku/>
37+
<Sudoku />
4338
</Route>
4439
<Route path="/splitman">
45-
<Splitman/>
40+
<Splitman />
4641
</Route>
4742

48-
{/* Algopages Routes */}
49-
<Route path="/sample">
43+
{/* Algopages Routes */}
44+
<Route path="/sample">
5045
<Sample />
5146
</Route>
5247
<Route path="/swarm">
53-
<Swarm/>
48+
<Swarm />
5449
</Route>
5550
<Route path="/greedy">
5651
<Greedy />
@@ -59,27 +54,25 @@ function App() {
5954
<Bidirectional />
6055
</Route>
6156
<Route path="/dijkstra">
62-
<Dijkstra/>
57+
<Dijkstra />
6358
</Route>
6459
<Route path="/backtracking">
65-
<Backtracking/>
60+
<Backtracking />
6661
</Route>
6762
<Route path="/dfs">
68-
<DepthFirst/>
63+
<DepthFirst />
6964
</Route>
7065
<Route path="/astar">
71-
<Astar/>
66+
<Astar />
7267
</Route>
7368

74-
{/* Landing Page Route */}
75-
<Route path="/">
76-
<NavBar />
69+
{/* Landing Page Route */}
70+
<Route path="/">
71+
{/* <NavBar /> */}
7772
<Landing />
78-
<Footer/>
73+
{/* <Footer /> */}
7974
</Route>
80-
</Switch>
81-
82-
75+
</Switch>
8376
</div>
8477
</Router>
8578
);

‎src/Components/Landing/Algorithms/Algorithms.jsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import './Algorithms.scss';
3+
4+
const Algorithms = () => {
5+
6+
return (
7+
<>
8+
<div className="project_container">
9+
<main className="project_grid">
10+
<section className="content project_item1">
11+
<h1 className="project_h1">Algorithms</h1>
12+
<p className="project_p">Lorem ipsum dolor sit amet. Quo perspiciatis sunt qui nemo velit aut eaque accusamus ut commodi porro quo alias praesentium At provident error</p>
13+
</section>
14+
<section className="project_card project_item2 project_flex">
15+
<h2 className="project_h2">Splitwise</h2>
16+
</section>
17+
<section className="project_card project_item5 project_flex">
18+
<h2 className="project_h2">Path Finding</h2>
19+
</section>
20+
<section className="project_card project_item8 project_flex" >
21+
<h2 className="project_h2 project_h2_bk">Backtracking Algorithm</h2>
22+
</section>
23+
<section className="project_card project_item11 project_flex">
24+
<h2 className="project_h2">Image Compression</h2>
25+
</section>
26+
</main>
27+
</div>
28+
</>
29+
);
30+
}
31+
32+
export default Algorithms;

‎src/Components/Landing/Algorithms/Algorithms.scss

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
.project_card:not(:empty):hover,
2+
.project_card:not(:empty):focus {
3+
z-index: 1;
4+
color: #fff;
5+
background: #ea124f;
6+
opacity: 1;
7+
transform: scale(1.1) rotateZ(7deg);
8+
cursor: pointer;
9+
10+
&:after {
11+
opacity: 1;
12+
}
13+
14+
&:before {
15+
opacity: 0;
16+
}
17+
}
18+
19+
.project_card {
20+
padding: 10px;
21+
background: url("https://i.pinimg.com/564x/4b/14/e5/4b14e5621e2f10dad6ff2c81c6775dc8.jpg");
22+
background-repeat: no-repeat;
23+
background-size: cover;
24+
border-radius: 0.7em;
25+
opacity: 1;
26+
display: flex;
27+
justify-content: flex-start;
28+
align-items: flex-end;
29+
transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
30+
transition-property: background, transform, color, opacity;
31+
background-color: black;
32+
33+
&:not(:empty):before {
34+
box-shadow: -2px 2px 8px 2px hsla(0, 0%, 0%, 0.2);
35+
}
36+
37+
&:empty {
38+
opacity: 1;
39+
}
40+
41+
&:before,
42+
&:after {
43+
content: "";
44+
position: absolute;
45+
border-radius: 0.7em;
46+
z-index: -1;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: 100%;
51+
transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
52+
}
53+
54+
&:after {
55+
box-shadow: -20px 20px 12px 6px hsla(0, 0%, 0%, 0.2);
56+
opacity: 0;
57+
}
58+
}
59+
60+
.project_grid {
61+
width: 100%;
62+
height: 100%;
63+
padding: 20px;
64+
display: grid;
65+
overflow: hidden;
66+
grid-template-columns: repeat(5, 1fr);
67+
grid-template-rows: repeat(4, 1fr);
68+
grid-gap: 30px;
69+
padding: 6%;
70+
background: url("https://i.pinimg.com/originals/07/f5/55/07f55516c49808f89f7fd3935b0af04f.gif");
71+
background-repeat: no-repeat;
72+
}
73+
74+
.project_item1 {
75+
grid-area: 2 / 1 / 4 / 3;
76+
}
77+
.project_item2 {
78+
grid-area: 3 / 3 / 6 / 4;
79+
background: url("../images/path.gif");
80+
&.project_card:hover,
81+
&.project_card:focus {
82+
background: #00005c;
83+
}
84+
}
85+
.project_item3 {
86+
grid-area: 4 / 1 / 5 / 4;
87+
background: transparent;
88+
background-color: #a4dcff;
89+
}
90+
.project_item4 {
91+
grid-area: 1 / 3 / 2 / 5;
92+
}
93+
.project_item5 {
94+
grid-area: 1 / 5 / 3 / 5;
95+
background: url("../images/path.gif");
96+
background-size: contain;
97+
}
98+
.project_item6 {
99+
grid-area: 3 / 4 / 4 / 5;
100+
}
101+
.project_item7 {
102+
grid-area: 3 / 4 / 5 / 5;
103+
}
104+
.project_item8 {
105+
grid-area: 1 / 3 / 3 / 5;
106+
background: url("../images/path.gif");
107+
background-size: contain;
108+
opacity: 1;
109+
&.project_card:hover,
110+
&.project_card:focus {
111+
background: #f57b51;
112+
}
113+
}
114+
115+
.project_flex {
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
}
120+
121+
.project_h2_bk {
122+
text-align: center;
123+
color: #fff;
124+
font-size: 1.5rem !important;
125+
opacity: 1 !important;
126+
}
127+
128+
.project_item9 {
129+
grid-area: 2 / 5 / 3 / 6;
130+
}
131+
.project_item10 {
132+
grid-area: 3 / 5 / 4 / 6;
133+
}
134+
.project_item11 {
135+
grid-area: 5 / 4 / 3 / 6;
136+
background: url("../images/path.gif");
137+
&.project_card:hover,
138+
&.project_card:focus {
139+
background: #00a8cc;
140+
}
141+
}
142+
143+
.content {
144+
display: flex;
145+
flex-direction: column;
146+
justify-content: center;
147+
}
148+
149+
*,
150+
*:before,
151+
*:after {
152+
position: relative;
153+
box-sizing: border-box;
154+
}
155+
156+
.project_container {
157+
height: 100%;
158+
width: 100%;
159+
margin: 0;
160+
padding: 0;
161+
}
162+
.project_container {
163+
font-family: "PT Sans", sans-serif;
164+
background: #050a0f;
165+
display: flex;
166+
justify-content: center;
167+
align-items: center;
168+
height: fit-content;
169+
color: #fff;
170+
}
171+
172+
.project_h1,
173+
.project_h2 {
174+
margin: 2.75rem 0 1.05rem;
175+
line-height: 1.2;
176+
font-family: inherit;
177+
text-align: center;
178+
text-transform: capitalize;
179+
}
180+
181+
.project_h1 {
182+
margin-top: 0;
183+
font-size: 3.052em;
184+
}
185+
186+
.project_h2 {
187+
font-size: 1em;
188+
}
189+
190+
.project_p {
191+
line-height: 1.3;
192+
}
193+
194+
@media only screen and (max-width: 600px) {
195+
.project_grid {
196+
grid-template-columns: repeat(2, 1fr);
197+
grid-template-rows: repeat(6, minmax(auto, 300px));
198+
overflow-y: scroll;
199+
}
200+
201+
.project_item1 {
202+
grid-area: 1 / 1 / 2 / 3;
203+
}
204+
.project_card {
205+
grid-area: auto;
206+
text-align: left;
207+
208+
&:empty {
209+
display: none;
210+
}
211+
}
212+
}
213+
214+
.project_h2{
215+
margin-bottom: 5rem !important;
216+
}

0 commit comments

Comments
 (0)