Hugging Face's logo

Spaces:
morhadi
/
codecraft-portfolio-pro
Running

App Files Community
morhadi commited on
Commit
c2e5773
·
verified ·
1 Parent(s): 4bbf7b0

1 give internal page navigation using href # for each section from top

Browse files

2. put correct www link for linkedin , leetcode, codeforces , codechef , github etc
Links
Linkedin
LinkedIn
https://www.linkedin.com/in/mohammad-rabi-ul-hadi
Github
Github
https://github.com/morhadi
Portfolio
Portfolio
https://morhadi.github.io/

Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +116 -0
  3. components/navbar.js +119 -0
  4. index.html +352 -19
  5. script.js +42 -0
  6. style.css +38 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codecraft Portfolio Pro
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeCraft Portfolio Pro 🚀
3
+ colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background-color: #1E293B;
8
+ color: white;
9
+ padding: 3rem 0;
10
+ }
11
+ .footer-container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ padding: 0 2rem;
15
+ display: grid;
16
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
17
+ gap: 2rem;
18
+ }
19
+ .footer-section h3 {
20
+ font-size: 1.25rem;
21
+ font-weight: 600;
22
+ margin-bottom: 1.5rem;
23
+ color: #3B82F6;
24
+ }
25
+ .footer-section ul {
26
+ list-style: none;
27
+ padding: 0;
28
+ }
29
+ .footer-section ul li {
30
+ margin-bottom: 0.75rem;
31
+ }
32
+ .footer-section ul li a {
33
+ color: #CBD5E1;
34
+ text-decoration: none;
35
+ transition: color 0.3s;
36
+ }
37
+ .footer-section ul li a:hover {
38
+ color: #3B82F6;
39
+ }
40
+ .social-links {
41
+ display: flex;
42
+ gap: 1rem;
43
+ margin-top: 1rem;
44
+ }
45
+ .social-links a {
46
+ width: 40px;
47
+ height: 40px;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ background-color: #334155;
52
+ border-radius: 50%;
53
+ transition: all 0.3s;
54
+ }
55
+ .social-links a:hover {
56
+ background-color: #3B82F6;
57
+ transform: translateY(-3px);
58
+ }
59
+ .copyright {
60
+ text-align: center;
61
+ margin-top: 3rem;
62
+ padding-top: 2rem;
63
+ border-top: 1px solid #334155;
64
+ color: #94A3B8;
65
+ }
66
+ @media (max-width: 768px) {
67
+ .footer-container {
68
+ grid-template-columns: 1fr;
69
+ }
70
+ }
71
+ </style>
72
+ <footer>
73
+ <div class="footer-container">
74
+ <div class="footer-section">
75
+ <h3>Mohammad Rabi Ul Hadi</h3>
76
+ <p>Computer Science Engineer with a passion for data science, algorithms, and building impactful solutions.</p>
77
+ <div class="social-links">
78
+ <a href="https://www.linkedin.com/in/mohammad-rabi-ul-hadi" target="_blank" rel="noopener noreferrer"><i data-feather="linkedin"></i></a>
79
+ <a href="https://github.com/morhadi" target="_blank" rel="noopener noreferrer"><i data-feather="github"></i></a>
80
+ <a href="mailto:muhdhadiezio@gmail.com"><i data-feather="mail"></i></a>
81
+ <a href="https://leetcode.com/u/morhadi/" target="_blank" rel="noopener noreferrer"><i data-feather="code"></i></a>
82
+ <a href="https://codeforces.com/profile/morhadi" target="_blank" rel="noopener noreferrer"><i data-feather="cpu"></i></a>
83
+ <a href="https://www.codechef.com/users/morhadi" target="_blank" rel="noopener noreferrer"><i data-feather="terminal"></i></a>
84
+ </div>
85
+ </div>
86
+ <div class="footer-section">
87
+ <h3>Quick Links</h3>
88
+ <ul>
89
+ <li><a href="#hero">Home</a></li>
90
+ <li><a href="#about">About</a></li>
91
+ <li><a href="#education">Education</a></li>
92
+ <li><a href="#experience">Experience</a></li>
93
+ <li><a href="#projects">Projects</a></li>
94
+ </ul>
95
+ </div>
96
+ <div class="footer-section">
97
+ <h3>Contact</h3>
98
+ <ul>
99
+ <li><a href="mailto:muhdhadiezio@gmail.com">muhdhadiezio@gmail.com</a></li>
100
+ <li><a href="tel:+919541145275">+91 9541145275</a></li>
101
+ <li>Srinagar, Jammu & Kashmir</li>
102
+ </ul>
103
+ </div>
104
+ </div>
105
+ <div class="copyright">
106
+ &copy; ${new Date().getFullYear()} Mohammad Rabi Ul Hadi. All rights reserved.
107
+ </div>
108
+ </footer>
109
+ `;
110
+
111
+ // Initialize feather icons
112
+ feather.replace();
113
+ }
114
+ }
115
+
116
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background-color: white;
8
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
9
+ position: fixed;
10
+ width: 100%;
11
+ top: 0;
12
+ z-index: 1000;
13
+ }
14
+ .nav-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 1rem 2rem;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ }
22
+ .logo {
23
+ font-size: 1.5rem;
24
+ font-weight: 700;
25
+ color: #3B82F6;
26
+ text-decoration: none;
27
+ }
28
+ .nav-links {
29
+ display: flex;
30
+ gap: 2rem;
31
+ }
32
+ .nav-links a {
33
+ color: #1E293B;
34
+ text-decoration: none;
35
+ font-weight: 500;
36
+ transition: color 0.3s;
37
+ position: relative;
38
+ }
39
+ .nav-links a:hover {
40
+ color: #3B82F6;
41
+ }
42
+ .nav-links a.active {
43
+ color: #3B82F6;
44
+ }
45
+ .nav-links a.active::after {
46
+ content: '';
47
+ position: absolute;
48
+ bottom: -5px;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 2px;
52
+ background-color: #3B82F6;
53
+ }
54
+ .mobile-menu-btn {
55
+ display: none;
56
+ background: none;
57
+ border: none;
58
+ cursor: pointer;
59
+ }
60
+ @media (max-width: 768px) {
61
+ .nav-links {
62
+ display: none;
63
+ flex-direction: column;
64
+ position: absolute;
65
+ top: 70px;
66
+ left: 0;
67
+ width: 100%;
68
+ background-color: white;
69
+ padding: 1rem;
70
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
71
+ }
72
+ .nav-links.show {
73
+ display: flex;
74
+ }
75
+ .mobile-menu-btn {
76
+ display: block;
77
+ }
78
+ }
79
+ </style>
80
+ <nav>
81
+ <div class="nav-container">
82
+ <a href="#" class="logo">Hadi</a>
83
+ <button class="mobile-menu-btn">
84
+ <i data-feather="menu"></i>
85
+ </button>
86
+ <div class="nav-links">
87
+ <a href="#hero">Home</a>
88
+ <a href="#about">About</a>
89
+ <a href="#education">Education</a>
90
+ <a href="#experience">Experience</a>
91
+ <a href="#projects">Projects</a>
92
+ <a href="#skills">Skills</a>
93
+ <a href="#achievements">Achievements</a>
94
+ </div>
95
+ </div>
96
+ </nav>
97
+ `;
98
+
99
+ // Mobile menu toggle
100
+ const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
101
+ const navLinks = this.shadowRoot.querySelector('.nav-links');
102
+
103
+ mobileMenuBtn.addEventListener('click', () => {
104
+ navLinks.classList.toggle('show');
105
+ });
106
+
107
+ // Close mobile menu when clicking a link
108
+ this.shadowRoot.querySelectorAll('.nav-links a').forEach(link => {
109
+ link.addEventListener('click', () => {
110
+ navLinks.classList.remove('show');
111
+ });
112
+ });
113
+
114
+ // Initialize feather icons
115
+ feather.replace();
116
+ }
117
+ }
118
+
119
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,352 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mohammad Rabi Ul Hadi | Portfolio</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#3B82F6',
19
+ secondary: '#10B981',
20
+ dark: '#1E293B',
21
+ light: '#F8FAFC'
22
+ }
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ </head>
28
+ <body class="bg-light text-dark font-sans antialiased">
29
+ <custom-navbar></custom-navbar>
30
+
31
+ <main class="container mx-auto px-4 py-12 max-w-6xl">
32
+ <!-- Hero Section -->
33
+ <section id="hero" class="min-h-[80vh] flex flex-col justify-center items-center text-center mb-20">
34
+ <div class="w-32 h-32 rounded-full bg-gradient-to-br from-primary to-secondary mb-6 overflow-hidden">
35
+ <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
36
+ </div>
37
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Mohammad Rabi Ul Hadi</h1>
38
+ <h2 class="text-xl md:text-2xl text-gray-600 mb-6">Computer Science Engineer | Data Science Enthusiast</h2>
39
+ <div class="flex flex-wrap justify-center gap-4 mb-8">
40
+ <a href="mailto:muhdhadiezio@gmail.com" class="flex items-center gap-2 px-4 py-2 bg-white rounded-full shadow-md hover:shadow-lg transition">
41
+ <i data-feather="mail"></i> muhdhadiezio@gmail.com
42
+ </a>
43
+ <a href="tel:+919541145275" class="flex items-center gap-2 px-4 py-2 bg-white rounded-full shadow-md hover:shadow-lg transition">
44
+ <i data-feather="phone"></i> +91 9541145275
45
+ </a>
46
+ </div>
47
+ <div class="flex gap-4">
48
+ <a href="https://www.linkedin.com/in/mohammad-rabi-ul-hadi" target="_blank" rel="noopener noreferrer" class="social-icon">
49
+ <i data-feather="linkedin"></i>
50
+ </a>
51
+ <a href="https://github.com/morhadi" target="_blank" rel="noopener noreferrer" class="social-icon">
52
+ <i data-feather="github"></i>
53
+ </a>
54
+ <a href="https://morhadi.github.io/" target="_blank" rel="noopener noreferrer" class="social-icon">
55
+ <i data-feather="globe"></i>
56
+ </a>
57
+ <a href="https://leetcode.com/u/morhadi/" target="_blank" rel="noopener noreferrer" class="social-icon">
58
+ <i data-feather="code"></i>
59
+ </a>
60
+ <a href="https://codeforces.com/profile/morhadi" target="_blank" rel="noopener noreferrer" class="social-icon">
61
+ <i data-feather="cpu"></i>
62
+ </a>
63
+ <a href="https://www.codechef.com/users/morhadi" target="_blank" rel="noopener noreferrer" class="social-icon">
64
+ <i data-feather="terminal"></i>
65
+ </a>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- About Section -->
70
+ <section id="about" class="mb-20">
71
+ <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2>
72
+ <div class="bg-white rounded-xl shadow-lg p-8">
73
+ <p class="text-lg leading-relaxed mb-6">
74
+ Computer Science undergraduate at NIT Srinagar with a passion for data science, algorithms, and building impactful solutions.
75
+ Experienced in developing data-driven applications and optimizing system performance.
76
+ </p>
77
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
78
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
79
+ <div class="text-primary text-2xl font-bold">700+</div>
80
+ <div class="text-gray-600">Problems Solved</div>
81
+ </div>
82
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
83
+ <div class="text-primary text-2xl font-bold">5+</div>
84
+ <div class="text-gray-600">Projects</div>
85
+ </div>
86
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
87
+ <div class="text-primary text-2xl font-bold">3</div>
88
+ <div class="text-gray-600">Internships</div>
89
+ </div>
90
+ <div class="bg-gray-50 p-4 rounded-lg text-center">
91
+ <div class="text-primary text-2xl font-bold">1750+</div>
92
+ <div class="text-gray-600">LeetCode Rating</div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </section>
97
+
98
+ <!-- Education Section -->
99
+ <section id="education" class="mb-20">
100
+ <h2 class="text-3xl font-bold mb-8 text-center">Education</h2>
101
+ <div class="space-y-6">
102
+ <div class="bg-white rounded-xl shadow-lg p-6">
103
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
104
+ <h3 class="text-xl font-bold">National Institute of Technology, Srinagar</h3>
105
+ <span class="text-secondary font-medium">Nov 2022 – May 2026 (expected)</span>
106
+ </div>
107
+ <p class="text-gray-600 mb-2">Bachelor of Technology in Computer Science & Engineering</p>
108
+ <p class="text-gray-600">CGPA: 7.9</p>
109
+ </div>
110
+ <div class="bg-white rounded-xl shadow-lg p-6">
111
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
112
+ <h3 class="text-xl font-bold">Army Public School, Bangalore</h3>
113
+ <span class="text-secondary font-medium">Mar 2015 – Mar 2019</span>
114
+ </div>
115
+ <p class="text-gray-600">Secondary Education: 96%</p>
116
+ </div>
117
+ </div>
118
+ </section>
119
+
120
+ <!-- Experience Section -->
121
+ <section id="experience" class="mb-20">
122
+ <h2 class="text-3xl font-bold mb-8 text-center">Experience</h2>
123
+ <div class="space-y-6">
124
+ <div class="bg-white rounded-xl shadow-lg p-6">
125
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
126
+ <h3 class="text-xl font-bold">Infosys - Specialist Programmer (Incoming)</h3>
127
+ <span class="text-secondary font-medium">July 2026</span>
128
+ </div>
129
+ <ul class="list-disc pl-5 space-y-2">
130
+ <li>Selected through a rigorous vetting process focusing on advanced Data Structures and Algorithms.</li>
131
+ </ul>
132
+ </div>
133
+ <div class="bg-white rounded-xl shadow-lg p-6">
134
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
135
+ <h3 class="text-xl font-bold">Sagacious Elevate - Patent Analyst Intern (Incoming)</h3>
136
+ <span class="text-secondary font-medium">Feb 2026</span>
137
+ </div>
138
+ <ul class="list-disc pl-5 space-y-2">
139
+ <li>Incoming intern in the patent analytics and intellectual property research team.</li>
140
+ </ul>
141
+ </div>
142
+ <div class="bg-white rounded-xl shadow-lg p-6">
143
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
144
+ <h3 class="text-xl font-bold">Health Imaging & Pharmaceuticals - Data Science Intern</h3>
145
+ <span class="text-secondary font-medium">Jan - Feb 2025</span>
146
+ </div>
147
+ <ul class="list-disc pl-5 space-y-2">
148
+ <li>Developed sales projection models and analyzed demand patterns to inform inventory management strategies.</li>
149
+ <li>Identified potential for inventory cost reduction.</li>
150
+ <li>Gained practical experience in data analysis using Python, scikit-learn, and other relevant libraries in a corporate setting without a pre-existing database infrastructure.</li>
151
+ </ul>
152
+ </div>
153
+ <div class="bg-white rounded-xl shadow-lg p-6">
154
+ <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-4">
155
+ <h3 class="text-xl font-bold">Hacktoberfest - Open Source Developer</h3>
156
+ <span class="text-secondary font-medium">October 2023</span>
157
+ </div>
158
+ <ul class="list-disc pl-5 space-y-2">
159
+ <li>Successfully merged over 5 pull requests into production for various open-source projects.</li>
160
+ <li>Enhanced skills in collaborative development workflows using Git and GitHub.</li>
161
+ </ul>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Projects Section -->
167
+ <section id="projects" class="mb-20">
168
+ <h2 class="text-3xl font-bold mb-8 text-center">Projects</h2>
169
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
170
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
171
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
172
+ <i data-feather="code" class="text-white w-16 h-16"></i>
173
+ </div>
174
+ <div class="p-6">
175
+ <h3 class="text-xl font-bold mb-2">Bloom Filter for URL Verification</h3>
176
+ <p class="text-gray-600 mb-4">C++ implementation demonstrating memory efficiency and performance optimization.</p>
177
+ <div class="flex flex-wrap gap-2 mb-4">
178
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">C++</span>
179
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Algorithms</span>
180
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Optimization</span>
181
+ </div>
182
+ <a href="#" class="text-primary font-medium flex items-center gap-2">
183
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
184
+ </a>
185
+ </div>
186
+ </div>
187
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
188
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
189
+ <i data-feather="message-square" class="text-white w-16 h-16"></i>
190
+ </div>
191
+ <div class="p-6">
192
+ <h3 class="text-xl font-bold mb-2">RAG-Med: Medical Query Chatbot</h3>
193
+ <p class="text-gray-600 mb-4">Python, LangChain, Streamlit based medical information retrieval system.</p>
194
+ <div class="flex flex-wrap gap-2 mb-4">
195
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Python</span>
196
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">NLP</span>
197
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">AI</span>
198
+ </div>
199
+ <a href="#" class="text-primary font-medium flex items-center gap-2">
200
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
201
+ </a>
202
+ </div>
203
+ </div>
204
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
205
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
206
+ <i data-feather="pie-chart" class="text-white w-16 h-16"></i>
207
+ </div>
208
+ <div class="p-6">
209
+ <h3 class="text-xl font-bold mb-2">Mutual Fund Allocation Tracker</h3>
210
+ <p class="text-gray-600 mb-4">Python framework for automated data processing and financial insights.</p>
211
+ <div class="flex flex-wrap gap-2 mb-4">
212
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Python</span>
213
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Finance</span>
214
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Data Analysis</span>
215
+ </div>
216
+ <a href="#" class="text-primary font-medium flex items-center gap-2">
217
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
218
+ </a>
219
+ </div>
220
+ </div>
221
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
222
+ <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
223
+ <i data-feather="monitor" class="text-white w-16 h-16"></i>
224
+ </div>
225
+ <div class="p-6">
226
+ <h3 class="text-xl font-bold mb-2">DSA Visualization Tool</h3>
227
+ <p class="text-gray-600 mb-4">Interactive website to visualize data structure and algorithm solutions.</p>
228
+ <div class="flex flex-wrap gap-2 mb-4">
229
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">JavaScript</span>
230
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">DSA</span>
231
+ <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">Visualization</span>
232
+ </div>
233
+ <a href="#" class="text-primary font-medium flex items-center gap-2">
234
+ View Project <i data-feather="arrow-right" class="w-4 h-4"></i>
235
+ </a>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Skills Section -->
242
+ <section id="skills" class="mb-20">
243
+ <h2 class="text-3xl font-bold mb-8 text-center">Skills</h2>
244
+ <div class="bg-white rounded-xl shadow-lg p-8">
245
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
246
+ <div>
247
+ <h3 class="text-xl font-bold mb-4 text-primary">Languages</h3>
248
+ <ul class="space-y-2">
249
+ <li class="flex items-center gap-2">
250
+ <i data-feather="check" class="text-secondary"></i> C++
251
+ </li>
252
+ <li class="flex items-center gap-2">
253
+ <i data-feather="check" class="text-secondary"></i> Python
254
+ </li>
255
+ <li class="flex items-center gap-2">
256
+ <i data-feather="check" class="text-secondary"></i> JavaScript
257
+ </li>
258
+ <li class="flex items-center gap-2">
259
+ <i data-feather="check" class="text-secondary"></i> Assembly
260
+ </li>
261
+ <li class="flex items-center gap-2">
262
+ <i data-feather="check" class="text-secondary"></i> HTML5/CSS3
263
+ </li>
264
+ <li class="flex items-center gap-2">
265
+ <i data-feather="check" class="text-secondary"></i> SQL
266
+ </li>
267
+ </ul>
268
+ </div>
269
+ <div>
270
+ <h3 class="text-xl font-bold mb-4 text-primary">Libraries/Frameworks</h3>
271
+ <ul class="space-y-2">
272
+ <li class="flex items-center gap-2">
273
+ <i data-feather="check" class="text-secondary"></i> Pandas
274
+ </li>
275
+ <li class="flex items-center gap-2">
276
+ <i data-feather="check" class="text-secondary"></i> Numpy
277
+ </li>
278
+ <li class="flex items-center gap-2">
279
+ <i data-feather="check" class="text-secondary"></i> Matplotlib
280
+ </li>
281
+ <li class="flex items-center gap-2">
282
+ <i data-feather="check" class="text-secondary"></i> Seaborn
283
+ </li>
284
+ <li class="flex items-center gap-2">
285
+ <i data-feather="check" class="text-secondary"></i> Ncurses
286
+ </li>
287
+ </ul>
288
+ </div>
289
+ <div>
290
+ <h3 class="text-xl font-bold mb-4 text-primary">Tools/Platforms</h3>
291
+ <ul class="space-y-2">
292
+ <li class="flex items-center gap-2">
293
+ <i data-feather="check" class="text-secondary"></i> Git/GitHub
294
+ </li>
295
+ <li class="flex items-center gap-2">
296
+ <i data-feather="check" class="text-secondary"></i> OracleSQL
297
+ </li>
298
+ <li class="flex items-center gap-2">
299
+ <i data-feather="check" class="text-secondary"></i> Docker
300
+ </li>
301
+ <li class="flex items-center gap-2">
302
+ <i data-feather="check" class="text-secondary"></i> Linux
303
+ </li>
304
+ </ul>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+
310
+ <!-- Achievements Section -->
311
+ <section id="achievements" class="mb-20">
312
+ <h2 class="text-3xl font-bold mb-8 text-center">Achievements</h2>
313
+ <div class="bg-white rounded-xl shadow-lg p-8">
314
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
315
+ <div class="p-4 border-l-4 border-primary bg-gray-50 rounded-r-lg">
316
+ <h3 class="text-xl font-bold mb-2">Competitive Programming</h3>
317
+ <ul class="list-disc pl-5 space-y-1">
318
+ <li>Qualified for ICPC Regionals, representing my college</li>
319
+ <li>Competed in 100+ coding contests, solving 700+ coding problems</li>
320
+ <li>Rated 1750+ on LeetCode and ∼1500 on CodeChef</li>
321
+ </ul>
322
+ </div>
323
+ <div class="p-4 border-l-4 border-primary bg-gray-50 rounded-r-lg">
324
+ <h3 class="text-xl font-bold mb-2">Hackathons & Competitions</h3>
325
+ <ul class="list-disc pl-5 space-y-1">
326
+ <li>Ranked 1st in NIT Srinagar Programming Contest (CodeFest)</li>
327
+ <li>2nd Prize at Coding Hackathon, IUST</li>
328
+ <li>3rd Prize at the BIS Project Showcase</li>
329
+ </ul>
330
+ </div>
331
+ <div class="p-4 border-l-4 border-primary bg-gray-50 rounded-r-lg">
332
+ <h3 class="text-xl font-bold mb-2">Academic Excellence</h3>
333
+ <ul class="list-disc pl-5 space-y-1">
334
+ <li>Achieved top 2.4% percentile in JEE Mains</li>
335
+ <li>Qualified multiple Olympiads and NTSE</li>
336
+ <li>Ranked 1st in the Times NIE Think and Learn Challenge</li>
337
+ </ul>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </section>
342
+ </main>
343
+
344
+ <custom-footer></custom-footer>
345
+
346
+ <script src="script.js"></script>
347
+ <script>
348
+ feather.replace();
349
+ </script>
350
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
351
+ </body>
352
+ </html>
script.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Smooth scrolling for anchor links
3
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4
+ anchor.addEventListener('click', function (e) {
5
+ e.preventDefault();
6
+
7
+ const targetId = this.getAttribute('href');
8
+ if (targetId === '#') return;
9
+
10
+ const targetElement = document.querySelector(targetId);
11
+ if (targetElement) {
12
+ targetElement.scrollIntoView({
13
+ behavior: 'smooth'
14
+ });
15
+ }
16
+ });
17
+ });
18
+
19
+ // Active nav link highlighting
20
+ const sections = document.querySelectorAll('section');
21
+ const navLinks = document.querySelectorAll('nav a');
22
+
23
+ window.addEventListener('scroll', () => {
24
+ let current = '';
25
+
26
+ sections.forEach(section => {
27
+ const sectionTop = section.offsetTop;
28
+ const sectionHeight = section.clientHeight;
29
+
30
+ if (pageYOffset >= (sectionTop - 300)) {
31
+ current = section.getAttribute('id');
32
+ }
33
+ });
34
+
35
+ navLinks.forEach(link => {
36
+ link.classList.remove('active');
37
+ if (link.getAttribute('href') === `#${current}`) {
38
+ link.classList.add('active');
39
+ }
40
+ });
41
+ });
42
+ });
style.css CHANGED
@@ -1,28 +1,48 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ line-height: 1.6;
6
+ }
7
+ .social-icon {
8
+ width: 40px;
9
+ height: 40px;
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ background-color: white;
14
+ border-radius: 50%;
15
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ transition: all 0.3s ease;
17
+ margin: 0 5px;
18
+ }
19
+ .social-icon:hover {
20
+ transform: translateY(-3px);
21
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
22
  }
23
 
24
+ .social-icon i {
25
+ color: #3B82F6;
 
26
  }
27
 
28
+ section {
29
+ scroll-margin-top: 100px;
 
 
 
30
  }
31
 
32
+ /* Custom scrollbar */
33
+ ::-webkit-scrollbar {
34
+ width: 8px;
 
 
 
35
  }
36
 
37
+ ::-webkit-scrollbar-track {
38
+ background: #f1f1f1;
39
  }
40
+
41
+ ::-webkit-scrollbar-thumb {
42
+ background: #3B82F6;
43
+ border-radius: 4px;
44
+ }
45
+
46
+ ::-webkit-scrollbar-thumb:hover {
47
+ background: #2563EB;
48
+ }