-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
97 lines (94 loc) · 3.9 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
<!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>My portfolio</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="mediaqueries.css"/>
</head>
<body>
<nav id="desktop-nav">
<div class="logo">John Jonan</div>
<div>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<nav id="hamburger-nav">
<div class="logo">John Jonan</div>
<div class="hamburger-menu">
<div class="hamburger-icon" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-links">
<li><a href="#about" onclick="toggleMenu()">About</a></li>
<li><a href="#experience" onclick="toggleMenu()">Experience</a></li>
<li><a href="#projects" onclick="toggleMenu()">Projects</a></li>
<li><a href="#contact" onclick="toggleMenu()">Contact</a></li>
</div>
</div>
</nav>
<section id="profile">
<div class="section_pic-container">
<img src="./Assets/Profile pic.png" alt="John Jonan profile picture"/>
</div>
<div class="section_text">
<p class="section_text_p1">Hello, I'm</p>
<h1 class="title">John Jonan</h1>
<p class="section_text_p2">Frontend Developer</p>
<div class="btn-container">
<button class="btn btn-color-2"onclick="window.open('./Assets/resume.pdf')">Download CV</button>
<button class="btn btn-color-1"onclick="location.href='./#contact'">Contact Info </button>
</div>
<div id="socials-container">
<img src="./Assets/linkedin.png" alt="My likedIn profile"
class="icon" onclick="location.href='https://www.linkedin.com/in/kagimu-jonan-07bb0027b'"/>
<img src="./Assets/github.png" alt="My Github profile"
class="icon" onclick="location.href='https://github.com/John-Jkar'"/>
</div>
</div>
</section>
<section id="about">
<p class="section_text_p1">Get to know more</p>
<h1 class="title">About me</h1>
<div class="section-container">
<div class="section_pic-container">
<img src="./Assets/About.png" alt="Profile picture"
class="About-pic"
/>
</div>
<div class="about-details-container">
<div class="about-containers">
<div class="details-container">
<img src="./Assets/experience.png" alt="experience icon"
class="icon"
/>
<h3>Experience</h3>
<p>2+ years <br>Frontend Development</p>
</div>
<div class="details-container">
<img src="./Assets/education.png" alt="experience icon"
class="icon"
/>
<h3>Education</h3>
<p>B.sc. Bachelors Degree <br>M.sc. Masters Degree</p>
</div>
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque voluptate non nobis corporis maxime consectetur labore, magni tempora, dolorem neque animi modi architecto quasi ipsam laudantium aliquid maiores repudiandae fugiat optio. Incidunt suscipit itaque eligendi quod. Tempore deserunt asperiores eos laboriosam veniam id molestiae perspiciatis, suscipit ratione, impedit quasi ea!</p>
</div>
</div>
</div>
<img src="./Assets/arrow.png" alt="Arrow icon"class"icon arrow" onclick="location.href='./#experience'"/>
</section>
<script src="script.js"></script>
</body>
</html>