-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (229 loc) · 16.6 KB
/
index.html
File metadata and controls
236 lines (229 loc) · 16.6 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
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
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.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=Fira+Code:wght@300..700&family=Lobster&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/9bb106327b.js" crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
<title>Personal Portfolio - Elias</title>
</head>
<body class="bg-neutral-900 my-font text-gray-400 flex flex-col">
<header class="p-6 lg:flex lg:justify-between lg:align-center lg:h-[5rem]">
<input type="checkbox" id="menu-toggle" class="peer hidden">
<div class="flex justify-between items-center">
<img src="assets/images/common/Main_Logo.png" alt="Logo" class="w-[7.2rem] sm:w-[9rem] lg:w-[10rem]">
<label for="menu-toggle" class="text-3xl cursor-pointer lg:hidden peer-checked:hidden lg:hidden">
<i class="fa-solid fa-bars"></i>
</label>
<label for="menu-toggle" class="text-3xl cursor-pointer hidden peer-checked:visible lg:hidden">
<i class="fa-solid fa-x"></i>
</label>
</div>
<nav class="hidden peer-checked:block mt-4 lg:mt-0 lg:block lg:flex lg:flex-row lg:align-center">
<ul class="text-xl text-left ml-[6rem] lg:flex lg:w-full lg:ml-0">
<li class="group hover:text-[#008F11] hover:font-semibold transition hover:delay-150 lg:grow-1"><a href="#hero" class="block p-2"> <i class="fa-solid fa-hashtag fa-lg text-[#008F11] group-hover:text-[yellow] lg:hidden"></i> Home</a></li>
<li class="group hover:text-[#008F11] hover:font-semibold transition hover:delay-150 lg:grow-1"><a href="#projects" class="block p-2"> <i class="fa-solid fa-hashtag fa-lg text-[#008F11] group-hover:text-[yellow] lg:hidden"></i> Projects</a></li>
<li class="group hover:text-[#008F11] hover:font-semibold transition hover:delay-150 lg:grow-1"><a href="#skills" class="block p-2"> <i class="fa-solid fa-hashtag fa-lg text-[#008F11] group-hover:text-[yellow] lg:hidden"></i> Skills</a></li>
<li class="group hover:text-[#008F11] hover:font-semibold transition hover:delay-150 lg:grow-1"><a href="#contact" class="block p-2"> <i class="fa-solid fa-hashtag fa-lg text-[#008F11] group-hover:text-[yellow] lg:hidden"></i> Contact</a></li>
</ul>
</nav>
</header>
<section class="hero flex flex-col items-center" id="hero">
<div class="hero-wraper flex flex-col md:flex-row justify-center items-center p-6 gap-8">
<div class="hero_text flex flex-col justify-center text-center md:text-left max-w-lg gap-5 md:gap-8 lg:gap-8">
<h1 class="hero_title text-2xl lg:text-4xl">
Elias is a <span class="text-[#008F11]">web designer</span> and <span class="text-[#008F11]">front-end developer</span>
</h1>
<p class="hero_info text-lg mt-2 lg:text-2xl">He crafts responsive websites where technologies meet creativity</p>
<button class="font-semibold border border-[#008F11] transition hover:bg-[#008F11] focus:scale-95 text-white p-3 mt-4 w-fit self-center md:self-start lg:self-start">Contact me!!</button>
</div>
<div class="hero_images flex flex-col items-center">
<img src="assets/images/common/profile_secend.png" alt="Profile Photo" class="hero_img max-w-xs w-[60%] h-auto md:w-[100%] lg:w-[100%]">
<p class="status text-center mt-2 border border-gray-400 p-2"> <i class="fa-solid fa-hashtag fa-lg text-[#008F11]"></i>Currently working on Portfolio</p>
</div>
</div>
<div class="quote text-center mt-6 flex flex-col items-center p-10">
<p class="quote-text border border-gray-400 p-2 text-3xl">With great power comes great electricity bill</p>
<p class="quote-author border border-gray-400 p-2 self-end text-right text-2xl"> - Dr. Who</p>
</div>
</section>
<section class="projects border mx-6 my-14" id="projects">
<h2 class="title mx-6 mt-[-10rem] bg-neutral-900 p-4 inline-block text-5xl"><i class="fa-solid fa-hashtag fa-lg text-[#008F11]"></i>Projects</h2>
<div class="projects-wrapper my-9 p-6 grid grid-flow-col justify-center gap-9 grid-rows-6 md:grid-rows-3 lg:grid-rows-2 ">
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_1.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_2.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_3.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_4.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_5.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
<div class="card p-9 hover:bg-neutral-800 hover:shadow-[0_4px_30px_rgba(255,255,255,0.1)]">
<img src="assets/images/content/project_6.png" alt="Project's Photo" class="card-photo w-full h-48 object-cover">
<div class="tags px-3 py-4">
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">HTML</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">SCSS</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">PYTHON</span>
<span class="border rounded border-yellow-400 w-fit bg-yellow-400 text-black">FLASK</span>
</div>
<h3 class="project-title font-bold text-xl mb-2">ChertNodes</h3>
<p class="project-description text-gray-300 text-base">
Minecraft servers hosting
</p>
<button class="font-semibold border border-[#008F11] text-white py-2 px-6 mt-4 hover:border-yellow-400 hover:bg-yellow-400 hover:text-[#008F11] hover:font-bold focus:scale-95">Live </button>
</div>
</div>
</section>
<section class="skills relative flex flex-col items-center lg:flex-row m-9 justify-center my-14" id="skills">
<div class="skills-decor absolute inset-0 w-full h-full -z-10">
<img src="assets/images/common/dots.png" alt="Dot grid"
class="absolute w-[10%] top-2 left-12 opacity-20 -rotate-[40deg]">
<img src="assets/images/common/Rectangle 24.png" alt="Rectangle"
class="absolute w-[10%] top-16 right-16 rotate-12 opacity-50 -z-10">
<img src="assets/images/common/logo.png" alt="Logo"
class="absolute w-[10%] bottom-1 left-1/3 -rotate-[195deg] opacity-20">
</div>
<div class="skill-card-wrapper relative flex justify-center lg:flex-row md:flex-row md:gap-9 lg:gap-9 w-full -z-20">
<div class="col-1">
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
</div>
<div class="col-2 space-y-9">
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
</div>
<div class="col-3 flex flex-col space-y-9">
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
<div class="skill-card">
<h3 class="skill-card_title border">Languages</h3>
<p class="skill-list border p-2">TypeScript Lua Python JavaScript</p>
</div>
</div>
</div>
</section>
<section class="contact bg-transparent text-gray-400 p-8 rounded-lg shadow-lg w-full max-w-xl mx-auto hover:bg-gray-800 hover:text-green-400 transition-all duration-300 my-14" id="contact">
<h2 class="contact-title text-3xl font-mono font-bold mb-4">Contact Me</h2>
<p class="contact-text text-base font-mono mb-6">
I’m interested in freelance opportunities. However, if you have other requests or questions,
don’t hesitate to contact me.
</p>
<form action="submit.php" method="POST" class="space-y-4">
<label for="name" class="block text-lg font-mono">Name:</label>
<input type="text" id="name" name="name" required class="w-full p-2 bg-transparent border-2 border-gray-700 rounded text-gray-400 focus:outline-none focus:border-green-400 hover:text-green-400">
<label for="email" class="block text-lg font-mono">Email:</label>
<input type="email" id="email" name="email" required class="w-full p-2 bg-transparent border-2 border-gray-700 rounded text-gray-400 focus:outline-none focus:border-green-400 hover:text-green-400">
<label for="message" class="block text-lg font-mono">Message:</label>
<textarea id="message" name="message" required class="w-full p-2 bg-transparent border-2 border-gray-700 rounded text-gray-400 focus:outline-none focus:border-green-400 hover:text-green-400"></textarea>
<button type="submit" class="w-full p-2 bg-gray-700 hover:bg-green-500 text-gray-400 hover:text-gray-900 rounded mt-4 font-mono font-bold">Send</button>
</form>
</section>
<footer class="footer bg-gray-800 text-gray-400 py-8 px-6 flex flex-col items-center justify-center text-center">
<div class="details grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="logo-wrapper flex flex-col items-center">
<img src="assets/images/common/Main_Logo.png" alt="logo" class="w-24 mb-2">
<p class="mail text-sm font-light">elias@elias-dev.ml</p>
</div>
<p class="footer-text text-sm font-medium mt-4 lg:mt-0">
Web designer and front-end developer
</p>
<div class="icons">
<h4 class="text-lg font-bold mb-2">Media</h4>
<div class="icon-wrapper flex justify-center gap-4">
<a href="#" class="text-gray-400 hover:text-gray-300 hover:font-bold transition-all duration-300">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300 hover:font-bold transition-all duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-300 hover:font-bold transition-all duration-300">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<span class="block mt-6 text-sm font-light">Copyright © 2025</span>
</footer>
</body>
</html>