-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (121 loc) · 6.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noman Bin Morshed - Portfolio</title>
<meta name="description" content="Portfolio of Noman Bin Morshed, Nuclear Engineering Student and Aspiring Computer Scientist">
<meta name="keywords" content="Noman Bin Morshed, Nuclear Engineering, Computer Science, Portfolio">
<meta property="og:title" content="Noman Bin Morshed - Portfolio">
<meta property="og:description" content="Portfolio of Noman Bin Morshed, Nuclear Engineering Student and Aspiring Computer Scientist">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.yourdomain.com">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Noman Bin Morshed",
"url": "https://www.yourdomain.com",
"sameAs": [
"https://github.com/yourusername",
"https://linkedin.com/in/yourusername",
"https://twitter.com/yourusername"
]
}
</script>
</head>
<body>
<header>
<button id="theme-toggle" aria-label="Toggle dark mode">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</button>
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#memberships">Memberships</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Noman Bin Morshed</h1>
<p>Nuclear Engineering Student | Aspiring Computer Scientist | Educator</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>I am currently a third-year nuclear engineering major at the University of Dhaka. My academic journey has led me to shift my focus towards theoretical computer science, driven by the profound impact of computational aspects in science.</p>
<p>I thrive in collaborative environments, solving complex problems in computational domains. My interests extend beyond engineering, encompassing philosophy, psychology, and theology.</p>
<p>With 15 years of educational experience, I've developed a passion for teaching, particularly enjoying work with younger children. I'm currently applying to Continuing Education programs to further my understanding of child development and classroom best practices.</p>
<p>I'm seeking research and industrial opportunities where efficient management and advanced technological practices can drive success. With my strong work ethic and engineering skills, I aim to contribute meaningfully to both industry and academia.</p>
</section>
<section id="skills">
<h2>Skills</h2>
<!-- Skill categories remain the same -->
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project-filter" role="tablist">
<button data-filter="all" class="active" role="tab" aria-selected="true">All</button>
<button data-filter="web" role="tab" aria-selected="false">Web Development</button>
<button data-filter="data" role="tab" aria-selected="false">Data Science</button>
<button data-filter="animation" role="tab" aria-selected="false">Animation</button>
</div>
<div class="projects-grid">
<article class="project" data-category="web">
<img src="project1-thumbnail.jpg" alt="Project 1" loading="lazy">
<h3>Project 1</h3>
<p>Description of Project 1</p>
<a href="#" class="project-link">View Project</a>
</article>
<!-- More project articles -->
</div>
</section>
<section id="memberships">
<h2>Professional Memberships</h2>
<!-- Membership list remains the same -->
</section>
<section id="testimonials">
<h2>Testimonials</h2>
<div class="testimonial-carousel" role="region" aria-label="Testimonial Carousel">
<article class="testimonial active" role="tabpanel">
<blockquote>
"Noman is an exceptional student with a keen mind for problem-solving."
</blockquote>
- Prof. John Doe, University of Dhaka
</article>
<!-- More testimonial articles -->
</div>
<button class="testimonial-prev" aria-label="Previous testimonial"><</button>
<button class="testimonial-next" aria-label="Next testimonial">></button>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="mailto:nomaneon00@gmail.com">nomaneon00@gmail.com</a></p>
<div class="social-links">
<a href="#" class="social-icon" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
</div>
</section>
<section id="blog">
<h2>Blog Posts</h2>
<div class="blog-posts" aria-live="polite">
<!-- Blog posts will be dynamically added here -->
</div>
</section>
</main>
<footer>
<p>© 2024 Noman Bin Morshed. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>