-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
225 lines (193 loc) · 11.6 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
220
221
222
223
224
225
<!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>portfolio</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5CKf8E2Q0m/JGcw2Kd75Vu8YhL3fOuZN/jj+XbrlJ/1RfRGHwQQQjG1+3MqYT+bDtEZyXDVXJLZW/RkRt+4KA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<header class="bg-black p-4 flex justify-between items-center">
<a href="#" class="text-2xl text-gray-100 font-bold">Creatifying</a>
<button class="text-gray-100 focus:outline-none md:hidden" id="menu-button">
<i class="fas fa-bars"></i>
</button>
<nav class="hidden lg:flex lg:items-center lg:justify-end md:flex-col md:slide-out-left" id="menu">
<a href="#home" class="px-4 py-2 text-sm font-bold text-gray-100 hover:text-gray-400">Home</a>
<a href="#about" class="px-4 py-2 text-sm font-bold text-gray-100 hover:text-gray-400">About</a>
<a href="#Experience" class="px-4 py-2 text-sm font-bold text-gray-100 hover:text-gray-400">Experience</a>
<a href="#contact" class="px-4 py-2 text-sm font-bold text-gray-100 hover:text-gray-400">Contact</a>
</nav>
</header>
<style>
@media (min-width: 640px) {
#menu {
flex-direction: row;
}
}
@media (max-width: 639px) {
#menu {
flex-direction: column;
}
}
</style>
<script>
window.onload = () => {
const button = document.getElementById('menu-button');
const menu = document.getElementById('menu');
button.addEventListener('click', () => {
menu.classList.toggle('slide-in-left');
menu.classList.toggle('slide-out-left');
});
};
</script>
<!-- <section class="bg-black py-20 px-5" id="home">
<div class="container mx-auto flex flex-col items-center px-4">
<img src="profile.png" alt="Profile" class="rounded-full w-48 h-48 mb-4">
<h1 class="text-4xl font-bold text-gray-100 mb-4">Creatifying</h1>
<center>
<p class="text-xl text-gray-100 mb-8">I am a creative and driven software developer with 5 years of experience building web and mobile applications. I have a passion for solving complex problems and creating intuitive and user-friendly interfaces.</p>
</center>
<a href="#" class="px-4 py-2 font-bold text-white bg-red-500 rounded-full shadow-lg hover:bg-teal-400">Learn More</a>
</div>
</section> -->
<section class="bg-gray-900 py-32 text-center">
<div class="container mx-auto flex flex-col items-center px-4 ">
<img src="profile.png" alt="Profile" class="rounded-full w-48 h-48 mb-4">
</div>
<h1 class="text-5xl font-bold text-white ">Welcome to My Portfolio</h1>
<p class="text-xl font-semibold text-white mt-4 mx-4">I am a creative and driven software developer with 5 years of experience building web and mobile applications.</p>
<div class=" mt-8 mx-auto text-center">
<a href="#contact" class="bg-yellow-500 mx-auto px-4 py-2 text-sm font-bold text-white rounded-full hover:bg-yellow-600 ml-4 transition duration-200 ease-in-out">Contact Me</a>
</div>
</section>
<section class="bg-gray-800 py-8 " id="about">
<div class="container mx-auto flex flex-col items-center px-4">
<br>
<h2 class="text-3xl font-bold text-gray-100 mb-4">About Me</h2>
<center>
<p class="text-gray-100 mb-4">I am a creative and driven software developer with 5 years of experience building web and mobile applications. <br>I have a passion for solving complex problems and creating intuitive and user-friendly interfaces.</p>
</center>
<br><br>
<h3 class="text-2xl font-bold text-gray-100 mb-4">Skills</h3>
<div class="flex flex-wrap md:justify-between">
<div class="w-1/3 p-4">
<div class="bg-pink-500 rounded-full p-4 flex items-center justify-center mb-4">
<i class="fas fa-code text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-gray-100 mb-2">HTML</h4>
<p class="text-gray-100">I have a strong foundation in HTML and can build well-structured and semantically correct websites.</p>
</div>
<div class="w-1/3 p-4">
<div class="bg-green-500 rounded-full p-4 flex items-center justify-center mb-4">
<i class="fab fa-css3 text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-gray-100 mb-2">CSS</h4>
<p class="text-gray-100">I have a strong understanding of CSS and can create visually appealing and responsive layouts.</p>
</div>
<div class="w-1/3 p-4">
<div class="bg-yellow-500 rounded-full p-4 flex items-center justify-center mb-4">
<i class="fab fa-js text-4xl text-white"></i>
</div>
<h4 class="text-xl font-bold text-gray-100 mb-2">JavaScript</h4>
<p class="text-gray-100">I have a strong understanding of JavaScript and have experience building web applications using various libraries and frameworks such as React and Angular</p>
</div>
</div>
</div>
</section>
<section class="bg-gray-900 p-8 " id="Experience"><br><br>
<h2 class="text-2xl font-bold text-white mb-4">Experience</h2>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 flex flex-col items-center">
<i class="fas fa-briefcase fa-4x text-red-500 mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">Full-stack Developer</h3>
<p class="text-sm text-gray-400 mb-4">Company XYZ</p>
<p class="text-sm text-gray-400">Jan 2020 - Present</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-8 flex flex-col items-center">
<i class="fas fa-laptop-code fa-4x text-blue-500 mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">Front-end Developer</h3>
<p class="text-sm text-gray-400 mb-4">Company ABC</p>
<p class="text-sm text-gray-400">Oct 2017 - Dec 2019</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-8 flex flex-col items-center">
<i class="fas fa-pencil-alt fa-4x text-green-500 mb-4"></i>
<h3 class="text-xl font-bold text-white mb-2">Graphic Designer</h3>
<p class="text-sm text-gray-400 mb-4">Freelance</p>
<p class="text-sm text-gray-400">Jan 2016 - Sep 2017</p>
</div>
<br>
</div>
</section>
<section class="bg-gray-800 py-8 px-3 " id="contact">
<br><br> <br>
<div class="container mx-auto flex flex-col items-center px-4">
<h2 class="text-3xl font-bold text-gray-100 mb-4">Get in touch</h2>
<form class="w-full max-w-md">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-gray-100 text-xs font-bold mb-2" for="name">
Name
</label>
<input class="appearance-none block w-full bg-gray-700 text-gray-100 border border-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-600" id="name" type="text" placeholder="John Smith">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-gray-100 text-xs font-bold mb-2" for="email">
Email
</label>
<input class="appearance-none block w-full bg-gray-700 text-gray-100 border border-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-600" id="email" type="email" placeholder="john@example.com">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label class="block uppercase tracking-wide text-gray-100 text-xs font-bold mb-2" for="message">
Message
</label>
<textarea class="appearance-none block w-full bg-gray-700 text-gray-100 border border-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-gray-600" id="message" placeholder="Hello, I am interested in your services."></textarea>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full px-3">
<button class="px-4 py-2 font-bold text-white bg-red-500 rounded-full shadow-lg hover:bg-teal-400" type="button">
Send Message
</button>
</div>
</div>
</form>
</div>
</section>
<footer class="bg-gray-900 p-4 mt-auto flex flex-col items-center sm:px-4"><br>
<p class="text-xs font-bold text-gray-600 mb-4 sm:text-base">Copyright © 2022 My Portfolio</p>
<div class="container mx-auto flex flex-col items-center px-4">
<div class="flex items-center">
<i class="fas fa-envelope text-4xl text-gray-100 mr-4"></i>
<a href="mailto:creatifying@gmail.com" class="text-2xl font-bold text-gray-100 hover:text-gray-400">creatifyingg@gmail.com</a>
</div>
<center>
<p class="text-gray-100 mt-4">Or you can find me on social media</p>
</center>
<div class="mt-4 flex">
<a href="#" class="mx-4 text-4xl font-bold text-gray-100 hover:text-gray-400">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="mx-4 text-4xl font-bold text-gray-100 hover:text-gray-400">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="mx-4 text-4xl font-bold text-gray-100 hover:text-gray-400">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</footer>
<!-- Your main content goes here -->
<script src="main.js"></script>
</body>
</html>