-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
180 lines (177 loc) · 8.75 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
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Md Amir Sabir</title>
<link rel="stylesheet" href="portfolio.css">
<script src="script.js" defer></script>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="navbar">
<div class="logo-container">
<div class="logo-text">Techno Main Salt Lake</div>
</div>
<div class="nav-items">
<div><a href="#projects">Projects</a></div>
<div><a href="#skills">Skills</a></div>
<div><a href="#contact">Contact</a></div>
</div>
</div>
<div class="hero-section">
<div class="hero-section-left">
<div class="hero-section-heading">Hi! I am Md Amir Sabir</div>
<div class="hero-section-heading hero-section-sub-heading">
I am a <span class="role"></span>
</div>
<div class="hero-section-description">
Final year undergraduate at Techno Main Salt Lake. I have a passion for solving
complex problems and I am eager to contribute my technical skills and innovative
mindset to a dynamic team.
</div>
<div class="btn-pink" id="button"><a href="https://github.com/mdamirsabir/Resume/blob/main/Amir_Resume.pdf" target="_blank">Resume</a></div>
</div>
<div class="hero-section-right">
<div class="user-image">
<!-- Replace the src attribute with the URL of your profile picture -->
<img src="images/Amir.jpg" alt="Profile Picture" class="profile-picture">
</div>
</div>
</div>
</div>
<div class="project-section" id="projects">
<h2 class="page-header">Projects</h2>
<div class="project-container">
<div class="project-card" id="project1">
<!-- Project 1: Travelling Guide website -->
<div class="project-number project-number-right">01</div>
<div class="project-content project-content-left">
<div class="project-skills-container">
<!-- Add image URLs for project skills -->
<img class="project-skills" src="images/html5.png" alt="HTML">
<img class="project-skills" src="images/CSS.png" alt="CSS">
</div>
<h2 class="project-heading">Travelling Guide website</h2>
<p class="project-sub-heading">Tourist Guide website using HTML and CSS</p>
<div class="btn-grp">
<button class="btn-pink btn-project">Visit Here</button>
<a href="https://mdamirsabir.github.io/E-Learning/">
<!-- Add GitHub repository URL -->
<i title="GitHub Link" class="fa-brands fa-github icon"></i>
</a>
</div>
</div>
</div>
<div class="project-card" id="project2">
<!-- Project 2: Blogging Website (FrontEnd) -->
<div class="project-number project-number-left">02</div>
<div class="project-content project-content-left">
<div class="project-skills-container">
<!-- Add image URLs for project skills -->
<img class="project-skills" src="images/html5.png" alt="HTML">
<img class="project-skills" src="images/CSS.png" alt="CSS">
<img class="project-skills" src="images/jango.png" alt="Django">
</div>
<h2 class="project-heading">Blogging Website (FrontEnd) and Django</h2>
<p class="project-sub-heading">Full authentication blogging website using HTML, CSS, and Django</p>
<div class="btn-grp">
<button class="btn-pink btn-project">Visit Here</button>
<a href="https://github.com/mdamirsabir/Blogging_Website">
<!-- Add GitHub repository URL -->
<i title="GitHub Link" class="fa-brands fa-github icon"></i>
</a>
</div>
</div>
</div>
<!-- Add more project cards here -->
</div>
</div>
<div id="skills" class="container skills-container" id="skills">
<div class="skill-fade-text">Skills</div>
<!-- Add your skills content here -->
<div id="skills" class="container skills-container">
<div class="skill-fade-text">Skills</div>
<div class="skill-container-left">
<!-- Add your skills content here -->
<h2 class="skill-heading">Skills Overview</h2>
<p class="skill-sub-heading">
Here are some of the skills I've acquired through my education and experience:
</p>
<ul>
<li>C++</li>
<li>C Programming Language</li>
<li>HTML & CSS</li>
<li>DBMS</li>
<li>SQL</li>
<li>Data Structures and Algorithms (DSA)</li>
</ul>
</div>
<div class="skill-container-right">
<!-- Add your skills logos or icons here -->
<img class="skills-logo" src="images/C++.png" alt="C++">
<img class="skills-logo" src="images/C.png" alt="C">
<img class="skills-logo" src="images/html5.png" alt="HTML & CSS">
<img class="skills-logo" src="images/logo.svg" alt="DBMS">
<img class="skills-logo" src="images/CSS.png" alt="SQL">
<img class="skills-logo" src="images/jango.png" alt="DSA">
</div>
</div>
</div>
<div class="contactus-form-container" id="contact">
<div class="container">
<h1 class="contactus-heading">Contact</h1>
<!-- Add your contact form or details here -->
<p>Address: Kolkata, India</p>
<p>Phone: +919681875066</p>
<p>Email: [email protected]</p>
<div>
<p>Linkdin:</p>
<a href="https://www.linkedin.com/in/md-amir-sabir-25147025b/" target="_blank">
<img src="images/linkedin-logo.jpg" alt="LinkedIn" width="30" height="30">
</a>
</div>
<!-- You can embed a Google Form here for contact -->
</div>
</div>
<footer>
<div class="container">
<div class="footer-wrapper">
<div class="footer-faded-text">Md Amir Sabir</div>
<div class="link-wrapper">
<div>
<a href="#projects">Projects</a>
</div>
<div>
<a href="#skills">Skills</a>
</div>
<div>
<a href="#contact">Contact</a>
</div>
</div>
<div class="icon-wrapper">
<!-- Add your social media icons or links here -->
</div>
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>
<script>
var typeData = new Typed(".role", {
strings: [
"Coding Enthusiast",
"Community Manager",
"Web Developer"
],
loop: true,
typeSpeed: 100,
backSpeed: 50,
startDelay: 1000
});
</script>
</body>
</html>