-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (124 loc) · 6.85 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmanuel Ogbuzuru | Frontend Developer</title>
<link rel="stylesheet" href="./index.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" />
<link rel="icon" type="image/png" href="/images/logo.png" />
</head>
<body>
<header id="header">
<nav id="nav" class="navbar" >
<div class="nav-icon-container">
<img data-aos="fade-right" class="logo" src="./images/logo.png" alt="logo">
<i id="menu" class="fa-solid fa-bars"></i>
</div>
<ul class="dropdown-menu" data-aos="zoom-in">
<li><a href="#about" class="nav-link">About me</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact me</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<div class="hero-details-container">
<div class="hero-text-container" data-aos="fade-right">
<h4>Hi, I am</h4>
<h1>Emmanuel Ogbuzuru</h1>
<p>Frontend React Developer</p>
</div>
<div class="hero-socials-container">
<a
href="mailto:[email protected]?subject=Inquiry&body=Hello%20Emmanuel!"
target="_blank"
>
<i class="fa-solid fa-at"></i>
</a>
<a href="https://github.com/brag2gr8" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://linkedin.com/in/brag2" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<img data-aos="zoom-in" class="dev-pics" src="./images/dev.png" alt="dev picture">
<div class="rotate-design"></div>
</section>
<section id="about">
<span data-aos="zoom-in" class="about-me">ABOUT ME</span>
<p data-aos="fade-left">Hello! I'm Emmanuel Ogbuzuru, a frontend React developer passionate about creating exceptional user experiences. With expertise in React.js and a focus on clean, efficient code, I build beautiful and intuitive web applications.</p>
<p data-aos="fade-right">I have a keen eye for design and strive to create visually appealing, responsive websites that adapt to any device. I'm committed to optimizing performance and staying up-to-date with the latest industry trends.</p>
<p data-aos="fade-left">Throughout my learning journey, I've built impressive web applications that showcase my skills and dedication. I'm always excited to collaborate on innovative projects and bring ideas to life.</p>
<p data-aos="fade-right">Feel free to explore my portfolio and let's connect to discuss how I can contribute to your next project. Together, we can create something amazing!"</p>
<h3 data-aos="zoom-in">Want to Checkout my Resume??</h3>
<label data-aos="zoom-in">
<input type="checkbox" id="consent-checkbox">
I give my consent to download this resume.
</label>
<button data-aos="zoom-out" class="download-btn">Download Resume <i class="fa-solid fa-download"></i></button>
<div class="download-message-container">
<p id="download-message" class="success-message">Downloading my Resume to your device...</p>
<div id="line"></div>
</div>
</section>
<section id="skills">
<span data-aos="zoom-in" class="skills-header">SKILLS</span>
<!-- <h2 data-aos="fade-left">Using Now :</h2> -->
<div data-aos="fade-right" class="skill-logo-container" id="using-now"></div>
<!-- <h2 data-aos="fade-left">Learning :</h2>
<div data-aos="fade-right" class="skill-logo-container" id="learning"></div> -->
</section>
<section id="projects">
<span data-aos="zoom-in" class="skills-header">PROJECTS</span>
<div id="all-projects-container" class="all-projects-container"></div>
</section>
<section id="contact">
<span data-aos="zoom-in" class="about-me">CONTACT</span>
<p data-aos="fade-left" >I'm excited to hear from you! Please feel free to reach out. I will do my best to respond to your inquiry as soon as possible.</p>
<img data-aos="fade-right" src="./images/seperator.png" alt="seperator">
<form
name="My-Form" id="my-form"
action="https://formsubmit.co/[email protected]"
method="POST"
data-aos="flip-right"
>
<input type="hidden" name="_subject" value="New submission from Portfolio!">
<input type="text" name="name" placeholder="Name*" required>
<input type="email" name="email" placeholder="Email*" required>
<textarea name="message" placeholder="Your message*" required></textarea>
<button type="submit" >SUBMIT</button>
<div class="message-container">
<p class="success-message">Your message was successfully sent..</p>
<div id="line"></div>
</div>
</form>
</section>
</main>
<footer>
<a href="#header" data-aos="zoom-in">
<div class="back-to-top">
<img src="./images/double-arrow.png" alt="double-arrow">
<h3>BACK TO TOP</h3>
</div>
</a>
<div class="footer-socials-container" data-aos="zoom-in">
<a
href="mailto:[email protected]?subject=Inquiry&body=Hello%20Emmanuel!"
target="_blank"
>
<i class="fa-solid fa-at"></i>
</a>
<a href="https://github.com/brag2gr8" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://linkedin.com/in/brag2" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
</div>
<p>@2023 Emmanuel Ogbuzuru All Rights Reserved.</p>
</footer>
<script src="./index.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script src="https://kit.fontawesome.com/d333c100e0.js" crossorigin="anonymous"></script>
</body>
</html>