Skip to content

Commit f274072

Browse files
Nalin-AngrishNalin-Angrish
committed
Added next.js's links for preloading
1 parent add0a86 commit f274072

File tree

5 files changed

+70
-55
lines changed

5 files changed

+70
-55
lines changed

‎components/Footer.js

+33-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
2+
import Link from "next/link"
33
export default class Footer extends React.Component{
44
render(){
55
return(
@@ -9,47 +9,55 @@ export default class Footer extends React.Component{
99
</span>
1010

1111
<div className="links">
12-
<a href="/#" className="item">
13-
<p>About Us</p>
14-
</a>
15-
<a href="/#app" className="item">
16-
<p>App</p>
17-
</a>
18-
<a href="/#team" className="item">
19-
<p>Our Team</p>
20-
</a>
21-
<a href="https://github.com/WWF-Jr" className="item">
22-
<p>Open Source</p>
23-
</a>
24-
<a href="/#contact" className="item">
25-
<p>Contact</p>
26-
</a>
12+
<Link href="/#about">
13+
<p className="item">About Us</p>
14+
</Link>
15+
<Link href="/app">
16+
<p className="item">App</p>
17+
</Link>
18+
<Link href="/team">
19+
<p className="item">Our Team</p>
20+
</Link>
21+
<Link href="https://github.com/WWF-Jr">
22+
<p className="item">Open Source</p>
23+
</Link>
24+
<Link href="/contact">
25+
<p className="item">Contact</p>
26+
</Link>
2727
<div className="social">
28-
<a href="#" className="facebook" target="_blank">
28+
<Link href="#" className="facebook" target="_blank">
29+
<span className="facebook item">
2930
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
3031
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
3132
</svg>
32-
</a>
33-
<a href="#" className="twitter" target="_blank">
33+
</span>
34+
</Link>
35+
<Link href="#" className="twitter" target="_blank">
36+
<span className="twitter item">
3437
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
3538
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
3639
</svg>
37-
</a>
38-
<a href="#" className="instagram" target="_blank">
40+
</span>
41+
</Link>
42+
<Link href="#" className="instagram" target="_blank">
43+
<span className="instagram item">
3944
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
4045
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
4146
</svg>
42-
</a>
43-
<a href="#" className="email" target="_blank">
47+
</span>
48+
</Link>
49+
<Link href="#" className="email" target="_blank">
50+
<span className="email item">
4451
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
4552
<path d="M0 3v18h24v-18h-24zm6.623 7.929l-4.623 5.712v-9.458l4.623 3.746zm-4.141-5.929h19.035l-9.517 7.713-9.518-7.713zm5.694 7.188l3.824 3.099 3.83-3.104 5.612 6.817h-18.779l5.513-6.812zm9.208-1.264l4.616-3.741v9.348l-4.616-5.607z"/>
4653
</svg>
47-
</a>
54+
</span>
55+
</Link>
4856
</div>
4957
</div>
5058

5159
<div className="copyright">
52-
&copy; 2021, By the <a href="https://github.com/WWF-Jr">WWF Jr. Team</a>
60+
&copy; 2021, By the <Link href="https://github.com/WWF-Jr">WWF Jr. Team</Link>
5361
</div>
5462
</footer>
5563
)

‎components/Navbar.js

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
import React from 'react';
2+
import Link from "next/link"
23

34
export default class Navbar extends React.Component{
45
render(){
56
return(
67
<nav>
7-
<a href="/" id="homelink">
8-
<img src="/Favicon.png" alt="" height="50px" />&nbsp;<span>WWF Jr.</span>
9-
</a>
8+
<Link href="/">
9+
<span id="homelink"><img src="/Favicon.png" alt="" height="50px" />&nbsp;<span>WWF Jr.</span></span>
10+
</Link>
1011

1112
<div className="buttonbar inactive" id="buttonbar">
1213
<a className="toggle" onClick={toggleMenu}>
1314
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
1415
<path d="M24 6h-24v-4h24v4zm0 4h-24v4h24v-4zm0 8h-24v4h24v-4z"></path>
1516
</svg>
1617
</a>
17-
<a href="/#" className="item" onClick={toggleMenu}>
18-
<p>About</p>
19-
</a>
20-
<a href="/#team" className="item" onClick={toggleMenu}>
21-
<p>Team</p>
22-
</a>
23-
<a href="/#app" className="item" onClick={toggleMenu}>
24-
<p>App</p>
25-
</a>
26-
<a href="/#contact" className="item" onClick={toggleMenu}>
27-
<p>Contact</p>
28-
</a>
18+
<Link href="/#about">
19+
<p className="item" onClick={toggleMenu}>About</p>
20+
</Link>
21+
<Link href="/team">
22+
<p className="item" onClick={toggleMenu}>Team</p>
23+
</Link>
24+
<Link href="/app">
25+
<p className="item" onClick={toggleMenu}>App</p>
26+
</Link>
27+
<Link href="/contact">
28+
<p className="item" onClick={toggleMenu}>Contact</p>
29+
</Link>
2930
</div>
3031
</nav>
3132
)

‎pages/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function Home() {
66
return (
77
<div className="container">
88

9-
<main className="grid-2">
9+
<main className="grid-2" id="about">
1010
<div>
1111
<img src="/Logo.png" alt="" style={{width:"70vmin", borderRadius: "10px"}}/>
1212
</div>

‎styles/Footer.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ footer .links {
1010
grid-template-columns: repeat(2, 1fr);
1111
}
1212

13-
footer a {
13+
footer .item {
1414
color: #fff;
15+
cursor: pointer;
1516
}
1617

17-
footer a:hover {
18+
footer .item:hover {
1819
filter: brightness(50%);
1920
color: #fff;
2021
}
@@ -25,14 +26,14 @@ footer .social {
2526
align-items: center;
2627
}
2728

28-
footer .social a {
29+
footer .social span {
2930
width: 50px;
3031
height: 50px;
3132
border-radius: 50%;
3233
margin-right: 5px;
3334
}
3435

35-
footer .social a svg {
36+
footer .social span svg {
3637
transform: scale(.5);
3738
fill: white;
3839
}

‎styles/Navbar.css

+15-10
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ nav #homelink {
3030
width: fit-content;
3131
color: #000;
3232
z-index: 101;
33+
cursor: pointer;
3334
}
3435

3536
nav .buttonbar {
@@ -40,16 +41,19 @@ nav .buttonbar {
4041
align-items: center;
4142
}
4243

43-
.buttonbar a {
44+
.buttonbar p {
4445
color: #000;
4546
background-color: #fff;
46-
text-align: center;
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
4750
width: 120px;
51+
height: 100%;
4852
transition: all .2s;
4953
cursor: pointer;
5054
}
5155

52-
.buttonbar a.item:hover {
56+
.buttonbar .item:hover {
5357
background-color: #ddd;
5458
color: #000;
5559
}
@@ -67,7 +71,7 @@ nav .buttonbar {
6771
left: 0;
6872
box-shadow: 0 0 10px 0 solid #000;
6973
}
70-
.buttonbar a {
74+
.buttonbar p {
7175
height: 70px;
7276
width: 100%;
7377
display: flex;
@@ -79,16 +83,16 @@ nav .buttonbar {
7983
justify-content: flex-end;
8084
padding-right: 2rem;
8185
}
82-
.buttonbar a.item {
86+
.buttonbar .item {
8387
transition: all .4s ease;
8488
background-color: #eee;
8589
margin: 0;
8690
}
87-
.buttonbar.inactive a.item {
91+
.buttonbar.inactive .item {
8892
height: 0;
8993
display: none;
9094
}
91-
.buttonbar.active a.item {
95+
.buttonbar.active .item {
9296
height: 70px;
9397
display: flex;
9498
}
@@ -105,15 +109,16 @@ nav .buttonbar {
105109
nav #homelink {
106110
color: #fff;
107111
}
108-
.buttonbar a {
112+
.buttonbar p {
109113
color: #fff;
110114
background-color: #333;
115+
fill: #fff;
111116
}
112-
.buttonbar a.item:hover {
117+
.buttonbar .item:hover {
113118
background-color: #555;
114119
color: #fff;
115120
}
116-
.buttonbar a.item {
121+
.buttonbar .item {
117122
background-color: #333;
118123
}
119124
.buttonbar.active:last-child {

0 commit comments

Comments
 (0)