-
Notifications
You must be signed in to change notification settings - Fork 200
Expand file tree
/
Copy pathHeader.jsx
More file actions
130 lines (124 loc) · 4.18 KB
/
Header.jsx
File metadata and controls
130 lines (124 loc) · 4.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, { useState, useEffect } from "react";
// import styles of this component
import "./Header.scss";
// import other components
// import ContainerCard from "../ContainerCard/ContainerCard";
// import Nav from "../Nav/Nav";
// import BrickLayout from "../BrickLayout/BrickLayout";
// import { Typewriter } from "react-simple-typewriter";
import ContainerCard from "../ContainerCard/ContainerCard";
import Nav from "../Nav/Nav";
import BrickLayout from "../BrickLayout/BrickLayout";
import { Typewriter } from "react-simple-typewriter";
import RandomContributors from "../randomcontributor/RandomContributors";
// Header component
const Header = () => {
const [isMobile, setIsMobile] = useState(window.innerWidth > 640);
useEffect(() => {
function handleSize() {
setIsMobile(window.innerWidth > 640);
}
window.addEventListener("resize", handleSize);
return () => {
window.removeEventListener("resize", handleSize);
};
}, []);
return (
<header className={`flex`}>
<div className="text__container">
<div className="opensource__title">
<span>
An Open<br></br> Source<br></br> Project
</span>
</div>
<div className="github__section">
<div>
<span>
{" "}
Join us and <br></br>share your wish
</span>
</div>
<a
className="button"
href="https://github.com/BeforeIDieCode/BeforeIDieAchievements"
target="/black"
>
GitHub Repo
</a>
<a
className="button"
href="https://before-i-die-achievements.vercel.app/Contributors"
target="/black"
>
Contributors List
</a>
<a
className="button"
href="https://before-i-die-achievements.vercel.app/contributors-map"
target="/black"
>
Contributors Map
</a>
</div>
</div>
<div className={"animation__container flex justify-content-center"}>
<div className={"untitled"}>
<div className="untitled__slides">
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>
Plant seeds🌱<br></br>of inspiration{" "}
</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>
To codify 💻<br></br> your purpose{" "}
</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>
To compile your<br></br> bucket 🪣 list
</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>To learn how to contribute 📚</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>
To learn <br></br>new skills 🎯
</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent">
<span>
To advance <br></br>your career 💼
</span>
</div>
</div>
<div className="untitled__slide">
<div className="untitled__slideBg"></div>
<div className="untitled__slideContent"></div>
</div>
</div>
<div className="untitled__shutters"></div>
</div>
</div>
</header>
);
};
export default Header;