-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
217 lines (178 loc) · 5.86 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to my personal GitHub Page! I am a passionate web developer specializing in the MERN stack.">
<title>[Your Name] - Web Developer</title>
<style>
/*
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
color: #333;
}
h1, h2, h3, h4 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #0077cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border-radius: 50%;
margin-bottom: 20px;
}
header {
text-align: center;
margin-bottom: 50px;
}
footer {
margin-top: 50px;
text-align: center;
font-size: 0.9em;
}
.project, .experience, .education {
margin-bottom: 30px;
}
blockquote {
background-color: #f0f0f0;
padding: 10px;
border-left: 5px solid #0077cc;
margin: 20px 0;
}
*/
/* tmp styles */
* {
text-align: center;
}
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<!-- Header Section
<header>
<h1>Hello, I'm [Your Name] 👋</h1>
<p>I'm a passionate web developer focused on building creative and efficient solutions.</p>
<img src="your-image-url.jpg" alt="[Your Name]" width="200" height="200">
</header>
<!-- About Me Section
<section>
<h2>About Me</h2>
<p>I am a web developer specializing in the MERN stack with a strong focus on TypeScript. I love building intuitive user interfaces and exploring new technologies.</p>
<h3>Skills</h3>
<ul>
<li>JavaScript / TypeScript</li>
<li>React.js / Next.js</li>
<li>Node.js / Express.js</li>
<li>MongoDB / SQL</li>
<li>HTML / CSS / SASS</li>
<li>Git / GitHub</li>
</ul>
</section>
<!-- Projects Section
<section>
<h2>Projects</h2>
<!-- Project 1
<div class="project">
<h4>Project 1: Tools App</h4>
<p>A React application with more than 12 tools, now converted to a Next.js app.
<a href="https://github.com/sabeerbikba/tools-app" target="_blank">GitHub Link</a></p>
<img src="tools-app-image.jpg" alt="Tools App Screenshot" width="400">
</div>
<!-- Project 2
<div class="project">
<h4>Project 2: Portfolio Site</h4>
<p>My personal portfolio built with Next.js and styled-components.
<a href="https://sabeerbikba.github.io/portfolio" target="_blank">Live Demo</a></p>
<img src="portfolio-screenshot.jpg" alt="Portfolio Screenshot" width="400">
</div>
</section>
<!-- Experience Section
<section>
<h2>Experience</h2>
<!-- Experience 1
<div class="experience">
<h4>Web Developer at ABC Company</h4>
<p>Jan 2022 - Present</p>
<ul>
<li>Developed and maintained web applications using React and Node.js.</li>
<li>Led a team of 5 developers to deliver a major client project.</li>
</ul>
</div>
<!-- Experience 2
<div class="experience">
<h4>Frontend Developer at XYZ Solutions</h4>
<p>Jun 2020 - Dec 2021</p>
<ul>
<li>Implemented responsive web designs and optimized UI for performance.</li>
<li>Worked closely with designers to improve user experience.</li>
</ul>
</div>
</section>
<!-- Education Section
<section>
<h2>Education</h2>
<div class="education">
<h4>Bachelor of Science in Computer Science</h4>
<p>University of Technology, 2018 - 2022</p>
</div>
</section>
<!-- Contact Information Section
<section>
<h2>Contact Me</h2>
<p>Feel free to reach out to me via email or connect on LinkedIn.</p>
<ul>
<li>Email: <a href="mailto:your-email@example.com">your-email@example.com</a></li>
<li>LinkedIn: <a href="https://linkedin.com/in/yourprofile" target="_blank">Your LinkedIn Profile</a></li>
<li>GitHub: <a href="https://github.com/sabeerbikba" target="_blank">GitHub Profile</a></li>
</ul>
</section>
<!-- Blog Section
<section>
<h2>Blog</h2>
<p>Check out my latest articles on web development and technology.
<a href="https://yourblog.com" target="_blank">Blog Link</a></p>
</section>
<!-- Testimonials Section
<section>
<h2>Testimonials</h2>
<blockquote>
<p>"Sabeer is a fantastic developer with a keen eye for detail. His work on our project was outstanding!" - Client A</p>
</blockquote>
</section>
<!-- Achievements Section
<section>
<h2>Achievements</h2>
<ul>
<li>Winner of XYZ Hackathon 2023</li>
<li>Published an article on Web Development in ABC Journal</li>
</ul>
</section>
<!-- Footer Section
<footer>
<p>© 2024 [Your Name]. All rights reserved.</p>
</footer>
-->
<h2>Site Under Construction</h2>
<h1>🚧</h1>
<h4>We'll be back soon!</h4>
<h2>☮️ & 🖤</h2>
</body>
</html>