Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
135 lines (123 loc) · 6.18 KB
/
Copy pathindex.html
File metadata and controls
135 lines (123 loc) · 6.18 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
<!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" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="./tailwind.config.js"></script>
<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=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./index.css" />
<title>Felix's Premium Portfolio</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('change', () => {
menu.classList.toggle('hidden');
});
});
</script>
</head>
<body class="bg-gray-900 text-white">
<header class="bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 pt-5 pb-10 lg:pb-0">
<nav class="fixed top-0 left-0 right-0 w-full bg-white/10 backdrop-blur-lg shadow-lg px-5 flex flex-wrap items-center justify-between gap- z-50 text-black">
<img src="https://logo.svgcdn.com/s/obtainium-dark.png" alt="Felix's logo" class="h-10 w-auto" />
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle" />
<ul id="menu" class="hidden lg:flex w-full lg:w-auto flex-wrap items-center gap-10">
<li class="py-1 lg:py-0">Home</li>
<li class="py-1 lg:py-0">About</li>
<li class="py-1 lg:py-0">Skills</li>
<li class="py-1 lg:py-0">Projects</li>
<li class="py-1 lg:py-0">Testimonials</li>
<li class="py-1 lg:py-0">Contact</li>
</ul>
</nav>
<div class="container px-5 md:mx-auto flex items-center gap-10 mt-10">
<div class="w-full lg:w-1/2">
<h3 class="font-normal mb-3 text-2xl">Hello,</h3>
<h1 class="font-bold text-5xl lg:text-8xl my-3">I'm Felix</h1>
<p class="mt-5 mb-10 md:text-lg">
A Professional Developer crafting premium digital experiences for global clients.
</p>
<a href="#contact" class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 shadow-lg text-white px-5 py-2 rounded-lg my-10 transition duration-300 transform hover:scale-105 hover:shadow-xl">Contact Me</a>
</div>
<div class="hidden lg:block lg:w-1/2">
<img src="https://images.unsplash.com/photo-1627308595229-7830a5c91f9f" alt="premium workspace" />
</div>
</div>
</header>
<section class="container md:mx-auto px-5 py-10">
<h2 class="text-4xl font-bold mb-5">Skills & Expertise</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold mb-2">Web Development</h3>
<p>React, Tailwind CSS, JavaScript, Node.js, MongoDB, Express.js</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold mb-2">Data Science</h3>
<p>Python, Pandas, NumPy, Machine Learning, AI</p>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<h3 class="text-xl font-semibold mb-2">UI/UX Design</h3>
<p>Responsive Design, Accessibility, Wireframing</p>
</div>
</div>
</section>
<section class="container md:mx-auto px-5 py-10">
<h2 class="text-4xl font-bold mb-5">Projects</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Project 1 -->
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158" alt="AI technology concept" class="rounded-t-lg mb-3">
<h3 class="text-xl font-semibold mb-2">Smart Safety System</h3>
<p>A tribal community safety system detecting wild animal threats using AI/ML.</p>
</div>
<!-- Project 2 -->
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3" alt="Grocery shopping" class="rounded-t-lg mb-3">
<h3 class="text-xl font-semibold mb-2">Grocery Web App</h3>
<p>MERN stack web application for seamless grocery shopping.</p>
</div>
<!-- Project 3 -->
<div class="bg-gray-800 p-5 rounded-lg shadow-lg">
<img src="https://images.unsplash.com/photo-1560264280-88b68371db39" alt="Recruitment process" class="rounded-t-lg mb-3">
<h3 class="text-xl font-semibold mb-2">Recruitment Assist App</h3>
<p>Smart recruiting platform streamlining the hiring process.</p>
</div>
</div>
</section>
<section class="container md:mx-auto px-5 py-10" id="contact">
<h2 class="text-4xl font-bold mb-5">Contact Me</h2>
<form class="bg-gray-800 p-5 rounded-lg shadow-lg">
<div class="mb-5">
<label class="block mb-2">Name</label>
<input type="text" class="w-full p-2 rounded-lg bg-gray-900" />
</div>
<div class="mb-5">
<label class="block mb-2">Email</label>
<input type="email" class="w-full p-2 rounded-lg bg-gray-900" />
</div>
<div class="mb-5">
<label class="block mb-2">Message</label>
<textarea class="w-full p-2 rounded-lg bg-gray-900"></textarea>
</div>
<button type="submit" class="bg-primary text-white px-5 py-2 rounded">Send Message</button>
</form>
</section>
<footer class="bg-gray-800 text-white py-3 text-center">
<p>© 2025 Paul Benjamin Felix. All rights reserved.</p>
</footer>
</body>
</html>