├── assets
    ├── arrow.png
    ├── email.png
    ├── github.png
    ├── about-pic.png
    ├── checkmark.png
    ├── education.png
    ├── experience.png
    ├── linkedin.png
    ├── project-1.png
    ├── project-2.png
    ├── project-3.png
    ├── profile-pic.png
    ├── profile-pic-2.png
    └── resume-example.pdf
├── script.js
├── mediaqueries.css
├── style.css
└── index.html


/assets/arrow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/arrow.png


--------------------------------------------------------------------------------
/assets/email.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/email.png


--------------------------------------------------------------------------------
/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/github.png


--------------------------------------------------------------------------------
/assets/about-pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/about-pic.png


--------------------------------------------------------------------------------
/assets/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/checkmark.png


--------------------------------------------------------------------------------
/assets/education.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/education.png


--------------------------------------------------------------------------------
/assets/experience.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/experience.png


--------------------------------------------------------------------------------
/assets/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/linkedin.png


--------------------------------------------------------------------------------
/assets/project-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/project-1.png


--------------------------------------------------------------------------------
/assets/project-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/project-2.png


--------------------------------------------------------------------------------
/assets/project-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/project-3.png


--------------------------------------------------------------------------------
/assets/profile-pic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/profile-pic.png


--------------------------------------------------------------------------------
/assets/profile-pic-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/profile-pic-2.png


--------------------------------------------------------------------------------
/assets/resume-example.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ade-mir/html-css-js-portfolio-tutorial-2/HEAD/assets/resume-example.pdf


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | function toggleMenu() {
2 |   const menu = document.querySelector(".menu-links");
3 |   const icon = document.querySelector(".hamburger-icon");
4 |   menu.classList.toggle("open");
5 |   icon.classList.toggle("open");
6 | }
7 | 


--------------------------------------------------------------------------------
/mediaqueries.css:
--------------------------------------------------------------------------------
  1 | @media screen and (max-width: 1400px) {
  2 |   #profile {
  3 |     height: 83vh;
  4 |     margin-bottom: 6rem;
  5 |   }
  6 |   .about-containers {
  7 |     flex-wrap: wrap;
  8 |   }
  9 |   #contact,
 10 |   #projects {
 11 |     height: fit-content;
 12 |   }
 13 | }
 14 | 
 15 | @media screen and (max-width: 1200px) {
 16 |   #desktop-nav {
 17 |     display: none;
 18 |   }
 19 |   #hamburger-nav {
 20 |     display: flex;
 21 |   }
 22 |   #experience,
 23 |   .experience-details-container {
 24 |     margin-top: 2rem;
 25 |   }
 26 |   #profile,
 27 |   .section-container {
 28 |     display: block;
 29 |   }
 30 |   .arrow {
 31 |     display: none;
 32 |   }
 33 |   section,
 34 |   .section-container {
 35 |     height: fit-content;
 36 |   }
 37 |   section {
 38 |     margin: 0 5%;
 39 |   }
 40 |   .section__pic-container {
 41 |     width: 275px;
 42 |     height: 275px;
 43 |     margin: 0 auto 2rem;
 44 |   }
 45 |   .about-containers {
 46 |     margin-top: 0;
 47 |   }
 48 | }
 49 | 
 50 | @media screen and (max-width: 600px) {
 51 |   #contact,
 52 |   footer {
 53 |     height: 40vh;
 54 |   }
 55 |   #profile {
 56 |     height: 83vh;
 57 |     margin-bottom: 0;
 58 |   }
 59 |   article {
 60 |     font-size: 1rem;
 61 |   }
 62 |   footer nav {
 63 |     height: fit-content;
 64 |     margin-bottom: 2rem;
 65 |   }
 66 |   .about-containers,
 67 |   .contact-info-upper-container,
 68 |   .btn-container {
 69 |     flex-wrap: wrap;
 70 |   }
 71 |   .contact-info-container {
 72 |     margin: 0;
 73 |   }
 74 |   .contact-info-container p,
 75 |   .nav-links li a {
 76 |     font-size: 1rem;
 77 |   }
 78 |   .experience-sub-title {
 79 |     font-size: 1.25rem;
 80 |   }
 81 |   .logo {
 82 |     font-size: 1.5rem;
 83 |   }
 84 |   .nav-links {
 85 |     flex-direction: column;
 86 |     gap: 0.5rem;
 87 |     text-align: center;
 88 |   }
 89 |   .section__pic-container {
 90 |     width: auto;
 91 |     height: 46vw;
 92 |     justify-content: center;
 93 |   }
 94 |   .section__text__p2 {
 95 |     font-size: 1.25rem;
 96 |   }
 97 |   .title {
 98 |     font-size: 2rem;
 99 |   }
100 |   .text-container {
101 |     text-align: justify;
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* GENERAL */
  2 | 
  3 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
  4 | 
  5 | * {
  6 |   margin: 0;
  7 |   padding: 0;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: "Poppins", sans-serif;
 12 | }
 13 | 
 14 | html {
 15 |   scroll-behavior: smooth;
 16 | }
 17 | 
 18 | p {
 19 |   color: rgb(85, 85, 85);
 20 | }
 21 | 
 22 | /* TRANSITION */
 23 | 
 24 | a,
 25 | .btn {
 26 |   transition: all 300ms ease;
 27 | }
 28 | 
 29 | /* DESKTOP NAV */
 30 | 
 31 | nav,
 32 | .nav-links {
 33 |   display: flex;
 34 | }
 35 | 
 36 | nav {
 37 |   justify-content: space-around;
 38 |   align-items: center;
 39 |   height: 17vh;
 40 | }
 41 | 
 42 | .nav-links {
 43 |   gap: 2rem;
 44 |   list-style: none;
 45 |   font-size: 1.5rem;
 46 | }
 47 | 
 48 | a {
 49 |   color: black;
 50 |   text-decoration: none;
 51 |   text-decoration-color: white;
 52 | }
 53 | 
 54 | a:hover {
 55 |   color: grey;
 56 |   text-decoration: underline;
 57 |   text-underline-offset: 1rem;
 58 |   text-decoration-color: rgb(181, 181, 181);
 59 | }
 60 | 
 61 | .logo {
 62 |   font-size: 2rem;
 63 | }
 64 | 
 65 | .logo:hover {
 66 |   cursor: default;
 67 | }
 68 | 
 69 | /* HAMBURGER MENU */
 70 | 
 71 | #hamburger-nav {
 72 |   display: none;
 73 | }
 74 | 
 75 | .hamburger-menu {
 76 |   position: relative;
 77 |   display: inline-block;
 78 | }
 79 | 
 80 | .hamburger-icon {
 81 |   display: flex;
 82 |   flex-direction: column;
 83 |   justify-content: space-between;
 84 |   height: 24px;
 85 |   width: 30px;
 86 |   cursor: pointer;
 87 | }
 88 | 
 89 | .hamburger-icon span {
 90 |   width: 100%;
 91 |   height: 2px;
 92 |   background-color: black;
 93 |   transition: all 0.3 ease-in-out;
 94 | }
 95 | 
 96 | .menu-links {
 97 |   position: absolute;
 98 |   top: 100%;
 99 |   right: 0;
100 |   background-color: white;
101 |   width: fit-content;
102 |   max-height: 0;
103 |   overflow: hidden;
104 |   transition: all 0.3 ease-in-out;
105 | }
106 | 
107 | .menu-links a {
108 |   display: block;
109 |   padding: 10px;
110 |   text-align: center;
111 |   font-size: 1.5rem;
112 |   color: black;
113 |   text-decoration: none;
114 |   transition: all 0.3 ease-in-out;
115 | }
116 | 
117 | .menu-links li {
118 |   list-style: none;
119 | }
120 | 
121 | .menu-links.open {
122 |   max-height: 300px;
123 | }
124 | 
125 | .hamburger-icon.open span:first-child {
126 |   transform: rotate(45deg) translate(10px, 5px);
127 | }
128 | 
129 | .hamburger-icon.open span:nth-child(2) {
130 |   opacity: 0;
131 | }
132 | 
133 | .hamburger-icon.open span:last-child {
134 |   transform: rotate(-45deg) translate(10px, -5px);
135 | }
136 | 
137 | .hamburger-icon span:first-child {
138 |   transform: none;
139 | }
140 | 
141 | .hamburger-icon span:first-child {
142 |   opacity: 1;
143 | }
144 | 
145 | .hamburger-icon span:first-child {
146 |   transform: none;
147 | }
148 | 
149 | /* SECTIONS */
150 | 
151 | section {
152 |   padding-top: 4vh;
153 |   height: 96vh;
154 |   margin: 0 10rem;
155 |   box-sizing: border-box;
156 |   min-height: fit-content;
157 | }
158 | 
159 | .section-container {
160 |   display: flex;
161 | }
162 | 
163 | /* PROFILE SECTION */
164 | 
165 | #profile {
166 |   display: flex;
167 |   justify-content: center;
168 |   gap: 5rem;
169 |   height: 80vh;
170 | }
171 | 
172 | .section__pic-container {
173 |   display: flex;
174 |   height: 400px;
175 |   width: 400px;
176 |   margin: auto 0;
177 | }
178 | 
179 | .section__text {
180 |   align-self: center;
181 |   text-align: center;
182 | }
183 | 
184 | .section__text p {
185 |   font-weight: 600;
186 | }
187 | 
188 | .section__text__p1 {
189 |   text-align: center;
190 | }
191 | 
192 | .section__text__p2 {
193 |   font-size: 1.75rem;
194 |   margin-bottom: 1rem;
195 | }
196 | 
197 | .title {
198 |   font-size: 3rem;
199 |   text-align: center;
200 | }
201 | 
202 | #socials-container {
203 |   display: flex;
204 |   justify-content: center;
205 |   margin-top: 1rem;
206 |   gap: 1rem;
207 | }
208 | 
209 | /* ICONS */
210 | 
211 | .icon {
212 |   cursor: pointer;
213 |   height: 2rem;
214 | }
215 | 
216 | /* BUTTONS */
217 | 
218 | .btn-container {
219 |   display: flex;
220 |   justify-content: center;
221 |   gap: 1rem;
222 | }
223 | 
224 | .btn {
225 |   font-weight: 600;
226 |   transition: all 300ms ease;
227 |   padding: 1rem;
228 |   width: 8rem;
229 |   border-radius: 2rem;
230 | }
231 | 
232 | .btn-color-1,
233 | .btn-color-2 {
234 |   border: rgb(53, 53, 53) 0.1rem solid;
235 | }
236 | 
237 | .btn-color-1:hover,
238 | .btn-color-2:hover {
239 |   cursor: pointer;
240 | }
241 | 
242 | .btn-color-1,
243 | .btn-color-2:hover {
244 |   background: rgb(53, 53, 53);
245 |   color: white;
246 | }
247 | 
248 | .btn-color-1:hover {
249 |   background: rgb(0, 0, 0);
250 | }
251 | 
252 | .btn-color-2 {
253 |   background: none;
254 | }
255 | 
256 | .btn-color-2:hover {
257 |   border: rgb(255, 255, 255) 0.1rem solid;
258 | }
259 | 
260 | .btn-container {
261 |   gap: 1rem;
262 | }
263 | 
264 | /* ABOUT SECTION */
265 | 
266 | #about {
267 |   position: relative;
268 | }
269 | 
270 | .about-containers {
271 |   gap: 2rem;
272 |   margin-bottom: 2rem;
273 |   margin-top: 2rem;
274 | }
275 | 
276 | .about-details-container {
277 |   justify-content: center;
278 |   flex-direction: column;
279 | }
280 | 
281 | .about-containers,
282 | .about-details-container {
283 |   display: flex;
284 | }
285 | 
286 | .about-pic {
287 |   border-radius: 2rem;
288 | }
289 | 
290 | .arrow {
291 |   position: absolute;
292 |   right: -5rem;
293 |   bottom: 2.5rem;
294 | }
295 | 
296 | .details-container {
297 |   padding: 1.5rem;
298 |   flex: 1;
299 |   background: white;
300 |   border-radius: 2rem;
301 |   border: rgb(53, 53, 53) 0.1rem solid;
302 |   border-color: rgb(163, 163, 163);
303 |   text-align: center;
304 | }
305 | 
306 | .section-container {
307 |   gap: 4rem;
308 |   height: 80%;
309 | }
310 | 
311 | .section__pic-container {
312 |   height: 400px;
313 |   width: 400px;
314 |   margin: auto 0;
315 | }
316 | 
317 | /* EXPERIENCE SECTION */
318 | 
319 | #experience {
320 |   position: relative;
321 | }
322 | 
323 | .experience-sub-title {
324 |   color: rgb(85, 85, 85);
325 |   font-weight: 600;
326 |   font-size: 1.75rem;
327 |   margin-bottom: 2rem;
328 | }
329 | 
330 | .experience-details-container {
331 |   display: flex;
332 |   justify-content: center;
333 |   flex-direction: column;
334 | }
335 | 
336 | .article-container {
337 |   display: flex;
338 |   text-align: initial;
339 |   flex-wrap: wrap;
340 |   flex-direction: row;
341 |   gap: 2.5rem;
342 |   justify-content: space-around;
343 | }
344 | 
345 | article {
346 |   display: flex;
347 |   width: 10rem;
348 |   justify-content: space-around;
349 |   gap: 0.5rem;
350 | }
351 | 
352 | article .icon {
353 |   cursor: default;
354 | }
355 | 
356 | /* PROJECTS SECTION */
357 | 
358 | #projects {
359 |   position: relative;
360 | }
361 | 
362 | .color-container {
363 |   border-color: rgb(163, 163, 163);
364 |   background: rgb(250, 250, 250);
365 | }
366 | 
367 | .project-img {
368 |   border-radius: 2rem;
369 |   width: 90%;
370 |   height: 90%;
371 | }
372 | 
373 | .project-title {
374 |   margin: 1rem;
375 |   color: black;
376 | }
377 | 
378 | .project-btn {
379 |   color: black;
380 |   border-color: rgb(163, 163, 163);
381 | }
382 | 
383 | /* CONTACT */
384 | 
385 | #contact {
386 |   display: flex;
387 |   justify-content: center;
388 |   flex-direction: column;
389 |   height: 70vh;
390 | }
391 | 
392 | .contact-info-upper-container {
393 |   display: flex;
394 |   justify-content: center;
395 |   border-radius: 2rem;
396 |   border: rgb(53, 53, 53) 0.1rem solid;
397 |   border-color: rgb(163, 163, 163);
398 |   background: (250, 250, 250);
399 |   margin: 2rem auto;
400 |   padding: 0.5rem;
401 | }
402 | 
403 | .contact-info-container {
404 |   display: flex;
405 |   align-items: center;
406 |   justify-content: center;
407 |   gap: 0.5rem;
408 |   margin: 1rem;
409 | }
410 | 
411 | .contact-info-container p {
412 |   font-size: larger;
413 | }
414 | 
415 | .contact-icon {
416 |   cursor: default;
417 | }
418 | 
419 | .email-icon {
420 |   height: 2.5rem;
421 | }
422 | 
423 | /* FOOTER SECTION */
424 | 
425 | footer {
426 |   height: 26vh;
427 |   margin: 0 1rem;
428 | }
429 | 
430 | footer p {
431 |   text-align: center;
432 | }
433 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <title>My Portfolio</title>
  8 |     <link rel="stylesheet" href="style.css" />
  9 |     <link rel="stylesheet" href="mediaqueries.css" />
 10 |   </head>
 11 |   <body>
 12 |     <nav id="desktop-nav">
 13 |       <div class="logo">John Doe</div>
 14 |       <div>
 15 |         <ul class="nav-links">
 16 |           <li><a href="#about">About</a></li>
 17 |           <li><a href="#experience">Experience</a></li>
 18 |           <li><a href="#projects">Projects</a></li>
 19 |           <li><a href="#contact">Contact</a></li>
 20 |         </ul>
 21 |       </div>
 22 |     </nav>
 23 |     <nav id="hamburger-nav">
 24 |       <div class="logo">John Doe</div>
 25 |       <div class="hamburger-menu">
 26 |         <div class="hamburger-icon" onclick="toggleMenu()">
 27 |           <span></span>
 28 |           <span></span>
 29 |           <span></span>
 30 |         </div>
 31 |         <div class="menu-links">
 32 |           <li><a href="#about" onclick="toggleMenu()">About</a></li>
 33 |           <li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
 34 |           <li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
 35 |           <li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
 36 |         </div>
 37 |       </div>
 38 |     </nav>
 39 |     <section id="profile">
 40 |       <div class="section__pic-container">
 41 |         <img src="./assets/profile-pic.png" alt="John Doe profile picture" />
 42 |       </div>
 43 |       <div class="section__text">
 44 |         <p class="section__text__p1">Hello, I'm</p>
 45 |         <h1 class="title">John Doe</h1>
 46 |         <p class="section__text__p2">Frontend Developer</p>
 47 |         <div class="btn-container">
 48 |           <button
 49 |             class="btn btn-color-2"
 50 |             onclick="window.open('./assets/resume-example.pdf')"
 51 |           >
 52 |             Download CV
 53 |           </button>
 54 |           <button class="btn btn-color-1" onclick="location.href='./#contact'">
 55 |             Contact Info
 56 |           </button>
 57 |         </div>
 58 |         <div id="socials-container">
 59 |           <img
 60 |             src="./assets/linkedin.png"
 61 |             alt="My LinkedIn profile"
 62 |             class="icon"
 63 |             onclick="location.href='https://linkedin.com/'"
 64 |           />
 65 |           <img
 66 |             src="./assets/github.png"
 67 |             alt="My Github profile"
 68 |             class="icon"
 69 |             onclick="location.href='https://github.com/'"
 70 |           />
 71 |         </div>
 72 |       </div>
 73 |     </section>
 74 |     <section id="about">
 75 |       <p class="section__text__p1">Get To Know More</p>
 76 |       <h1 class="title">About Me</h1>
 77 |       <div class="section-container">
 78 |         <div class="section__pic-container">
 79 |           <img
 80 |             src="./assets/about-pic.png"
 81 |             alt="Profile picture"
 82 |             class="about-pic"
 83 |           />
 84 |         </div>
 85 |         <div class="about-details-container">
 86 |           <div class="about-containers">
 87 |             <div class="details-container">
 88 |               <img
 89 |                 src="./assets/experience.png"
 90 |                 alt="Experience icon"
 91 |                 class="icon"
 92 |               />
 93 |               <h3>Experience</h3>
 94 |               <p>2+ years <br />Frontend Development</p>
 95 |             </div>
 96 |             <div class="details-container">
 97 |               <img
 98 |                 src="./assets/education.png"
 99 |                 alt="Education icon"
100 |                 class="icon"
101 |               />
102 |               <h3>Education</h3>
103 |               <p>B.Sc. Bachelors Degree<br />M.Sc. Masters Degree</p>
104 |             </div>
105 |           </div>
106 |           <div class="text-container">
107 |             <p>
108 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quis
109 |               reprehenderit et laborum, rem, dolore eum quod voluptate
110 |               exercitationem nobis, nihil esse debitis maxime facere minus sint
111 |               delectus velit in eos quo officiis explicabo deleniti dignissimos.
112 |               Eligendi illum libero dolorum cum laboriosam corrupti quidem,
113 |               reiciendis ea magnam? Nulla, impedit fuga!
114 |             </p>
115 |           </div>
116 |         </div>
117 |       </div>
118 |       <img
119 |         src="./assets/arrow.png"
120 |         alt="Arrow icon"
121 |         class="icon arrow"
122 |         onclick="location.href='./#experience'"
123 |       />
124 |     </section>
125 |     <section id="experience">
126 |       <p class="section__text__p1">Explore My</p>
127 |       <h1 class="title">Experience</h1>
128 |       <div class="experience-details-container">
129 |         <div class="about-containers">
130 |           <div class="details-container">
131 |             <h2 class="experience-sub-title">Frontend Development</h2>
132 |             <div class="article-container">
133 |               <article>
134 |                 <img
135 |                   src="./assets/checkmark.png"
136 |                   alt="Experience icon"
137 |                   class="icon"
138 |                 />
139 |                 <div>
140 |                   <h3>HTML</h3>
141 |                   <p>Experienced</p>
142 |                 </div>
143 |               </article>
144 |               <article>
145 |                 <img
146 |                   src="./assets/checkmark.png"
147 |                   alt="Experience icon"
148 |                   class="icon"
149 |                 />
150 |                 <div>
151 |                   <h3>CSS</h3>
152 |                   <p>Experienced</p>
153 |                 </div>
154 |               </article>
155 |               <article>
156 |                 <img
157 |                   src="./assets/checkmark.png"
158 |                   alt="Experience icon"
159 |                   class="icon"
160 |                 />
161 |                 <div>
162 |                   <h3>SASS</h3>
163 |                   <p>Intermediate</p>
164 |                 </div>
165 |               </article>
166 |               <article>
167 |                 <img
168 |                   src="./assets/checkmark.png"
169 |                   alt="Experience icon"
170 |                   class="icon"
171 |                 />
172 |                 <div>
173 |                   <h3>JavaScript</h3>
174 |                   <p>Basic</p>
175 |                 </div>
176 |               </article>
177 |               <article>
178 |                 <img
179 |                   src="./assets/checkmark.png"
180 |                   alt="Experience icon"
181 |                   class="icon"
182 |                 />
183 |                 <div>
184 |                   <h3>TypeScript</h3>
185 |                   <p>Basic</p>
186 |                 </div>
187 |               </article>
188 |               <article>
189 |                 <img
190 |                   src="./assets/checkmark.png"
191 |                   alt="Experience icon"
192 |                   class="icon"
193 |                 />
194 |                 <div>
195 |                   <h3>Material UI</h3>
196 |                   <p>Intermediate</p>
197 |                 </div>
198 |               </article>
199 |             </div>
200 |           </div>
201 |           <div class="details-container">
202 |             <h2 class="experience-sub-title">Frontend Development</h2>
203 |             <div class="article-container">
204 |               <article>
205 |                 <img
206 |                   src="./assets/checkmark.png"
207 |                   alt="Experience icon"
208 |                   class="icon"
209 |                 />
210 |                 <div>
211 |                   <h3>PostgreSQL</h3>
212 |                   <p>Basic</p>
213 |                 </div>
214 |               </article>
215 |               <article>
216 |                 <img
217 |                   src="./assets/checkmark.png"
218 |                   alt="Experience icon"
219 |                   class="icon"
220 |                 />
221 |                 <div>
222 |                   <h3>Node JS</h3>
223 |                   <p>Intermediate</p>
224 |                 </div>
225 |               </article>
226 |               <article>
227 |                 <img
228 |                   src="./assets/checkmark.png"
229 |                   alt="Experience icon"
230 |                   class="icon"
231 |                 />
232 |                 <div>
233 |                   <h3>Express JS</h3>
234 |                   <p>Intermediate</p>
235 |                 </div>
236 |               </article>
237 |               <article>
238 |                 <img
239 |                   src="./assets/checkmark.png"
240 |                   alt="Experience icon"
241 |                   class="icon"
242 |                 />
243 |                 <div>
244 |                   <h3>Git</h3>
245 |                   <p>Intermediate</p>
246 |                 </div>
247 |               </article>
248 |             </div>
249 |           </div>
250 |         </div>
251 |       </div>
252 |       <img
253 |         src="./assets/arrow.png"
254 |         alt="Arrow icon"
255 |         class="icon arrow"
256 |         onclick="location.href='./#projects'"
257 |       />
258 |     </section>
259 |     <section id="projects">
260 |       <p class="section__text__p1">Browse My Recent</p>
261 |       <h1 class="title">Projects</h1>
262 |       <div class="experience-details-container">
263 |         <div class="about-containers">
264 |           <div class="details-container color-container">
265 |             <div class="article-container">
266 |               <img
267 |                 src="./assets/project-1.png"
268 |                 alt="Project 1"
269 |                 class="project-img"
270 |               />
271 |             </div>
272 |             <h2 class="experience-sub-title project-title">Project One</h2>
273 |             <div class="btn-container">
274 |               <button
275 |                 class="btn btn-color-2 project-btn"
276 |                 onclick="location.href='https://github.com/'"
277 |               >
278 |                 Github
279 |               </button>
280 |               <button
281 |                 class="btn btn-color-2 project-btn"
282 |                 onclick="location.href='https://github.com/'"
283 |               >
284 |                 Live Demo
285 |               </button>
286 |             </div>
287 |           </div>
288 |           <div class="details-container color-container">
289 |             <div class="article-container">
290 |               <img
291 |                 src="./assets/project-2.png"
292 |                 alt="Project 2"
293 |                 class="project-img"
294 |               />
295 |             </div>
296 |             <h2 class="experience-sub-title project-title">Project Two</h2>
297 |             <div class="btn-container">
298 |               <button
299 |                 class="btn btn-color-2 project-btn"
300 |                 onclick="location.href='https://github.com/'"
301 |               >
302 |                 Github
303 |               </button>
304 |               <button
305 |                 class="btn btn-color-2 project-btn"
306 |                 onclick="location.href='https://github.com/'"
307 |               >
308 |                 Live Demo
309 |               </button>
310 |             </div>
311 |           </div>
312 |           <div class="details-container color-container">
313 |             <div class="article-container">
314 |               <img
315 |                 src="./assets/project-3.png"
316 |                 alt="Project 3"
317 |                 class="project-img"
318 |               />
319 |             </div>
320 |             <h2 class="experience-sub-title project-title">Project Three</h2>
321 |             <div class="btn-container">
322 |               <button
323 |                 class="btn btn-color-2 project-btn"
324 |                 onclick="location.href='https://github.com/'"
325 |               >
326 |                 Github
327 |               </button>
328 |               <button
329 |                 class="btn btn-color-2 project-btn"
330 |                 onclick="location.href='https://github.com/'"
331 |               >
332 |                 Live Demo
333 |               </button>
334 |             </div>
335 |           </div>
336 |         </div>
337 |       </div>
338 |       <img
339 |         src="./assets/arrow.png"
340 |         alt="Arrow icon"
341 |         class="icon arrow"
342 |         onclick="location.href='./#contact'"
343 |       />
344 |     </section>
345 |     <section id="contact">
346 |       <p class="section__text__p1">Get in Touch</p>
347 |       <h1 class="title">Contact Me</h1>
348 |       <div class="contact-info-upper-container">
349 |         <div class="contact-info-container">
350 |           <img
351 |             src="./assets/email.png"
352 |             alt="Email icon"
353 |             class="icon contact-icon email-icon"
354 |           />
355 |           <p><a href="mailto:examplemail@gmail.com">Example@gmail.com</a></p>
356 |         </div>
357 |         <div class="contact-info-container">
358 |           <img
359 |             src="./assets/linkedin.png"
360 |             alt="LinkedIn icon"
361 |             class="icon contact-icon"
362 |           />
363 |           <p><a href="https://www.linkedin.com">LinkedIn</a></p>
364 |         </div>
365 |       </div>
366 |     </section>
367 |     <footer>
368 |       <nav>
369 |         <div class="nav-links-container">
370 |           <ul class="nav-links">
371 |             <li><a href="#about">About</a></li>
372 |             <li><a href="#experience">Experience</a></li>
373 |             <li><a href="#projects">Projects</a></li>
374 |             <li><a href="#contact">Contact</a></li>
375 |           </ul>
376 |         </div>
377 |       </nav>
378 |       <p>Copyright &#169; 2023 John Doe. All Rights Reserved.</p>
379 |     </footer>
380 |     <script src="script.js"></script>
381 |   </body>
382 | </html>
383 | 


--------------------------------------------------------------------------------