-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (156 loc) · 10.4 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
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Porfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/portfolio.css">
<script src="https://kit.fontawesome.com/680ae013cc.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<nav>
<h3 class="nav-title">Ma<span class="text-primary">r</span>uf</h3>
<ul>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><button class="btn-primary">Hire Me</button></li>
</ul>
</nav>
<div class="banner">
<div class="banner-content">
<h3 class="banner-greeting">Hi, I am</h3>
<h1 class="banner-title">Md Abdullah Al Maruf</h1>
<p class="banner-description" style="text-align: justify;">A passionate frontend developer from Bangladesh, Elevating Mobile Development with Flutter</p>
<button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
<button class="btn-primary1"><i class="fa-solid fa-phone"></i> Contact</button>
</div>
<img class="profile" src="images/IMG_20230108_114436.png" alt="">
</div>
</header>
<main>
<section class="about">
<h3 class="section-title">About Me</h3>
<p class="section-description">Hello! I'm Maruf, a Computer Science and Engineering student at Daffodil International University. With a strong academic background and diverse experiences, I am passionate about technology, problem-solving, and making a positive impact in the world. I enjoy exploring new hobbies, reading, and staying updated with technological advancements.</p>
<div class="about-info-container">
<div class="about-info">
<h4 class="info-title">Name</h4>
<p class="info-description">MD. Abdullah Al Maruf</p>
</div>
<div class="about-info">
<h4 class="info-title">E-mail</h4>
<p class="info-description">abdullahalmaruf1235@gmail.com</p>
</div>
<div class="about-info">
<h4 class="info-title">Date of Birth</h4>
<p class="info-description">27 December,2003</p>
</div>
<div class="about-info">
<h4 class="info-title">From</h4>
<p class="info-description">Dhaka,Bangladesh</p>
</div>
</div>
</section>
<!-- what i do section start -->
<section>
<h3 class="section-title">What I do</h3>
<p id="what-i-do-description" class="section-description">I have more than 1.5 years experience building software for clients all over the world. Below is a quick overview of my main technical skill sets and technologies i use. Want to find out more about my experience? Check out my online resume and project portfolio.</p>
<div class="skill-container">
<div class="skill">
<img src="images/icons/js.png" alt="">
<h3 class="skill-title">Vanilla JavaScript</h3>
<p class="skill-description">Here's a short description of your skill:
"I'm well-versed in the fundamentals of Vanilla JavaScript, with a strong grasp of core concepts and best practices. My excitement and curiosity continually push me to explore further and enhance my web development expertise."</p>
</div>
<div class="skill">
<img src="images/icons/react.png" alt="">
<h3 class="skill-title">React</h3>
<p class="skill-description">I'm well-versed in the fundamentals of React, with a strong grasp of core concepts and best practices. My excitement and curiosity continually push me to explore further and enhance my web development expertise.</p>
</div>
<div class="skill">
<img src="images/icons/nodejs.png" alt="">
<h3 class="skill-title">Node.js</h3>
<p class="skill-description">I'm well-versed in the fundamentals of Node.js, with a strong grasp of building server-side applications and understanding its core principles. My enthusiasm and curiosity motivate me to continuously deepen my knowledge and expand my back-end development skills.</p>
</div>
<div class="skill">
<img src="images/icons/mongo.png" alt="">
<h3 class="skill-title">MongoDB</h3>
<p class="skill-description">I'm well-versed in the fundamentals of MongoDB, with a solid understanding of its core concepts such as document-oriented design, schema flexibility, and CRUD operations. My curiosity and excitement drive me to further explore database management and optimization techniques to enhance my full-stack development capabilities.</p>
</div>
</div>
</section>
<!-- Resume section -->
<section>
<h3 class="section-title">A summary of My Resume</h3>
<div class="resume-container">
<div class="resume-column">
<h3 class="resume-column-title">My Education</h3>
<div class="resume-items">
<h2 class="resume-item-title">Bachelor in Computer Engineering</h2>
<h3 class="resume-item-institute">Daffofil International University</h3>
<p class="resume-item-description">I am a student at Daffodil International University, pursuing a degree in Computer Science and Engineering since 2023. My academic journey is complemented by my strong interest and skills in software development, particularly in areas like Flutter ,JavaScript, React, Node.js, and MongoDB. My passion for learning and innovation fuels my drive to excel in the field of technology.</p>
</div>
<hr>
<div class="resume-items">
<h2 class="resume-item-title">Higher Secondary School Certificate</h2>
<h3 class="resume-item-institute">Notre Dame College, Mymensingh
<p class="resume-item-description">I completed my Higher Secondary School Certificate (HSC) at Notre Dame College, Mymensingh, which laid a strong foundation for my academic pursuits. This experience has been an essential part of my educational journey, leading me to further studies in Computer Science and Engineering at Daffodil International University.</p>
</div>
<hr>
<div class="resume-items">
<h2 class="resume-item-title">Secondary School Certificate</h2>
<h3 class="resume-item-institute">Government Laboratory High School, Mymensingh</h3>
<p class="resume-item-description">I was a student at Government Laboratory High School in Mymensingh, where I completed my Secondary School Certificate (SSC). This foundational education helped shape my academic path and sparked my interest in technology, leading me to pursue a degree in Computer Science and Engineering.</p>
</div>
</div>
<div class="resume-container">
<div class="resume-column">
<h3 class="resume-column-title">My Experience</h3>
<div class="resume-items">
<div class="resume-items">
<h2 class="resume-item-title">Front end Developer</h2>
<h3 class="resume-item-institute">In Dart and Flutter</h3>
<p class="resume-item-description">I have almost 1.5 years of experience working with Dart and Flutter, where I have gained strong expertise in building cross-platform mobile applications. My hands-on experience has allowed me to develop responsive and user-friendly UIs, while also mastering best practices for efficient app development.</p>
</div>
<hr>
<h2 class="resume-item-title">Master in Computer Engineering</h2>
<h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
<p class="resume-item-description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
<hr>
<div class="resume-items">
<h2 class="resume-item-title">Master in Computer Engineering</h2>
<h3 class="resume-item-institute">Harvard University / 2015 - 2017</h3>
<p class="resume-item-description">List skill/technologies here. You can change the icon above
to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</section>
<div class="download-cv">
<button class="btn-primary"><i class="fa-solid fa-download"></i> Download CV</button>
</div>
</main>
<footer>
<div class="footer-column"><h3 class="section-title">Let's Connect</h3>
<p class="section-description">Please fill out the form on this section to contact with me or call between 9:00 A.M and 8.00 P.M ET, Monday through Friday.</p>
<div class="social-links">
<a href="https://www.facebook.com/mdabdullahalmaruf34/" target="_blank"><img src="images/icons/facebook.png" alt=""></a>
<a href="#"><img src="images/icons/twitter.png" alt=""></a>
<a href="#"><img src="images/icons/insta.png" alt=""></a>
</div>
</div>
<div class="footer-column"><h3 class="section-title">Let's Message me</h3>
<form class="contact" action="">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your E-mail">
<textarea class="textarea" placeholder="Message...." ></textarea>
<input class="btn-primary" type="submit" value="Submit">
</form>
</div>
</footer>
</body>
</html>