-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
194 lines (186 loc) · 9.14 KB
/
index.html
File metadata and controls
194 lines (186 loc) · 9.14 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
<!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="Fadeel Darkwa - Full-Stack Software Engineer Portfolio">
<title>Fadeel Darkwa | Full-Stack Engineer</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="#home" class="nav-logo">FD</a>
<ul class="nav-menu">
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#skills" class="nav-link">Skills</a></li>
<li><a href="#projects" class="nav-link">Projects</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title">Hi, I'm <span class="highlight">Fadeel Darkwa</span></h1>
<p class="hero-subtitle">Full-Stack Software Engineer</p>
<p class="hero-description">Building end-to-end solutions from database to deployment</p>
<div class="hero-buttons">
<a href="#projects" class="btn btn-primary">View Projects</a>
<a href="#contact" class="btn btn-secondary">Get In Touch</a>
</div>
<div class="social-links">
<a href="https://github.com/fadeel7" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="https://gh.linkedin.com/in/fadeel-darkwa-709b08230" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="mailto:fadeeldarkwa19@gmail.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="scroll-down">
<a href="#about"><i class="fas fa-chevron-down"></i></a>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="about-content">
<div class="about-text">
<p>On a mission to become a full-stack engineer who builds complete solutions from database to deployment. Learning by doing, shipping by iterating, and growing through every line of code written.</p>
<p><strong>Current Focus:</strong> Mastering the full spectrum—frontend polish, backend logic, cloud infrastructure, and everything in between.</p>
<div class="about-stats">
<div class="stat">
<h3>10+</h3>
<p>Technologies</p>
</div>
<div class="stat">
<h3>Multiple</h3>
<p>Projects</p>
</div>
<div class="stat">
<h3>Always</h3>
<p>Learning</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<div class="container">
<h2 class="section-title">Tech Stack</h2>
<div class="skills-grid">
<div class="skill-category">
<h3>Cloud & Backend</h3>
<div class="skill-items">
<span class="skill-tag"><i class="fab fa-aws"></i> AWS</span>
<span class="skill-tag"><i class="fab fa-python"></i> Python</span>
<span class="skill-tag"><i class="fab fa-node-js"></i> Node.js</span>
<span class="skill-tag"><i class="fab fa-java"></i> Java</span>
<span class="skill-tag"><i class="fas fa-cloud"></i> Lambda</span>
<span class="skill-tag"><i class="fas fa-database"></i> S3</span>
</div>
</div>
<div class="skill-category">
<h3>Frontend</h3>
<div class="skill-items">
<span class="skill-tag"><i class="fab fa-js"></i> JavaScript</span>
<span class="skill-tag"><i class="fab fa-react"></i> React</span>
<span class="skill-tag"><i class="fab fa-html5"></i> HTML5</span>
<span class="skill-tag"><i class="fab fa-css3-alt"></i> CSS3</span>
<span class="skill-tag"><i class="fab fa-js"></i> TypeScript</span>
</div>
</div>
<div class="skill-category">
<h3>DevOps & Tools</h3>
<div class="skill-items">
<span class="skill-tag"><i class="fab fa-git-alt"></i> Git</span>
<span class="skill-tag"><i class="fab fa-github"></i> GitHub</span>
<span class="skill-tag"><i class="fab fa-linux"></i> Linux</span>
<span class="skill-tag"><i class="fab fa-docker"></i> Docker</span>
<span class="skill-tag"><i class="fas fa-terminal"></i> Bash</span>
</div>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">Featured Projects</h2>
<div class="projects-grid">
<div class="project-card">
<div class="project-icon">
<i class="fas fa-server"></i>
</div>
<h3>AWS S3 Automated Backup System</h3>
<p>Event-driven disaster recovery solution with serverless architecture. Automatically backs up files across AWS regions using Lambda, S3, and SNS.</p>
<div class="project-tags">
<span>AWS Lambda</span>
<span>S3</span>
<span>Python</span>
<span>SNS</span>
</div>
<a href="https://github.com/fadeel7/aws-s3-automated-backup-system" target="_blank" class="project-link">View Project <i class="fas fa-external-link-alt"></i></a>
</div>
<div class="project-card">
<div class="project-icon">
<i class="fas fa-code"></i>
</div>
<h3>More Projects Coming Soon</h3>
<p>Currently building new full-stack applications. Check my GitHub for the latest updates and repositories.</p>
<div class="project-tags">
<span>React</span>
<span>Node.js</span>
<span>AWS</span>
</div>
<a href="https://github.com/fadeel7" target="_blank" class="project-link">View GitHub <i class="fas fa-external-link-alt"></i></a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<h2 class="section-title">Let's Connect</h2>
<p class="contact-subtitle">Always open to conversations about software engineering, architecture, or that bug you've been debugging for three hours.</p>
<div class="contact-grid">
<a href="mailto:fadeeldarkwa19@gmail.com" class="contact-card">
<i class="fas fa-envelope"></i>
<h3>Email</h3>
<p>fadeeldarkwa19@gmail.com</p>
</a>
<a href="https://gh.linkedin.com/in/fadeel-darkwa-709b08230" target="_blank" class="contact-card">
<i class="fab fa-linkedin"></i>
<h3>LinkedIn</h3>
<p>Connect with me</p>
</a>
<a href="https://github.com/fadeel7" target="_blank" class="contact-card">
<i class="fab fa-github"></i>
<h3>GitHub</h3>
<p>Check out my code</p>
</a>
</div>
<div class="location-info">
<i class="fas fa-map-marker-alt"></i>
<p>Based in North Carolina | Open to remote opportunities</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2026 Fadeel Darkwa. Built with passion and code.</p>
<p class="footer-quote">"Code is poetry written in logic."</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>