Skip to content

Commit e7f5e27

Browse files
smamransmamran
authored
Create index.html
0 parents  commit e7f5e27

1 file changed

Lines changed: 313 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
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>SM Amran - Professional Resume</title>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
<style>
10+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11+
body {
12+
font-family: 'Inter', sans-serif;
13+
background-color: #f0f2f5; /* Light gray background */
14+
display: flex;
15+
justify-content: center;
16+
align-items: flex-start;
17+
min-height: 100vh;
18+
padding: 1rem; /* Adjusted for mobile */
19+
box-sizing: border-box;
20+
}
21+
.resume-container {
22+
background-color: #ffffff;
23+
border-radius: 1rem; /* More rounded corners */
24+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Softer, larger shadow */
25+
max-width: 900px; /* Increased max-width for better layout */
26+
width: 100%;
27+
padding: 1.5rem 1rem; /* Adjusted for mobile */
28+
display: grid;
29+
grid-template-columns: 1fr;
30+
gap: 2rem;
31+
position: relative;
32+
}
33+
.section-title {
34+
position: relative;
35+
font-size: 1.5rem; /* Adjusted for mobile */
36+
font-weight: 700; /* font-bold */
37+
color: #1a202c; /* Text color */
38+
margin-bottom: 1rem;
39+
padding-bottom: 0.5rem;
40+
border-bottom: 3px solid #3b82f6; /* Blue underline */
41+
}
42+
.section-title::after {
43+
content: '';
44+
position: absolute;
45+
left: 0;
46+
bottom: -3px; /* Align with bottom of border */
47+
width: 50px; /* Short accent line */
48+
height: 3px;
49+
background-color: #3b82f6;
50+
}
51+
.contact-info p, .contact-info a {
52+
display: flex;
53+
align-items: center;
54+
margin-bottom: 0.5rem;
55+
color: #4a5568;
56+
word-break: break-word; /* Ensure long words break */
57+
}
58+
.contact-info i {
59+
margin-right: 0.75rem;
60+
color: #3b82f6;
61+
width: 1.25rem; /* Ensure consistent icon width */
62+
text-align: center;
63+
}
64+
.experience-item {
65+
display: flex;
66+
flex-direction: column; /* Stack on mobile */
67+
align-items: flex-start;
68+
margin-bottom: 1.5rem;
69+
}
70+
.company-logo {
71+
flex-shrink: 0;
72+
width: 3rem; /* Smaller logo on mobile */
73+
height: 3rem;
74+
border-radius: 0.75rem; /* More rounded corners for logo */
75+
background-color: #e2e8f0; /* Placeholder background */
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
margin-right: 0; /* Remove margin-right on mobile */
80+
margin-bottom: 1rem; /* Add margin-bottom on mobile */
81+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
82+
font-size: 1.5rem; /* Icon size */
83+
color: #3b82f6; /* Icon color */
84+
}
85+
.company-logo img {
86+
max-width: 100%;
87+
max-height: 100%;
88+
object-fit: contain;
89+
}
90+
.job-details {
91+
flex-grow: 1;
92+
width: 100%; /* Take full width on mobile */
93+
}
94+
.job-title {
95+
font-size: 1.125rem; /* text-lg on mobile */
96+
font-weight: 600; /* font-semibold */
97+
color: #2d3748;
98+
margin-bottom: 0.25rem;
99+
}
100+
.company-name {
101+
font-size: 0.9rem; /* Smaller on mobile */
102+
color: #4a5568;
103+
margin-bottom: 0.5rem;
104+
}
105+
.job-duration {
106+
font-size: 0.8rem; /* Smaller on mobile */
107+
color: #6b7280;
108+
margin-bottom: 1rem;
109+
}
110+
.job-description li {
111+
list-style-type: disc;
112+
margin-left: 1.25rem;
113+
margin-bottom: 0.5rem;
114+
color: #4a5568;
115+
}
116+
.skill-category {
117+
font-weight: 600;
118+
color: #2d3748;
119+
margin-bottom: 0.5rem;
120+
}
121+
.skill-list {
122+
display: flex;
123+
flex-wrap: wrap;
124+
gap: 0.5rem;
125+
}
126+
.skill-tag {
127+
background-color: #e0f2fe; /* Light blue */
128+
color: #1e40af; /* Darker blue text */
129+
padding: 0.3rem 0.8rem;
130+
border-radius: 0.5rem; /* Rounded corners */
131+
font-size: 0.8rem; /* Adjusted for mobile */
132+
font-weight: 500;
133+
}
134+
.portfolio-link {
135+
display: inline-flex;
136+
align-items: center;
137+
background-color: #3b82f6;
138+
color: white;
139+
padding: 0.6rem 1.2rem;
140+
border-radius: 0.6rem;
141+
text-decoration: none;
142+
font-weight: 500;
143+
margin-right: 1rem;
144+
margin-bottom: 1rem;
145+
transition: background-color 0.3s ease, transform 0.2s ease;
146+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
147+
flex-grow: 1; /* Allow links to grow and take available space */
148+
justify-content: center; /* Center content within the link */
149+
}
150+
.portfolio-link i {
151+
margin-right: 0.5rem;
152+
}
153+
154+
/* Responsive adjustments */
155+
@media (min-width: 768px) {
156+
body {
157+
padding: 2rem;
158+
}
159+
.resume-container {
160+
padding: 2.5rem 3rem; /* Revert padding for larger screens */
161+
}
162+
.section-title {
163+
font-size: 1.875rem; /* text-3xl */
164+
}
165+
.contact-info {
166+
flex-wrap: nowrap; /* Prevent wrapping on larger screens */
167+
}
168+
.experience-item {
169+
flex-direction: row; /* Revert to row on larger screens */
170+
align-items: flex-start;
171+
}
172+
.company-logo {
173+
width: 4rem; /* Larger logo size */
174+
height: 4rem;
175+
margin-right: 1.5rem;
176+
margin-bottom: 0; /* Remove margin-bottom on larger screens */
177+
font-size: 2rem;
178+
}
179+
.job-title {
180+
font-size: 1.25rem; /* text-xl */
181+
}
182+
.company-name {
183+
font-size: 1rem; /* text-base */
184+
}
185+
.job-duration {
186+
font-size: 0.875rem; /* text-sm */
187+
}
188+
.skill-tag {
189+
font-size: 0.875rem; /* text-sm */
190+
}
191+
.portfolio-link {
192+
flex-grow: 0; /* Prevent growing on larger screens */
193+
justify-content: flex-start; /* Align content to start */
194+
}
195+
}
196+
</style>
197+
</head>
198+
<body>
199+
<div class="resume-container">
200+
<header class="pb-6 border-b-2 border-gray-200">
201+
<h1 class="text-4xl sm:text-5xl font-extrabold text-gray-900 mb-2">SM Amran</h1>
202+
<div class="contact-info flex flex-col sm:flex-row gap-y-2 sm:gap-y-0 sm:gap-x-8 mt-4">
203+
<p><i class="fas fa-phone"></i> 01928004636</p>
204+
<a href="mailto:smamran.com@gmail.com" class="hover:underline"><i class="fas fa-envelope"></i> smamran.com@gmail.com</a>
205+
<p><i class="fas fa-map-marker-alt"></i> Vawal Jamalpur, Kaliganj, Gazipur (BD)</p>
206+
</div>
207+
</header>
208+
209+
<section>
210+
<h2 class="section-title">Professional Summary</h2>
211+
<p class="text-gray-700 leading-relaxed text-sm sm:text-base">
212+
Highly skilled in the Software Engineering domain with 10+ years of experience, specializing in web and mobile application development, database management, and system optimization. Currently serving as a Assistant Programmer at the Government of Bangladesh, where I have implemented e-government services that significantly enhanced operational efficiency. Proven expertise in team collaboration, technical support, and ICT operations, with a strong focus on delivering innovative, scalable solutions that drive digital transformation.
213+
</p>
214+
</section>
215+
216+
<section>
217+
<h2 class="section-title">Employment History</h2>
218+
219+
<div class="experience-item">
220+
<div class="company-logo">
221+
<i class="fas fa-building"></i>
222+
</div>
223+
<div class="job-details">
224+
<h3 class="job-title">Assistant Programmer</h3>
225+
<p class="company-name">ICT Division</p>
226+
<p class="job-duration">Jul. 2019 - Present | Dhaka, Bangladesh</p>
227+
<ul class="job-description list-disc pl-5 text-gray-700 text-sm sm:text-base">
228+
<li>Develop, maintain, and troubleshoot software systems used across government offices.</li>
229+
<li>Implement and manage e-government services like web portals and online services.</li>
230+
<li>Provide technical support and training to staff to ensure smooth ICT operations.</li>
231+
</ul>
232+
</div>
233+
</div>
234+
235+
<div class="experience-item">
236+
<div class="company-logo">
237+
<i class="fas fa-code"></i>
238+
</div>
239+
<div class="job-details">
240+
<h3 class="job-title">Software Engineer</h3>
241+
<p class="company-name">Dotlines</p>
242+
<p class="job-duration">Jan. 2016 - Jun. 2019 | Dhaka, Bangladesh</p>
243+
<ul class="job-description list-disc pl-5 text-gray-700 text-sm sm:text-base">
244+
<li>Developed Desktop, Web & Mobile applications using C++, Java, Nodejs, PHP, Python and front-end technologies.</li>
245+
<li>Collaborated in team environments for system design and implementation.</li>
246+
<li>Maintained legacy systems and upgraded tools to modern frameworks.</li>
247+
</ul>
248+
</div>
249+
</div>
250+
</section>
251+
252+
<section>
253+
<h2 class="section-title">Education</h2>
254+
<div class="experience-item">
255+
<div class="company-logo">
256+
<i class="fas fa-graduation-cap"></i>
257+
</div>
258+
<div class="job-details">
259+
<h3 class="job-title">Bachelor of Science, Computer Science & Engineering</h3>
260+
<p class="company-name">Khulna University of Engineering & Technology</p>
261+
<p class="job-duration">Oct. 2014 | Khulna</p>
262+
</div>
263+
</div>
264+
</section>
265+
266+
<section>
267+
<h2 class="section-title">Skills</h2>
268+
<div class="mb-4">
269+
<p class="skill-category">Technical Skills:</p>
270+
<div class="skill-list">
271+
<span class="skill-tag">Full Stack Development</span>
272+
<span class="skill-tag">Application Development</span>
273+
<span class="skill-tag">System Administration</span>
274+
<span class="skill-tag">Web & Desktop Application Development (C++, Java, Nodejs, PHP, Python, Front-end Technologies)</span>
275+
<span class="skill-tag">Mobile Application Development</span>
276+
<span class="skill-tag">Database Management</span>
277+
</div>
278+
</div>
279+
<div>
280+
<p class="skill-category">Soft Skills:</p>
281+
<div class="skill-list">
282+
<span class="skill-tag">Team Collaboration</span>
283+
<span class="skill-tag">Technical Support</span>
284+
<span class="skill-tag">Innovative Solutions</span>
285+
</div>
286+
</div>
287+
</section>
288+
289+
<section>
290+
<h2 class="section-title">Portfolios</h2>
291+
<div class="flex flex-col sm:flex-row gap-2 sm:gap-4">
292+
<a href="https://github.com/smamran" target="_blank" class="portfolio-link">
293+
<i class="fab fa-github"></i> GitHub
294+
</a>
295+
<a href="https://stackoverflow.com/users/1340661/smamran" target="_blank" class="portfolio-link">
296+
<i class="fab fa-stack-overflow"></i> Stack Overflow
297+
</a>
298+
</div>
299+
</section>
300+
301+
<section>
302+
<h2 class="section-title">Interests</h2>
303+
<div class="skill-list">
304+
<span class="skill-tag">Artificial Intelligence</span>
305+
<span class="skill-tag">Automation</span>
306+
<span class="skill-tag">Cloud Computing</span>
307+
<span class="skill-tag">Big Data Analysis</span>
308+
<span class="skill-tag">Blockchain</span>
309+
</div>
310+
</section>
311+
</div>
312+
</body>
313+
</html>

0 commit comments

Comments
 (0)