-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (197 loc) · 10.7 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
<!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">
<meta name="description" content="Personal Portfollio of Sutharsan">
<meta name="author" content="Sutharsan">
<meta name="keywords" content="Portfolio, Web developer, Engineer">
<title>Sutharsan's Tech Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="navbar">
<div class="container">
<div class="logo">
<a href="#" target="_blank"><strong>Portfolio</strong></a>
</div>
<ul id="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#project">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div class="header">
<div class="box">
<div class="details">
<h2>Hello!</h2>
<h3>I’m Sutharsan,</h3>
<p>
An Electronics and Communication Engineering student blending technology with creativity.
Explore my projects and see how my skills can bring innovative ideas to life.
</p><br>
<div class="btns">
<a href="https://github.com/s-sutharsan-20/Resume" target="_blank" class="btn">Resume</a>
<a href="#contact" class="btn">Contact Me</a>
</div>
</div>
<div class="about-image">
<div class="image">
<img src="./images/profile2.jpg" alt="Sutharsan" srcset="">
</div>
</div>
</div>
</div>
<section id="about" class="about">
<div class="title">
<h2>About me</h2>
</div>
<div class="details">
<p>
I’m a 3rd-year Electronics and Communication Engineering student with a passion for merging technology and creativity.
With a strong basic in electronics, I’ve expanded my skills into web development, web design, and programming with Python and C.
I enjoy creating practical solutions, whether it’s coding dynamic websites or capturing compelling photographs.
</p>
<p><br>
My interests lie in IoT, image processing, and web development, where I aim to bridge the gap between hardware and software.
Beyond technical skills, I bring a unique perspective through my passion for photography, blending precision with artistic expression.
I’m excited to connect, collaborate, and make an impact through innovative technology.
</p>
</div>
</section>
<section id="education" class="education">
<h2>Education</h2>
<div class="blocks">
<div class="block1">
<div class="edu">
<img src="images/logo1.png" alt="MSEC Logo">
</div>
<div class="detail">
<span><h3>Mepco Schlenk Engineering College</h3></span>
<span><h4>BE-Electronics and Communication Engineering </h4> </span>
<span><h6>2022-2026(pursuing)</h6></span>
</div>
</div><br>
<div class="block2">
<div class="edu">
<img src="images/logo2.png" alt="MSEC Logo">
</div>
<div class="detail">
<span><h3>Karpagam Matriculation and Higher Secondary School</h3></span>
<span><h4>Higher Secondary Education +2</h4></span>
<span><h6>2021-2022 | Grade:86%</h6></span><br>
<span><h4>SSLC</h4></span>
<span><h6>2019-2020 | Grade:91%</h6></span>
</div>
</div>
</div>
</section>
<section id="project" class="project">
<div class="projects">
<h3>My Projects</h3>
<div class="list">
<div class="list1">
<div class="objects">
<div class="obj" data-title="SCR-Based Battery Charger" data-type="Electronics (Hardware)">
<img src="images/project1.png">
</div>
</div>
<div class="info">
<h4>SCR based battery charger</h4>
<p>Developed an efficient battery charging system using SCRs (Silicon Controlled Rectifiers).
Optimized charging efficiency and reliability through advanced Silicon Controlled Rectifier technology.
</p>
</div>
</div>
<div class="list2">
<div class="objects">
<div class="obj" data-title="Design of Slotted Patch Antenna in HFSS(ongoing)" data-type="Communication (Software)" >
<img src="images/project5.png">
</div>
</div>
<div class="info">
<h4>Design of Slotted Patch Antenna in HFSS(ongoing)</h4>
<p>
This project explores a slotted patch antenna combined with a metasurface superstrate.
The slotted design facilitates dual-band operation, while the metasurface enhances gain and bandwidth,
providing a compact and efficient solution for modern communication needs.
</p>
</div>
</div>
<div class="list3">
<div class="objects">
<div class="obj" data-title="Captured Chronicles - Photograph Gallery" data-type="A Responsive Website" >
<img src="images/project3.png">
</div>
</div>
<div class="info">
<h4>Captured Chronnicles</h4>
<p> A personal photography portfolio website showcasing my passion for capturing everyday moments.
Built with HTML, CSS, and JavaScript, this project is my first step into web development, featuring a responsive design and dynamic photo gallery to highlight my journey in photography.
</p>
<a href="https://github.com/s-sutharsan-20/Captured-Chronicles">Repository</a>
</div>
</div>
<div class="list4">
<div class="objects">
<div class="obj" data-title="Futuretech Institution - College Admission portal" data-type="Full-Stack Website" >
<img src="images/project4.png">
</div>
</div>
<div class="info">
<h4>Future Institution</h4>
<p>FutureTech Institution's website that automates the engineering admission process by collecting student details, calculating cutoff scores, and allocating courses based on preferences.
Displays results on the website, enhancing transparency and efficiency. Built with PHP, MySQL, HTML5 and CSS.
</p>
<a href="https://github.com/s-sutharsan-20/Automated-Engineering-Admission-Processing-System">Repository</a>
</div>
</div>
<div class="list5">
<div class="objects">
<div class="obj" data-title="MSEC - College Admission portal" data-type="Designed for MepExpo" >
<img src="images/project6.png">
</div>
</div>
<div class="info">
<h4>MSEC Admission Portal</h4>
<p>A web-based system that automates the engineering admission process by collecting student details, calculating cutoff scores, and allocating courses based on preferences.
Displays results on the website, enhancing transparency and efficiency. Designed for MepExpo.
</p>
<a href="https://github.com/s-sutharsan-20/Automated-Engineering-Admission-Processing-System">Repository</a>
</div>
</div>
</div>
</div>
</section>
<div class="contact" id="contact">
<div class="container">
<div class="box">
<h3>Contact</h3><br>
<div class="text" id="contactme">
<p><i class="fas fa-envelope"></i> s.sutharsan.201104@gmail.com</p>
<div class="location">
<p><i class="fa fa-location-arrow" aria-hidden="true" style='font-size:20px'></i> Madurai, Tamil Nadu, India.</p>
<p></p><i class="fa fa-phone" style="font-size:16px"></i> +91 6380657002</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="main-footer">
<div class="social-icons">
<a href="https://www.linkedin.com/in/ssutharsan20/" target="_blank"><i class="fab fa-linkedin" style='font-size:24px'></i></a><br>
<a href="https://www.instagram.com/s.sutharsan.20" target="_blank"><i class="fab fa-instagram" style='font-size:24px'></i></a><br>
<a href="https://www.twitter.com/engg_techie" target="_blank"><i class="fab fa-twitter" style='font-size:24px'></i></a><br>
<a href="https://www.github.com/s-sutharsan-20" target="_blank"><i class="fab fa-github" style='font-size:24px'></i></a><br>
<a href="tel:+91 6380657002"><i class="fa fa-phone" style='font-size:20px'></i></a> <br>
<a href="mailto:s.sutharsan.201104@gmail.com" target="_blank"><i class="fas fa-envelope" style='font-size:24px'></i></a>
</div>
</div>
</footer>
</body>
</html>