-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (134 loc) · 8.78 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mufaddal Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
<!-- Iconify Icons -->
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">
<!-- <img src="images/????" alt=""> Logo image source for future -->
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">Skills</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">Projects</a></li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Hi, I'm <strong>Mufaddal Naguthanawala</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">full stack dev</p>
<img src="images/profile_1.jpg" alt="a picture of Mufaddal" class="intro__img">
</section>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">Technical Skills</h2>
<div class="services">
<div class="service">
<ul class="skill-list">
<li><span class="iconify" data-icon="vscode-icons:file-type-html" data-inline="false" data-width="90px" data-height="90px"></span><span>HTML</span></li>
<li><span class="iconify" data-icon="vscode-icons:file-type-css" data-inline="false" data-width="90px" data-height="90px"></span><span>CSS</span></li>
<li><span class="iconify" data-icon="logos:javascript" data-inline="false" data-width="90px" data-height="90px"></span><span>JavaScript</span></li>
<li><span class="iconify" data-icon="logos:react" data-inline="false" data-width="90px" data-height="90px"></span><span>React</span></li>
</ul>
</div>
<div class="service">
<ul class="skill-list">
<li><span class="iconify" data-icon="logos:python" data-inline="false" data-width="90px" data-height="90px"></span><span>Python</span></li>
<li><span class="iconify" data-icon="logos:java" data-inline="false" data-width="90px" data-height="90px"></span><span>Java</span></li>
</ul>
</div>
<div class="service">
<ul class="skill-list">
<li><span class="iconify" data-icon="logos:git-icon" data-inline="false" data-width="90px" data-height="90px"></span><span>Git</span></li>
<li><span class="iconify" data-icon="skill-icons:sqlite" data-inline="false" data-width="90px" data-height="90px"></span><span>SQLite</span></li>
</ul>
</div>
<div class="service">
<ul class="skill-list">
<li><span class="iconify" data-icon="skill-icons:flask-light" data-inline="false" data-width="90px" data-height="90px"></span><span>Flask</span></li>
<li><span class="iconify" data-icon="devicon-plain:django-wordmark" data-inline="false" data-width="90px" data-height="90px"></span><span>Django</span></li>
</ul>
</div>
</div>
<!-- / services -->
<a href="#work" class="btn">My Projects</a>
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">About Me</h2>
<p class="section__subtitle section__subtitle--about"> Healthcare Worker and Self-taught Developer</p>
<div class="about-me__body">
<p> I'm a dedicated software developer based in Seattle, and I hold a BS in Lab Medicine from the University of Washington, which I graduated from in 2022. Currently, I'm applying my skills and knowledge at the UW Medical Center, where I work in a Molecular Diagnostics lab. What sets me apart is my unique journey into programming – I'm self-taught with over a year of hands-on experience. </p>
<p> I am especially passionate about the intersection of healthcare and technology, where I see incredible potential to drive positive change in the world. Whether it's improving patient care, streamlining processes, or enhancing research, I'm committed to leveraging technology to make a meaningful impact in healthcare.</p>
</div>
<img src="images/profile_2.jpg" alt="Picture of Mufaddal" class="about-me__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">Projects</h2>
<p class="section__subtitle section__subtitle--work">Click on any project to view details</p>
<div class="portfolio">
<!-- Portfolio item 01 -->
<a href="sagedoku.html" class="portfolio__item">
<img src="images/sagedoku2.PNG" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>Sagedoku</h3></span>
</a>
<!-- Portfolio item 02 -->
<a href="CS50Finance.html" class="portfolio__item">
<img src="images/CS50Finance.PNG" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>CS50 Finance</h3></span>
</a>
<!-- Portfolio item 03 -->
<a href="network.html" class="portfolio__item">
<img src="images/network.PNG" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>Social Network</h3></span>
</a>
<!-- Portfolio item 04 -->
<a href="got-mail.html" class="portfolio__item">
<img src="images/mail.PNG" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>Mail</h3></span>
</a>
<!-- Portfolio item 05 -->
<a href="e-commerce.html" class="portfolio__item">
<img src="images/commerce.PNG" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>E-commerce</h3></span>
</a>
<!-- Portfolio item 06 -->
<a href="DSA.html" class="portfolio__item">
<img src="images/DSA.png" alt="" class="portfolio__img">
<span class="portfolio__text"><h3>Data Structures and Algorithms</h3></span>
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mailto:[email protected]" class="footer__link">[email protected]</a>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="https://github.com/muffymn"><i class="fab fa-github"></i></a>
</li> <!-- change up href links -->
<li class="social-list__item">
<a class="social-list__link" href="https://linkedin.com/in/mufaddal-naguthanawala-900592261/"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>