-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (198 loc) · 10.5 KB
/
Copy pathindex.html
File metadata and controls
205 lines (198 loc) · 10.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Janus - Professional Web Developer specializing in frontend development, backend solutions, and blockchain technology">
<title>Janus - Web Developer</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
:root {
--purple-primary: #6B46C1;
--yellow-accent: #ECC94B;
}
html {
scroll-behavior: smooth;
}
.gradient-bg {
background: linear-gradient(135deg, var(--purple-primary) 0%, #4C1D95 100%);
}
.hover-effect {
transform: translateY(0);
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: translateY(-5px);
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.typing-effect {
border-right: 3px solid var(--yellow-accent);
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
white-space: nowrap;
overflow: hidden;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: var(--yellow-accent) }
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@media (prefers-reduced-motion: reduce) {
.floating, .hover-effect, .typing-effect {
animation: none;
transform: none;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="gradient-bg text-white shadow-lg fixed w-full z-10" role="navigation">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<span class="text-2xl font-bold text-yellow-400 floating">Janus</span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#about" class="hover:text-yellow-400 transition-colors duration-300">About</a>
<a href="#skills" class="hover:text-yellow-400 transition-colors duration-300">Skills</a>
<a href="#portfolio" class="hover:text-yellow-400 transition-colors duration-300">Portfolio</a>
<a href="#contact" class="hover:text-yellow-400 transition-colors duration-300">Contact</a>
<a href="https://github.com/pielancer314" class="hover:text-yellow-400 transition-colors duration-300" aria-label="GitHub Profile">
<i class="fab fa-github text-xl"></i>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="gradient-bg text-white pt-32 pb-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-5xl font-bold mb-6 text-shadow typing-effect mx-auto" data-aos="fade-down">Your Dedicated Web Developer</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="300">Crafting elegant, user-friendly websites with passion and precision</p>
<div class="flex justify-center space-x-4" data-aos="zoom-in" data-aos-delay="600">
<a href="#contact" class="bg-yellow-400 text-purple-900 px-8 py-3 rounded-full font-bold hover:bg-yellow-300 transition duration-300">
Get in Touch
</a>
<a href="#about" class="border-2 border-yellow-400 text-yellow-400 px-8 py-3 rounded-full font-bold hover:bg-yellow-400 hover:text-purple-900 transition duration-300">
Learn More
</a>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl font-bold text-purple-900 mb-8" data-aos="fade-down">About Me</h2>
<p class="text-lg text-gray-700 mb-6" data-aos="fade-up" data-aos-delay="200">
I'm a passionate web developer with a keen eye for detail and a knack for crafting elegant, user-friendly websites. With a strong foundation in HTML, CSS, and JavaScript, I specialize in creating responsive, cross-browser compatible web applications.
</p>
<p class="text-lg text-gray-700 mb-6" data-aos="fade-up" data-aos-delay="400">
I'm proficient in leveraging popular frameworks like React and Angular to build dynamic and interactive web experiences. I'm also an advocate for open-source technologies and actively contribute to the GitHub community.
</p>
<p class="text-lg text-gray-700" data-aos="fade-up" data-aos-delay="600">
I'm always eager to learn and explore new technologies, particularly in the realm of blockchain development.
</p>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="bg-purple-50 py-20">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center text-purple-900 mb-12" data-aos="fade-down">Technical Skills</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-lg p-8 hover-effect" data-aos="flip-left" data-aos-delay="200">
<div class="text-yellow-400 text-4xl mb-4" aria-hidden="true">
<i class="fas fa-code"></i>
</div>
<h3 class="text-2xl font-bold text-purple-900 mb-4">Frontend Development</h3>
<p class="text-gray-700">HTML5, CSS3, JavaScript, React, Angular</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 hover-effect" data-aos="flip-left" data-aos-delay="400">
<div class="text-yellow-400 text-4xl mb-4" aria-hidden="true">
<i class="fas fa-server"></i>
</div>
<h3 class="text-2xl font-bold text-purple-900 mb-4">Backend Development</h3>
<p class="text-gray-700">Node.js, Express, RESTful APIs</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-8 hover-effect" data-aos="flip-left" data-aos-delay="600">
<div class="text-yellow-400 text-4xl mb-4" aria-hidden="true">
<i class="fas fa-link"></i>
</div>
<h3 class="text-2xl font-bold text-purple-900 mb-4">Blockchain</h3>
<p class="text-gray-700">Smart Contracts, Web3.js, Ethereum</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center text-purple-900 mb-12" data-aos="fade-down">My Projects</h2>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-purple-50 rounded-lg shadow-lg p-8 hover-effect" data-aos="fade-right">
<h3 class="text-2xl font-bold text-purple-900 mb-4">MemePi Project</h3>
<p class="text-gray-700 mb-6">A blockchain-based meme platform built on the Pi Network, combining humor with cryptocurrency technology.</p>
<div class="flex justify-center space-x-4">
<a href="https://314-hash.github.io/MemePi/" target="_blank" rel="noopener noreferrer" class="inline-block bg-yellow-400 text-purple-900 px-6 py-2 rounded-full font-bold hover:bg-yellow-300 transition duration-300">
View Project
</a>
</div>
</div>
<div class="bg-purple-50 rounded-lg shadow-lg p-8 hover-effect" data-aos="fade-left">
<h3 class="text-2xl font-bold text-purple-900 mb-4">FoodPiHub</h3>
<p class="text-gray-700 mb-6">A decentralized food delivery platform powered by Pi Network, connecting local restaurants with hungry customers.</p>
<div class="flex justify-center space-x-4">
<a href="https://314-hash.github.io/foodpihub.github.io/" target="_blank" rel="noopener noreferrer" class="inline-block bg-yellow-400 text-purple-900 px-6 py-2 rounded-full font-bold hover:bg-yellow-300 transition duration-300">
View Project
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20">
<div class="container mx-auto px-6 text-center">
<h2 class="text-4xl font-bold text-purple-900 mb-8" data-aos="fade-down">Let's Work Together</h2>
<p class="text-xl text-gray-700 mb-8" data-aos="fade-up" data-aos-delay="200">Need a website or blockchain project? I'm available for freelance work!</p>
<a href="mailto:najnajoredal@gmail.com" class="inline-block bg-purple-600 text-white px-8 py-3 rounded-full font-bold hover:bg-purple-700 transition duration-300" data-aos="zoom-in" data-aos-delay="400">
Send me an email
</a>
</div>
</section>
<!-- Footer -->
<footer class="gradient-bg text-white py-8">
<div class="container mx-auto px-6 text-center">
<p>© 2024 Janus. All rights reserved.</p>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
once: true,
mirror: false,
disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches
});
</script>
</body>
</html>
</script>
</body>
</html>