Skip to content

Commit d82a5e1

Browse files
NshaiNshai
authored
Update index.html
Signed-off-by: Najaf Shaikh <ns4mail@gmail.com>
1 parent 29c9ab5 commit d82a5e1

1 file changed

Lines changed: 386 additions & 4 deletions

File tree

‎index.html‎

Lines changed: 386 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,389 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CØDE SHΔYK | GitHub Portfolio</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16+
line-height: 1.6;
17+
color: #333;
18+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19+
min-height: 100vh;
20+
}
21+
22+
.container {
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
padding: 2rem;
26+
}
27+
28+
header {
29+
text-align: center;
30+
margin-bottom: 3rem;
31+
animation: fadeInUp 0.8s ease-out;
32+
}
33+
34+
h1 {
35+
font-size: 3rem;
36+
font-weight: 700;
37+
color: white;
38+
margin-bottom: 0.5rem;
39+
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
40+
}
41+
42+
.subtitle {
43+
font-size: 1.2rem;
44+
color: rgba(255,255,255,0.9);
45+
margin-bottom: 2rem;
46+
}
47+
48+
.profile-links {
49+
display: flex;
50+
justify-content: center;
51+
gap: 1rem;
52+
margin-bottom: 2rem;
53+
}
54+
55+
.profile-link {
56+
display: inline-flex;
57+
align-items: center;
58+
gap: 0.5rem;
59+
padding: 0.75rem 1.5rem;
60+
background: rgba(255,255,255,0.1);
61+
color: white;
62+
text-decoration: none;
63+
border-radius: 50px;
64+
backdrop-filter: blur(10px);
65+
border: 1px solid rgba(255,255,255,0.2);
66+
transition: all 0.3s ease;
67+
}
68+
69+
.profile-link:hover {
70+
background: rgba(255,255,255,0.2);
71+
transform: translateY(-2px);
72+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
73+
}
74+
75+
.projects-grid {
76+
display: grid;
77+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
78+
gap: 2rem;
79+
margin-top: 2rem;
80+
}
81+
82+
.project-card {
83+
background: rgba(255,255,255,0.95);
84+
border-radius: 15px;
85+
padding: 2rem;
86+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
87+
transition: all 0.3s ease;
88+
backdrop-filter: blur(10px);
89+
border: 1px solid rgba(255,255,255,0.2);
90+
animation: fadeInUp 0.8s ease-out;
91+
animation-fill-mode: both;
92+
}
93+
94+
.project-card:nth-child(1) { animation-delay: 0.1s; }
95+
.project-card:nth-child(2) { animation-delay: 0.2s; }
96+
.project-card:nth-child(3) { animation-delay: 0.3s; }
97+
.project-card:nth-child(4) { animation-delay: 0.4s; }
98+
.project-card:nth-child(5) { animation-delay: 0.5s; }
99+
.project-card:nth-child(6) { animation-delay: 0.6s; }
100+
101+
.project-card:hover {
102+
transform: translateY(-5px);
103+
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
104+
}
105+
106+
.project-header {
107+
display: flex;
108+
align-items: center;
109+
gap: 1rem;
110+
margin-bottom: 1rem;
111+
}
112+
113+
.project-icon {
114+
width: 50px;
115+
height: 50px;
116+
background: linear-gradient(135deg, #667eea, #764ba2);
117+
border-radius: 10px;
118+
display: flex;
119+
align-items: center;
120+
justify-content: center;
121+
font-size: 1.5rem;
122+
color: white;
123+
}
124+
125+
.project-title {
126+
font-size: 1.5rem;
127+
font-weight: 600;
128+
color: #2d3748;
129+
margin: 0;
130+
}
131+
132+
.project-description {
133+
color: #666;
134+
margin-bottom: 1.5rem;
135+
line-height: 1.6;
136+
}
137+
138+
.tech-stack {
139+
display: flex;
140+
flex-wrap: wrap;
141+
gap: 0.5rem;
142+
margin-bottom: 1.5rem;
143+
}
144+
145+
.tech-tag {
146+
background: #e2e8f0;
147+
color: #4a5568;
148+
padding: 0.25rem 0.75rem;
149+
border-radius: 20px;
150+
font-size: 0.875rem;
151+
font-weight: 500;
152+
}
153+
154+
.project-links {
155+
display: flex;
156+
gap: 1rem;
157+
justify-content: center;
158+
}
159+
160+
.project-link {
161+
display: inline-flex;
162+
align-items: center;
163+
gap: 0.5rem;
164+
padding: 0.75rem 1.5rem;
165+
background: linear-gradient(135deg, #667eea, #764ba2);
166+
color: white;
167+
text-decoration: none;
168+
border-radius: 8px;
169+
font-weight: 500;
170+
transition: all 0.3s ease;
171+
flex: 1;
172+
justify-content: center;
173+
}
174+
175+
.project-link:hover {
176+
transform: translateY(-2px);
177+
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
178+
}
179+
180+
.project-link.secondary {
181+
background: transparent;
182+
color: #667eea;
183+
border: 2px solid #667eea;
184+
}
185+
186+
.project-link.secondary:hover {
187+
background: #667eea;
188+
color: white;
189+
}
190+
191+
footer {
192+
text-align: center;
193+
margin-top: 4rem;
194+
padding-top: 2rem;
195+
border-top: 1px solid rgba(255,255,255,0.2);
196+
color: rgba(255,255,255,0.8);
197+
}
198+
199+
@keyframes fadeInUp {
200+
from {
201+
opacity: 0;
202+
transform: translateY(30px);
203+
}
204+
to {
205+
opacity: 1;
206+
transform: translateY(0);
207+
}
208+
}
209+
210+
@media (max-width: 768px) {
211+
.container {
212+
padding: 1rem;
213+
}
214+
215+
h1 {
216+
font-size: 2rem;
217+
}
218+
219+
.projects-grid {
220+
grid-template-columns: 1fr;
221+
gap: 1.5rem;
222+
}
223+
224+
.profile-links {
225+
flex-direction: column;
226+
align-items: center;
227+
}
228+
229+
.project-links {
230+
flex-direction: column;
231+
}
232+
}
233+
</style>
234+
</head>
3235
<body>
4-
<h1>Hello World</h1>
5-
<p>I'm hosted with GitHub Pages.</p>
236+
<div class="container">
237+
<header>
238+
<h1>Your Name</h1>
239+
<p class="subtitle">Full Stack Developer & Open Source Enthusiast</p>
240+
241+
<div class="profile-links">
242+
<a href="https://github.com/yourusername" class="profile-link" target="_blank">
243+
<span>📁</span> GitHub
244+
</a>
245+
<a href="https://linkedin.com/in/yourprofile" class="profile-link" target="_blank">
246+
<span>💼</span> LinkedIn
247+
</a>
248+
<a href="mailto:your.email@example.com" class="profile-link">
249+
<span>✉️</span> Email
250+
</a>
251+
</div>
252+
</header>
253+
254+
<main>
255+
<div class="projects-grid">
256+
<!-- Project 1 -->
257+
<div class="project-card">
258+
<div class="project-header">
259+
<div class="project-icon">🚀</div>
260+
<h3 class="project-title">Project Name 1</h3>
261+
</div>
262+
<p class="project-description">
263+
A brief description of your project explaining what it does, the problem it solves,
264+
and why it's interesting or useful.
265+
</p>
266+
<div class="tech-stack">
267+
<span class="tech-tag">JavaScript</span>
268+
<span class="tech-tag">React</span>
269+
<span class="tech-tag">Node.js</span>
270+
<span class="tech-tag">MongoDB</span>
271+
</div>
272+
<div class="project-links">
273+
<a href="https://github.com/yourusername/project1" class="project-link" target="_blank">
274+
<span>📋</span> View Code
275+
</a>
276+
</div>
277+
</div>
278+
279+
<!-- Project 2 -->
280+
<div class="project-card">
281+
<div class="project-header">
282+
<div class="project-icon">🎨</div>
283+
<h3 class="project-title">Project Name 2</h3>
284+
</div>
285+
<p class="project-description">
286+
Another project description highlighting the key features and technologies used.
287+
Keep it concise but informative.
288+
</p>
289+
<div class="tech-stack">
290+
<span class="tech-tag">Python</span>
291+
<span class="tech-tag">Django</span>
292+
<span class="tech-tag">PostgreSQL</span>
293+
<span class="tech-tag">Docker</span>
294+
</div>
295+
<div class="project-links">
296+
<a href="https://github.com/yourusername/project2" class="project-link" target="_blank">
297+
<span>📋</span> View Code
298+
</a>
299+
</div>
300+
</div>
301+
302+
<!-- Project 3 -->
303+
<div class="project-card">
304+
<div class="project-header">
305+
<div class="project-icon">⚡</div>
306+
<h3 class="project-title">Project Name 3</h3>
307+
</div>
308+
<p class="project-description">
309+
Description of a third project. You can add as many project cards as needed
310+
by copying this structure.
311+
</p>
312+
<div class="tech-stack">
313+
<span class="tech-tag">Vue.js</span>
314+
<span class="tech-tag">TypeScript</span>
315+
<span class="tech-tag">Firebase</span>
316+
<span class="tech-tag">Tailwind CSS</span>
317+
</div>
318+
<div class="project-links">
319+
<a href="https://github.com/yourusername/project3" class="project-link" target="_blank">
320+
<span>📋</span> View Code
321+
</a>
322+
</div>
323+
</div>
324+
325+
<!-- Add more projects as needed -->
326+
<div class="project-card">
327+
<div class="project-header">
328+
<div class="project-icon">🔧</div>
329+
<h3 class="project-title">Tool/Library Name</h3>
330+
</div>
331+
<p class="project-description">
332+
A utility or library you've created. This could be an npm package,
333+
Python library, or any reusable component.
334+
</p>
335+
<div class="tech-stack">
336+
<span class="tech-tag">Go</span>
337+
<span class="tech-tag">CLI</span>
338+
<span class="tech-tag">REST API</span>
339+
</div>
340+
<div class="project-links">
341+
<a href="https://github.com/yourusername/tool-name" class="project-link" target="_blank">
342+
<span>📋</span> Repository
343+
</a>
344+
<a href="#" class="project-link secondary" target="_blank">
345+
<span>📚</span> Docs
346+
</a>
347+
</div>
348+
</div>
349+
</div>
350+
</main>
351+
352+
<footer>
353+
<p>&copy; 2024 Your Name. Built with ❤️ and hosted on GitHub Pages.</p>
354+
</footer>
355+
</div>
356+
357+
<script>
358+
// Add some interactive functionality
359+
document.addEventListener('DOMContentLoaded', function() {
360+
// Add hover effects to project cards
361+
const projectCards = document.querySelectorAll('.project-card');
362+
363+
projectCards.forEach(card => {
364+
card.addEventListener('mouseenter', function() {
365+
this.style.transform = 'translateY(-5px) scale(1.02)';
366+
});
367+
368+
card.addEventListener('mouseleave', function() {
369+
this.style.transform = 'translateY(0) scale(1)';
370+
});
371+
});
372+
373+
// Smooth scrolling for any internal links (if added later)
374+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
375+
anchor.addEventListener('click', function (e) {
376+
e.preventDefault();
377+
const target = document.querySelector(this.getAttribute('href'));
378+
if (target) {
379+
target.scrollIntoView({
380+
behavior: 'smooth',
381+
block: 'start'
382+
});
383+
}
384+
});
385+
});
386+
});
387+
</script>
6388
</body>
7-
</html>
389+
</html>

0 commit comments

Comments
 (0)