-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
193 lines (176 loc) · 7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="icon" href="blob.png" type="image/png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="mobileStyles.css">
<link rel="stylesheet" href="DarkMode.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- Side Navigation Bar (if using from previous step) -->
<div class="side-nav">
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#skills">Skills</a></li>
<!-- <li><a href="#about">About</a></li> -->
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- Header Section -->
<header>
<div class="logo">My Portfolio</div>
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#skills">Skills</a></li>
<!-- <li><a href="#about">About</a></li> -->
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- Dark/Light Mode Toggle -->
<div class="theme-toggle">
<input type="checkbox" id="theme-toggle" />
<label for="theme-toggle" class="toggle">
<i class="sun-icon fas fa-sun"></i>
<i class="moon-icon fas fa-moon"></i>
</label>
</div>
</nav>
</header>
<!-- Hero Section (with your photo) -->
<section id="hero" class="hero">
<div class="profile-photo-container">
<img src="me3.jpg" alt="Shubham Supekar" class="profile-photo">
<div class="social-icons">
<a href="https://www.linkedin.com/in/shubham-supekar-42106916a/" target="_blank" class="social-icon linkedin">
<i class="fab fa-linkedin"></i>
</a>
<a href="mailto:shubham26supekar@gmail.com" class="social-icon email">
<i class="fas fa-envelope"></i>
</a>
<a href="https://github.com/ShubhamSupekar" target="_blank" class="social-icon github">
<i class="fab fa-github"></i>
</a>
</div>
<div class="name-container">
<span class="name-line"></span>
<h1 class="profile-name">Shubham Supekar</h1>
</div>
<p class="intro-text">
Passionate Developer with skills in data visualization using Power BI and backend development with Spring Boot. I turn ideas into effective solutions, creating user-friendly front-end interfaces and scalable backend systems. I excel at solving complex problems and bringing innovative ideas to life.
</p>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="skills">
<h2>My Skills</h2>
<!-- Data Visualization -->
<div class="skills-category">
<h3 class="category-title">Data Visualization</h3>
<div class="skills-compact-grid">
<div class="skill-item">Apache Spark</div>
<div class="skill-item">Power BI</div>
</div>
</div>
<!-- Frontend -->
<div class="skills-category">
<h3 class="category-title">Frontend</h3>
<div class="skills-compact-grid">
<div class="skill-item">HTML</div>
<div class="skill-item">CSS</div>
</div>
</div>
<!-- Backend -->
<div class="skills-category">
<h3 class="category-title">Backend</h3>
<div class="skills-compact-grid">
<div class="skill-item">Java</div>
<div class="skill-item">Python</div>
<div class="skill-item">SpringBoot</div>
<div class="skill-item">SpringAi</div>
<div class="skill-item">JPA</div>
<div class="skill-item">Hibernate</div>
<div class="skill-item">Maven</div>
<div class="skill-item">REST API</div>
<div class="skill-item">MySQL</div>
<div class="skill-item">Postgres</div>
</div>
</div>
<!-- Version Control and OS -->
<div class="skills-category">
<h3 class="category-title">Version Control & OS</h3>
<div class="skills-compact-grid">
<div class="skill-item">Git</div>
<div class="skill-item">Linux</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="experience">
<h2>My Experience</h2>
<div class="experience-item">
<h3>Python Developer Intern in Equity</h3>
<p class="experience-duration"><span class="company-name">UBS Mumbai</span> - 9/09/2024 to Present</p>
<p class="experience-description">Automating excel, PowerBi with python scripts.</p>
<p class="experience-description">Brief description of your achievements: </p>
<p class="experience-description">Brief description of your projects: </p>
<p class="experience-description">Extra Points: </p>
</div>
<!-- Add more experience items as needed -->
</section>
<!-- Projects Section -->
<section id="projects" class="projects">
<h2>My Projects</h2>
<div class="project-card">
<h3>TechEdu</h3>
<p>This project showcases how AI models like LLAMA3 are integrated using SpringAI and JSON-based API communication with an ML model, including complex CRUD operations on educational videos.</p>
<p>01/2024 - 06/2024</p>
<ul>
<li>Educational web app serving learning videos, integrated with LLAMA3 for answering questions.</li>
<li>Three versions published on GitHub.</li>
<li>Technologies: JAVA, HTML, CSS, SpringBoot, SpringAI, Ollama, JPA, Hibernate, MySQL, GitHub.</li>
<li>Team: 1 member.</li>
</ul>
<a href="https://github.com/ShubhamSupekar/TechEdu" target="_blank" class="project-link">View on GitHub</a>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="contact-box">
<video autoplay muted loop class="background-video">
<source src="background video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="contact-content">
<h2>Let's Connect—Drop Me a Line!</h2>
<form action="https://formspree.io/f/mpwabzpd" method="POST" id="contact-form">
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Popup Message -->
<div id="popup" class="popup">
<div class="popup-content">
<span class="popup-check">✔</span>
<p>Message sent</p>
</div>
</div>
<button id="scrollToHero" class="scroll-button">Go to Top</button>
<!-- Footer -->
<footer>
<p>© 2024 My Portfolio. All Rights Reserved.</p>
</footer>
</body>
</html>