-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
181 lines (147 loc) · 12.4 KB
/
Copy pathindex.html
File metadata and controls
181 lines (147 loc) · 12.4 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
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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>Adeyemi Gabriel</title>
<link rel="stylesheet" href="./dist/output.css">
<link rel="shortcut icon" href="./img/undraw_profile_pic_ic-5-t.svg" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function (){
emailjs.init({
publicKey: "MRDBzhQu1TzT4Bsdw",
});
})();
</script>
</head>
<body class="bg-gray-300 text-gray-800 select-none text-lg relative">
<header class="px-[5%] lg:px-[10%] bg-cover bg-no-repeat bg-fixed" style="background-image: url(./img/svg.png);" id="home">
<nav class="flex justify-between items-center my-4">
<h1 class="uppercase text-orange-500 font-semibold italic hover:font-bold cursor-pointer">Portfolio</h1>
<ul id="nav-links" class="hidden bg-gray-300 w-screen md:w-fit md:block md:static md:top-0 md:left-0 md:px-0 md:py-0 py-4 px-8 fixed top-0 left-0">
<div class="flex justify-between">
<span class="flex sm:flex-row flex-col gap-4">
<li class="inline md:py-0 py-0 md:px-0 px-2 w-fit md:ml-4 hover:text-orange-500 hover:border-b-2 hover:border-orange-500 transition ease-out duration-500"><a href="#home">Home</a></li>
<li class="inline md:py-0 py-0 md:px-0 px-2 w-fit md:ml-4 hover:text-orange-500 hover:border-b-2 hover:border-orange-500 transition ease-out duration-500"><a href="#about">About</a></li>
<li class="inline md:py-0 py-0 md:px-0 px-2 w-fit md:ml-4 hover:text-orange-500 hover:border-b-2 hover:border-orange-500 transition ease-out duration-500"><a href="#portfolio">Portfolio</a></li>
<li class="inline md:py-0 py-0 md:px-0 px-2 w-fit md:ml-4 hover:text-orange-500 hover:border-b-2 hover:border-orange-500 transition ease-out duration-500"><a href="#contact">Contact</a></li>
</span>
<!-- download closebtn icon -->
<span id="toggle-close" class="md:hidden inline hover:text-orange-500 transition ease-out duration-500 font-bold">
X
</span>
</div>
</ul>
<div class="md:hidden hover:text-orange-500 transition ease-out duration-500">
<span id="toggle-open"><i class="fas fa-bars"></i></span>
</div>
</nav>
<div class="py-4 flex flex-col-reverse md:flex-row items-center justify-between ">
<div class="md:text-left text-center my-16">
<h1 class="font-bold sm:text-4xl text-3xl">Hi, I am <span class="text-orange-500 uppercase">Adeyemi Gabriel</span></h1>
<div class="md:my-4 my-2">
<h3 class="font-bold sm:text-3xl text-2xl">A Frontend Developer</h3>
<p class="font-semibold text-lg">I build value through quality design</p>
<div>
<a target="_blank" class="text-blue-700 text-xl mr-2" href="https://www.facebook.com/profile.php?id=100091602442311"><i class="fab fa-facebook"></i></a>
<a target="_blank" class="text-blue-400 text-xl mr-2" href="http://twitter.com/Gab_Riel101?t=QpyEvv7fmivZX5iFJVFFzQ&s=09"><i class="fab fa-twitter"></i></a>
<a target="_blank" class="text-purple-800 text-xl mr-2" href="http://instagram.com/gab_riel101_?igshid=ZDdkNTZiNTM="><i class="fab fa-instagram"></i></a>
<a target="_blank" class="text-blue-800 text-xl mr-2" href="https://www.linkedin.com/in/adeyemi-gabriel-a61b48228"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<a target="_blank" href="https://wa.me/qr/SLAMC3KZSONPE1"><button class=" uppercase border border-orange-500 px-4 py-2 rounded text-orange-500 text-sm font-bold hover:bg-orange-500 hover:text-gray-300 transition ease-out duration-500">Hire Me</button></a>
</div>
<div class=" lg:w-[30%] w-[40%] my-4 rounded-full overflow-hidden">
<img class="fill-current" src="./img/Profile-pic.jpg" alt="Picture">
</div>
</div>
</header>
<main class="px-[5%] lg:px-[10%] py-8">
<section id="about" class="">
<div class="my-14 mx-auto sm:w-[90%] w-[100%] gap-10 flex flex-col md:flex-row items-center">
<div class="w-[60%] md:w-[80%] xl:w-[25%] sm:mb-0 mb-8">
<img class="fill-current" src="./img/Profile-pic.jpg" alt="Profile">
</div>
<div class="w-[100%]">
<h3 class="font-bold text-xl text-orange-500 border-b border-orange-500 mb-8">About Me</h3>
<p class="text-left">Hi again. I am a professional <span class="text-orange-500">Frontend Developer</span> who is dependable and trained to work in high stress environments and stay calm under pressure with effective team work to produce the best result for you. I am seeking to leverage analytical skills and expertise in frontend tools to help you with your upcoming challenges.</p>
</div>
</div>
<!-- Skills -->
<div class="my-10 mx-auto flex flex-col-reverse md:flex-row w-[90%] gap-10 items-center">
<div class="w-[100%]">
<h3 class="font-bold text-lg text-orange-500 border-b border-orange-500 mb-8">Aquired Skills</h3>
<p class="">I have worked and gained experience with industry standard frontend tools like HTML, Vanilla CSS, TailwindCSS, Bootstrap and JavaScript. I have learned through different unique experiences how to build a fully responsive website. I have learned so much from my experiences and would love to be a part of your success story. I am always eager to learn more because I love what I do, email me if you have anything in mind.
</p>
</div>
<div class="w-[70%] xl:w-[40%] md:w-[100%] sm:mb-0 mb-8">
<img class="fill-current" src="./img/undraw_job_hunt_re_q203.svg" alt="Skills">
</div>
</div>
<!-- What I do -->
<div class=" w-[90%] my-10 mx-auto gap-10 flex flex-col md:flex-row items-center">
<div class="w-[70%] ">
<img class="fill-current" src="./img/undraw_resume_re_hkth.svg" alt="cv-img">
</div>
<div class="w-[100%]">
<h3 class="font-bold text-lg text-orange-500 border-b border-orange-500">What do I do exactly?</h3>
<p class="my-10">Sometimes, I am asked this question, and the basic answer is <span class="text-orange-500">I build websites</span>. Single paged website, portfolio website, personal website, website for an event, business website, commercial, industrial and any other website, I build them all. So yeah, I build websites. When you need a website -because you're gonna need one someday- don't hesitate to reach out to me.</p>
<!-- <button class=" uppercase border text-sm border-orange-500 px-4 py-2 rounded text-orange-500 font-bold hover:bg-orange-500 hover:text-gray-300 transition ease-out duration-500"><a href="">Download CV</a></button> -->
</div>
</div>
</section>
<section id="portfolio" class="py-4">
<h3 class="font-bold text-lg text-orange-500 border-b border-orange-500">My Projects</h3>
<div class="flex flex-col md:flex-row mt-16 items-center">
<div class="md:w-[40%] w-[70%] my-8 overflow-hidden rounded-lg mx-4 hover:opacity-100 opacity-60 hover:scale-110 transition ease-out duration-500">
<a target="_blank" href="https://riel101.github.io/Mailion/"><img class="fill-current box-border" src="./img/undraw_programming_re_kg9v.svg" alt="Mailion"></a>
<p class="text-center font-semibold capitalize">
Mailion
</p>
</div>
<div class="md:w-[40%] w-[70%] my-8 overflow-hidden rounded-lg mx-4 hover:opacity-100 opacity-60 hover:scale-110 transition ease-out duration-500">
<a target="_blank" href="https://frontend-bootcamp-h5xp.vercel.app/#"><img class="fill-current box-border" src="./img/undraw_programming_re_kg9v.svg" alt="frontend"></a>
<p class="text-center font-semibold capitalize">Learn frontend</p>
</div>
<div class="md:w-[40%] w-[70%] my-8 overflow-hidden rounded-lg mx-4 hover:opacity-100 opacity-60 hover:scale-110 transition ease-out duration-500">
<a target="_blank" href="https://riel101.github.io/iSmart/"><img class="fill-current box-border" src="./img/undraw_programming_re_kg9v.svg" alt="img"></a>
<p class="text-center font-semibold capitalize">iSmart</p>
</div>
</div>
</section>
<section id="contact">
<div class="my-16">
<h3 class="font-bold text-lg text-orange-500 border-b border-orange-500 mb-8">Send Me a Message</h3>
<form class="text-center md:w-[70%] w-[100%] mx-auto flex flex-col justify-center">
<div class="my-3 flex flex-col sm:flex-row justify-between">
<input type="text" id="sender-name" name="sender-name" placeholder="Name" class="sm:w-[95%] sm:mr-[5%] sm:mb-0 mb-3 bg-gray-800 text-gray-300 px-3 py-2 rounded outline-none outline-1 focus:outline-2 outline-orange-500" required>
<input class="sm:w-[95%] sm:ml-[5%] bg-gray-800 text-gray-300 px-3 py-2 rounded outline-none outline-1 focus:outline-2 outline-orange-500" type="email" id="sender-email" name="sender-email" placeholder="Email" required>
</div>
<textarea id="email-message" class="bg-gray-800 text-gray-300 px-3 py-2 rounded outline-none mb-6 outline-1 focus:outline-2 outline-orange-500 resize-none" name="email-message" cols="30" rows="10" placeholder="Your message..." required></textarea>
<div>
<input id="submitBtn" class="w-[50%] uppercase border text-sm border-orange-500 px-4 py-2 rounded text-orange-500 font-bold hover:bg-orange-500 hover:text-gray-300 cursor-pointer transition ease-out duration-500" type="submit" value="Send">
</div>
</form>
</div>
</section>
</main>
<a href="#home" id="back-to-top" class="fixed hidden right-14 hover:text-gray-300 text-gray-800 bottom-24 p-2 hover:bg-orange-500 rounded animate-bounce cursor-pointer shadow-md shadow-gray-700 hover:animate-none bg-gray-300 transition duration-500">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5"/>
</svg>
</a>
<footer class="bg-gray-800 text-gray-300 text-sm text-center py-4">
<div class="my-4">
<p>Copyright ©<a class="text-orange-500" href="#home">Adeyemi Gabriel</a></p>
<p>Designed and developed by <a class="text-orange-500" href="#home">Adeyemi Gabriel</a></p>
</div>
</footer>
<script src="./js/app.js"></script>
</body>
</html>