-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (151 loc) · 7.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Manish Chidar - Professional Developer Portfolio">
<meta name="keywords" content="Web Developer, Android Developer, UI/UX Designer">
<meta name="author" content="Manish Chidar">
<!-- Page Title -->
<title>Manish Chidar - Developer Portfolio</title>
<!-- Favicon -->
<link rel="icon" href="img/main-profile.png" type="image/png">
<!-- Preload Critical Resources -->
<link rel="preload" href="style/style.css" as="style">
<link rel="preload" href="script.js" as="script">
<!-- Stylesheets -->
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Accessibility Skip Link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Mobile Navigation Toggle -->
<div class="mobile-menu-toggle" aria-label="Toggle Navigation">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<!-- Navigation -->
<nav class="navbar" role="navigation" aria-label="Main Navigation">
<div class="logo">
<div class="logo_img">
<img src="img/main-profile.png" alt="Manish Chidar Profile" loading="lazy">
</div>
</div>
<div class="left_nav">
<span><a class="name-logo" href="#home">Manish's</a></span>
<span class="name_p">Portfolio</span>
</div>
<div class="nav-list nav">
<ul>
<li><a href="#home" class="nav-item is-active" active-color="orange">Home</a></li>
<li><a href="#about" class="nav-item" active-color="green">About</a></li>
<li><a href="#skills" class="nav-item" active-color="blue">Skills</a></li>
<li><a href="#projects" class="nav-item" active-color="red">Projects</a></li>
<li><a href="#services" class="nav-item" active-color="yellow">Services</a></li>
<li><a href="#contact" class="nav-item" active-color="rebeccapurple">Contact</a></li>
</ul>
</div>
</nav>
<!-- Main Content -->
<main id="main-content">
<!-- Home Section -->
<section id="home" class="home-section">
<div class="container">
<div class="home">
<div class="leftSection">
<h1 class="home-hello">Hi, I'm <span class="name">Manish</span></h1>
<p class="home-text">And I am a passionate</p>
<span id="element" class="intro"></span>
<div class="buttons">
<a href="#about" class="btn">About me</a>
<a href="#contact" class="btn">Hire me</a>
</div>
<div class="home-social">
<a href="https://instagram.com/mr._stark7" target="_blank" aria-label="Instagram">
<img src="img/instagram.png" alt="Instagram" loading="lazy">
</a>
<a href="https://www.linkedin.com/in/manish-chidar-393b1525b" target="_blank" aria-label="LinkedIn">
<img src="img/linkedin.png" alt="LinkedIn" loading="lazy">
</a>
<a href="https://github.com/manish7924" target="_blank" aria-label="GitHub">
<img src="img/github.svg" alt="GitHub" loading="lazy">
</a>
</div>
</div>
<div class="rightSection">
<img src="img/out.png" alt="Manish Chidar Profile" loading="lazy">
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<h2 class="heading"><span>About</span> Me</h2>
<div class="about">
<div class="about-left">
<div id="box">
<img src="img/main-profile.png" alt="Manish Chidar" loading="lazy">
</div>
</div>
<div class="about-section">
<h3 class="about-subtitle">I'm <span class="about-name">Manish</span> Chidar</h3>
<p class="about-text">
A versatile tech enthusiast specializing in web development, Android app creation, and graphic design.
Skilled in HTML, CSS, and JavaScript, I craft visually appealing and functional websites.
</p>
<h4 class="about-text-bold">
| Frontend Web Developer | Android Developer | UI/UX Designer |
</h4>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills-section">
<!-- Skills content remains same as previous implementation -->
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section">
<!-- Projects content remains same as previous implementation -->
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<h2 class="heading"><span>Contact</span> Me</h2>
<div class="contact-form">
<form id="contact-form" action="backend.php" method="POST">
<div class="form__input">
<input type="text" name="name" id="name" placeholder="Your Name" required>
<input type="email" name="email" id="email" placeholder="Your Email" required>
<textarea name="message" id="message" placeholder="Your Message" required></textarea>
<button type="submit" class="btn">Send Message</button>
</div>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2024 Manish Chidar. All Rights Reserved.</p>
</div>
</footer>
<!-- External Scripts -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="script.js"></script>
<script>
var typed = new Typed('#element', {
strings: ['Android Developer', 'UI/UX Designer', 'Graphic Designer', 'Web Developer'],
typeSpeed: 50,
loop: true
});
</script>
</body>
</html>