-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (204 loc) · 7.59 KB
/
index.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Portfolio</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="container">
<h2>Johanthan.doe</h2>
<nav>
<div class="close">×</div>
<ul>
<li class="active"><a href="#home">Home</a></li>
<li><a href="#my-work">My work</a></li>
<li><a href="#clients">Clients</a></li>
</ul>
<a href="#hire-me" class="btn">Hire me</a>
</nav>
<svg
width="26"
height="18"
viewBox="0 0 26 18"
fill="none"
class="menu-icon"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z"
fill="white"
/>
</svg>
</div>
</header>
<section id="home">
<div class="container">
<div class="left-nav">
<a href="#home" class="active" data-title="Home">
<span>Home</span>
</a>
<a href="#my-work">
<span>My works</span>
</a>
<a href="#clients">
<span>Clients</span>
</a>
<a href="#hire-me">
<span>Hire me</span>
</a>
</div>
<div class="content">
<h1 data-section-id="home">
Building <br />
beautify web experiences.
</h1>
<a class="cta btn" href="#my-work">
<svg
width="22"
height="16"
viewBox="0 0 22 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.4375 8C14.4375 8.91168 14.0753 9.78602 13.4307 10.4307C12.786 11.0753 11.9117 11.4375 11 11.4375C10.0883 11.4375 9.21398 11.0753 8.56932 10.4307C7.92466 9.78602 7.5625 8.91168 7.5625 8C7.5625 7.08832 7.92466 6.21398 8.56932 5.56932C9.21398 4.92466 10.0883 4.5625 11 4.5625C11.9117 4.5625 12.786 4.92466 13.4307 5.56932C14.0753 6.21398 14.4375 7.08832 14.4375 8Z"
fill="white"
/>
<path
d="M0 8C0 8 4.125 0.4375 11 0.4375C17.875 0.4375 22 8 22 8C22 8 17.875 15.5625 11 15.5625C4.125 15.5625 0 8 0 8ZM11 12.8125C12.2764 12.8125 13.5004 12.3055 14.403 11.403C15.3055 10.5004 15.8125 9.27635 15.8125 8C15.8125 6.72365 15.3055 5.49957 14.403 4.59705C13.5004 3.69453 12.2764 3.1875 11 3.1875C9.72365 3.1875 8.49957 3.69453 7.59705 4.59705C6.69453 5.49957 6.1875 6.72365 6.1875 8C6.1875 9.27635 6.69453 10.5004 7.59705 11.403C8.49957 12.3055 9.72365 12.8125 11 12.8125Z"
fill="white"
/>
</svg>
<span>My work.</span>
</a>
</div>
<img src="assets/man.png" alt="Man" />
</div>
</section>
<section id="my-work">
<div class="container">
<h2>My work</h2>
<p>
I’ve had the pleasure of working with multiple Fortune 500 companies,
designing and implementing both frontend and backend.
</p>
<div class="works">
<img src="assets/work-1.png" alt="" data-section-id="my-work" />
<img src="assets/work-3.png" alt="" />
<img src="assets/work-4.jpeg" alt="" />
<img src="assets/work-5.jpeg" alt="" />
<img src="assets/work-6.jpeg" alt="" />
<img src="assets/work-7.jpeg" alt="" />
<img src="assets/work-8.jpeg" alt="" />
<img src="assets/work-9.jpeg" alt="" data-section-id="my-work" />
<img src="assets/work-2.jpeg" alt="" />
</div>
</div>
</section>
<section id="clients">
<div class="container">
<h2 data-section-id="clients">Clients</h2>
<p>
I’ve had the pleasure of working with multiple Fortune 500 companies,
designing and implementing both frontend and backend.
</p>
<div class="client">
<img src="assets/icons/apple.svg" alt="" />
<div class="content">
<h3>Apple, Inc.</h3>
<div class="tags">
<span>UI/UX</span> <span>Frontend Development</span>
</div>
<p>
I’ve had the pleasure of working with multiple Fortune 500
companies, designing and implementing both frontend and backend.
</p>
</div>
</div>
<div class="client">
<img src="assets/icons/apple.svg" alt="" />
<div class="content">
<h3>Apple, Inc.</h3>
<div class="tags">
<span>UI/UX</span> <span>Frontend Development</span>
</div>
<p>
I’ve had the pleasure of working with multiple Fortune 500
companies, designing and implementing both frontend and backend.
</p>
</div>
</div>
<div class="client">
<img src="assets/icons/apple.svg" alt="" />
<div class="content">
<h3>Apple, Inc.</h3>
<div class="tags">
<span>UI/UX</span> <span>Frontend Development</span>
</div>
<p>
I’ve had the pleasure of working with multiple Fortune 500
companies, designing and implementing both frontend and backend.
</p>
</div>
</div>
</div>
</section>
<section id="hire-me">
<div class="container">
<h2 data-section-id="hire-me">Hire me</h2>
<p>Feel free to contact me any time, through any method below.</p>
<div class="contact">
<form action="#">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="email">Email</label>
<input type="email" id="email" />
<label for="message">Message</label>
<textarea id="message" cols="30" rows="10"></textarea>
<br />
<button>Send it!</button>
</form>
<div class="contact-other">
<p><a href="#">555-555-1234</a></p>
<div>
<img src="assets/icons/skype.svg" alt="Skype" />
<img src="assets/icons/twitter.svg" alt="Twitter" />
</div>
</div>
</div>
</div>
</section>
<script>
const menu = document.querySelector("nav");
const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close");
const toggleMenu = () => menu.classList.toggle("active");
menuIcon.onclick = toggleMenu;
closeIcon.onclick = toggleMenu;
const observer = new IntersectionObserver(entries => {
let isHomeIntersecting = false;
entries.forEach(entry => {
if(entry.isIntersecting) {
const sectionId = entry.target.dataset.sectionId;
if(isHomeIntersecting)
return;
isHomeIntersecting = sectionId === "home";
document.querySelector(".left-nav > a.active")
.classList
.remove("active");
document.querySelector(`.left-nav > a[href="#${sectionId}"]`)
.classList
.add("active");
}
});
});
document.querySelectorAll("[data-section-id]")
.forEach(el => observer.observe(el));
</script>
</body>
</html>