Hugging Face's logo

Spaces:
Haseeb-001
/
abdulhaseeb.com
Running

App Files Community
Haseeb-001 commited on
Commit
e102c1a
·
verified ·
1 Parent(s): 1d8d4ba

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +183 -100
style.css CHANGED
@@ -1,100 +1,183 @@
1
- <!DOCTYPE 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>Abdul Haseeb | AI Engineer</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
8
- <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
11
- <link rel="stylesheet" href="style.css">
12
- </head>
13
- <body>
14
- <!-- Hero Section -->
15
- <header class="hero">
16
- <nav class="container">
17
- <h1 class="logo">AH</h1>
18
- <div class="nav-links">
19
- <a href="#projects">Work</a>
20
- <a href="#skills">Expertise</a>
21
- <a href="#contact">Connect</a>
22
- </div>
23
- </nav>
24
-
25
- <div class="container hero-content">
26
- <div class="hero-text">
27
- <h1 class="animate__animated animate__fadeInDown">
28
- Transforming Data into
29
- <span class="gradient-text">Intelligence</span>
30
- </h1>
31
- <p class="subtitle">AI Engineer specializing in LLM architecture & generative systems</p>
32
- <div class="cta-container">
33
- <a href="#contact" class="cta-button">Build with Me →</a>
34
- </div>
35
- </div>
36
- </div>
37
- </header>
38
-
39
- <!-- Projects Section -->
40
- <section id="projects" class="container" data-aos="fade-up">
41
- <h2 class="section-title gradient-text">Signature Innovations</h2>
42
- <div class="projects-grid">
43
- <div class="project-card">
44
- <img src="https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b" alt="Medical AI">
45
- <h3>Medical Triage VoiceBot</h3>
46
- <p>WhisperAI + Med-PaLM 2 integration for real-time diagnostics</p>
47
- </div>
48
- <div class="project-card">
49
- <img src="https://images.unsplash.com/photo-1619410283995-43d9134e7656" alt="Code Generation">
50
- <h3>Code Architect AI</h3>
51
- <p>LLM-powered code generation with dynamic visualization</p>
52
- </div>
53
- <div class="project-card">
54
- <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485" alt="Crypto AI">
55
- <h3>Crypto Predictive Engine</h3>
56
- <p>Deep learning model for market trend forecasting</p>
57
- </div>
58
- </div>
59
- </section>
60
-
61
- <!-- Skills Section -->
62
- <section id="skills" class="dark-section" data-aos="fade-up">
63
- <div class="container">
64
- <h2 class="section-title gradient-text">Technical Arsenal</h2>
65
- <div class="skills-grid">
66
- <div class="skill-chip">Generative AI</div>
67
- <div class="skill-chip">LLM Architecture</div>
68
- <div class="skill-chip">PyTorch</div>
69
- <div class="skill-chip">Hugging Face</div>
70
- <div class="skill-chip">Python 3.11+</div>
71
- <div class="skill-chip">RASA Framework</div>
72
- <div class="skill-chip">Prompt Engineering</div>
73
- <div class="skill-chip">FAISS</div>
74
- </div>
75
- </div>
76
- </section>
77
-
78
- <!-- Contact Section -->
79
- <section id="contact" class="container" data-aos="zoom-in">
80
- <h2 class="section-title gradient-text">Collaborate with Me</h2>
81
- <p class="contact-sub">Open to AI research partnerships and innovative ventures</p>
82
- <div class="social-links">
83
- <a href="https://github.com/abdul-haseeb-0" target="_blank">
84
- <i class="fab fa-github"></i>
85
- </a>
86
- <a href="https://www.linkedin.com/in/abdul-haseeb-980075323/" target="_blank">
87
- <i class="fab fa-linkedin"></i>
88
- </a>
89
- <a href="https://leetcode.com/u/abdul-haseeb-0/" target="_blank">
90
- <i class="fas fa-code"></i>
91
- </a>
92
- </div>
93
- </section>
94
-
95
- <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
96
- <script>
97
- AOS.init({ duration: 1000, once: true });
98
- </script>
99
- </body>
100
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary: #00f5d4;
3
+ --secondary: #9d4edd;
4
+ --dark: #0a192f;
5
+ --light: #ccd6f6;
6
+ --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
7
+ }
8
+
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ background: var(--dark);
17
+ color: var(--light);
18
+ font-family: 'Inter', sans-serif;
19
+ line-height: 1.6;
20
+ overflow-x: hidden;
21
+ }
22
+
23
+ /* Hero Section */
24
+ .hero {
25
+ min-height: 100vh;
26
+ background: linear-gradient(45deg, rgba(10,25,47,0.95),
27
+ url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485') center/cover;
28
+ padding: 2rem 0;
29
+ }
30
+
31
+ .container {
32
+ max-width: 1200px;
33
+ margin: 0 auto;
34
+ padding: 0 2rem;
35
+ }
36
+
37
+ nav {
38
+ display: flex;
39
+ justify-content: space-between;
40
+ align-items: center;
41
+ padding: 1.5rem 0;
42
+ }
43
+
44
+ .logo {
45
+ font-size: 2rem;
46
+ font-weight: 700;
47
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
48
+ -webkit-background-clip: text;
49
+ -webkit-text-fill-color: transparent;
50
+ }
51
+
52
+ .nav-links {
53
+ display: flex;
54
+ gap: 2rem;
55
+ }
56
+
57
+ .nav-links a {
58
+ color: var(--light);
59
+ text-decoration: none;
60
+ transition: color 0.3s var(--easing);
61
+ }
62
+
63
+ .nav-links a:hover {
64
+ color: var(--primary);
65
+ }
66
+
67
+ .hero-content {
68
+ display: flex;
69
+ align-items: center;
70
+ min-height: calc(100vh - 100px);
71
+ }
72
+
73
+ .hero-text h1 {
74
+ font-size: 4rem;
75
+ margin-bottom: 1.5rem;
76
+ }
77
+
78
+ .gradient-text {
79
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
80
+ -webkit-background-clip: text;
81
+ -webkit-text-fill-color: transparent;
82
+ }
83
+
84
+ /* Projects Section */
85
+ .projects-grid {
86
+ display: grid;
87
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
88
+ gap: 2rem;
89
+ margin: 4rem 0;
90
+ }
91
+
92
+ .project-card {
93
+ background: #112240;
94
+ border-radius: 8px;
95
+ padding: 1.5rem;
96
+ transition: transform 0.3s var(--easing);
97
+ }
98
+
99
+ .project-card:hover {
100
+ transform: translateY(-10px);
101
+ }
102
+
103
+ .project-card img {
104
+ width: 100%;
105
+ height: 200px;
106
+ object-fit: cover;
107
+ border-radius: 4px;
108
+ margin-bottom: 1rem;
109
+ }
110
+
111
+ /* Skills Section */
112
+ .dark-section {
113
+ background: #020c1b;
114
+ padding: 4rem 0;
115
+ }
116
+
117
+ .skills-grid {
118
+ display: grid;
119
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
120
+ gap: 1rem;
121
+ margin-top: 2rem;
122
+ }
123
+
124
+ .skill-chip {
125
+ background: rgba(157,78,221,0.1);
126
+ border: 1px solid var(--secondary);
127
+ padding: 1rem;
128
+ border-radius: 50px;
129
+ text-align: center;
130
+ transition: all 0.3s var(--easing);
131
+ }
132
+
133
+ .skill-chip:hover {
134
+ background: var(--secondary);
135
+ transform: translateY(-3px);
136
+ }
137
+
138
+ /* Contact Section */
139
+ .social-links {
140
+ display: flex;
141
+ justify-content: center;
142
+ gap: 2rem;
143
+ margin: 3rem 0;
144
+ }
145
+
146
+ .social-links a {
147
+ width: 50px;
148
+ height: 50px;
149
+ border: 2px solid var(--primary);
150
+ border-radius: 50%;
151
+ display: flex;
152
+ align-items: center;
153
+ justify-content: center;
154
+ color: var(--primary);
155
+ transition: all 0.3s var(--easing);
156
+ }
157
+
158
+ .social-links a:hover {
159
+ background: var(--primary);
160
+ color: var(--dark);
161
+ }
162
+
163
+ /* Animations */
164
+ @keyframes float {
165
+ 0% { transform: translateY(0px); }
166
+ 50% { transform: translateY(-20px); }
167
+ 100% { transform: translateY(0px); }
168
+ }
169
+
170
+ /* Responsive Design */
171
+ @media (max-width: 768px) {
172
+ .hero-text h1 {
173
+ font-size: 2.5rem;
174
+ }
175
+
176
+ .projects-grid {
177
+ grid-template-columns: 1fr;
178
+ }
179
+
180
+ .nav-links {
181
+ gap: 1rem;
182
+ }
183
+ }