-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (134 loc) · 8.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mushkir Portfolio</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<!-- Font Awesome Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- External CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- Header Section -->
<div class="container-fluid header-container">
<header>
<div class="container py-4">
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Name Section -->
<a class="navbar-brand fw-bold fs-3" href="./index.html" title="Home">Mushkir</a>
<!-- Responsive Toggle Button -->
<button class="navbar-toggler fs-6" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto m-2 mb-lg-0">
<li class="nav-item me-3">
<a class="nav-link active text-white text-end ps-3 pe-3" aria-current="page"
href="./index.html">Home</a>
</li>
<li class="nav-item me-3">
<a class="nav-link text-white text-end ps-3 pe-3" href="#">About</a>
</li>
<li class="nav-item me-3">
<a class="nav-link text-white text-end ps-3 pe-3" href="#">Services</a>
</li>
<li class="nav-item me-3">
<a class="nav-link text-white text-end ps-3 pe-3" href="#">View Source</a>
</li>
<li class="nav-item me-3">
<a class="nav-link text-white text-end ps-3 pe-3" href="#">Contact</a>
</li>
<li class="nav-item me-3 ps-3">
<a class="download-btn btn nav-link text-white text-end ps-3 pe-3"
href="./assets/resume/Mushkir Resume.pdf" download><i
class="fa-solid fa-download"></i>  Download CV</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div class="container margin-top">
<img src="./assets/img/mohamedmushkir.jpeg"
class="rounded mx-auto d-block rounded-circle border border-danger border border-3" alt="Mushkir Image"
style="width: 10rem;">
<h1 class="text-center text-light mt-4">Mohamed <span class="text-danger">Mushkir</span></h1>
<div class="d-inline">
<p class="hero para text-center text-light fs-6 overflow-hidden">A Passionate <span
class="text-danger">Full Stack
Developer</span></p>
</div>
<div class="social-media fs-3 text-center">
<a href="https://www.linkedin.com/in/mohamed-mushkir" title="LinkedIn" target="_blank"><i
class="fa-brands fa-linkedin-in text-white p-2 rounded-circle"></i></a>
<a href="https://github.com/Mushkir" title="GitHub" target="_blank"> <i
class="fa-brands fa-github text-white p-2 rounded-circle"></i></a>
<a href="https://www.instagram.com/mushkir_9611" title="Instagram" target="_blank"><i
class="fa-brands fa-instagram text-white p-2 rounded-circle"></i></a>
</div>
</div>
</div>
<!-- End of Header Section -->
<!-- About Section -->
<div class="container-fluid py-5 px-4 pe-0 ps-0 bg-dark">
<div class="container p-0 mt-0 mb-0">
<div class="card m-3 bg-transparent border border-0">
<div class="row g-0 d-flex align-items-center d-flex justify-content-between">
<!-- Image Section -->
<div class="col-sm-5 col-md-4 col-lg-3 mx-auto less-than-575px">
<img src="./assets/img/mushkir.jpeg" style="width: 18.75rem;"
class="border border-danger border img-fluid border-4 rounded-circle mx-auto less-than-576px"
alt="Mushkir Image">
</div>
<!-- About Me Section -->
<div class="col-sm-12 col-md-8 col-lg-7">
<div class="card-body">
<h5 class="card-title letter-space text-secondary fw-normal">Discover</h5>
<h2 class="card-title text-white letter-space">About <span class="text-danger">Me</span>
</h2>
<p class="card-text letter-space text-secondary" style="text-align: justify;">I'm Mushkir, a
dedicated full-stack developer based in the
picturesque island of Sri Lanka. I am
currently engaged as an intern Full Stack Engineer at <a
href="https://cyberdudenetworks.com/"
class="cdn-link text-secondary text-decoration-none" title="Visit CyberDude Site"
target="_blank">CyberDude Networks Pvt. Ltd</a> in the
vibrant city of
Chennai, Tamil Nadu. I firmly believe in my ability to craft exceptional and premium
websites.
</p>
<div class="card bg-transparent border border-danger">
<div class="card-body d-flex align-items-center">
<i class="fa-solid fa-envelope text-danger me-2"></i>
<span class="text-white me-3 font-size-14px">Email:</span>
<a href="mailto:mushkirmohamed@gmail.com"
class="font-size-14px text-secondary text-decoration-none">mushkirmohamed@gmail.com</a>
</div>
<div class="card-body d-flex align-items-center">
<i class="fa-solid fa-phone text-danger me-2"></i>
<span class="text-white me-3 font-size-14px">Phone:</span>
<a href="tel:+94777195282" class="font-size-14px text-secondary text-decoration-none">+94
777195282</a>
</div>
<div class="card-body d-flex align-items-center">
<i class="fa-solid fa-address-book text-danger me-2"></i>
<span class="text-white me-3 font-size-14px">Address:</span>
<span class="font-size-14px text-secondary">Sri Lanka</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./assets/js/bootstrap.min.js"></script>
</body>
</html>