-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (170 loc) · 6.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saket Khopkar's Portfolio Website</title>
<link rel="icon" href="images/title_logo.png" type="image/x-icon">
<link rel="stylesheet" href="styles/nav-style.css">
<link rel="stylesheet" href="styles/landing-page.css">
<link rel="stylesheet" href="styles/Root-HTML.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
.landing {
position: relative;
overflow: hidden;
}
#three-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.landing .overlay {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<header>
<nav>
<div class="logo">
<img src="images/New-Logo.PNG" alt="Saket Khopkar's Logo">
</div>
<div class="nav-container">
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="online.html">About Me</a></li>
<li><a href="team.html">Knowledge Base</a></li>
<li><a href="articles.html">Blog Posts</a></li>
<li><a href="contact_form.html">Contact</a></li>
</ul>
</div>
<div class="mobile-menu" aria-label="Mobile Menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<main>
<section class="landing">
<canvas id="three-canvas"></canvas>
<div class="overlay">
<div class="title">
<h1 style="color: white;">Saket Khopkar</h1>
<h2 style="color: white;">Developer and Designer</h2>
</div>
<div class="descript" style="color: white;">
<p style="color: white; font-weight: bolder;">I solve problems in a creative way. During my tenure as a Diploma student, I learned many classical strategies
applicable to modern-day projects, helping to solve real-world problems.</p>
</div>
<a href="online.html"><button class="buttons black">Tap Here to More</button></a>
</div>
</section>
<section class="landing-events" id="aboutUS">
<div class="about-us-img">
<img src="images/my-photo.jpg" alt="Photo of Saket Khopkar">
</div>
<div class="text">
<div class="title">
<h1>About Me</h1>
<div class="line"></div>
</div>
<div class="descript">
<p>I solve problems creatively. During my tenure as a Diploma student, I learned classical strategies applicable to modern-day projects, solving real-world problems.</p>
<p>I'm an active learner, ready to embrace new technologies. I enjoy working in a team, fostering creativity and collaboration.</p>
<a href="online.html"><button class="buttons">Know More</button></a>
</div>
</div>
</section>
<section class="tour-section">
<div class="text">
<div class="title">
<h1>A Video Introduction</h1>
<div class="line"></div>
</div>
</div>
<div class="video-container">
<video controls aria-label="Introduction Video">
<source src="Portfolio_video.mp4" type="video/mp4">
</video>
</div>
</section>
<section class="landing-events">
<div class="text">
<div class="title">
<h1>My Experience</h1>
<div class="line"></div>
</div>
<div class="descript">
<p>Researching, designing, implementing, and managing software programs. Testing and evaluating new programs. Identifying areas for modification and developing these modifications. Writing and implementing efficient code.</p>
<p>I have extensive experience in the software industry, working on various development projects using Java, HTML, CSS, C#, and C++. I enjoy building innovative solutions and continuously improving my work.</p>
</div>
<a href="online.html"><button class="buttons">Know More</button></a>
</div>
<div class="event-options">
<a href="https://www.linkedin.com/in/saket-khopkar-336684198/">
<div class="box">LinkedIn Profile</div>
</a>
<a href="https://github.com/SAKET-SK">
<div class="box">GitHub Profile</div>
</a>
<a href="team.html">
<div class="box">Courses and Learnings</div>
</a>
</div>
</section>
<section class="social-section">
<div class="box">
<div class="header">
<h1 class="first">I</h1>
<h1 class="second">AM</h1>
<h1 class="third">SOCIAL</h1>
</div>
<div class="content">
<p>Make contact. Build relationships. Get results. Want to get in touch? I would like to hear from you regarding any suitable opportunity, projects, or queries.</p>
</div>
<div class="icons">
<a href="https://twitter.com/saketkhopkar478?s=08" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/mystic.saket_910/?hl=en" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/saket-khopkar-336684198/" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</section>
<section class="landing-events contact" id="contactUS">
<div class="text">
<div class="title">
<h1>Contact Me</h1>
<div class="line"></div>
</div>
<div class="descript">
<p>Want to get in touch? I would like to hear from you. Contact me regarding any suitable opportunities, projects, or queries.</p>
<div class="address">
<div class="contact-item">
<i class="far fa-envelope"></i>
<p>saketkhopkar910@gmail.com</p>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<p><a href="https://www.google.com/maps/place/Khopkar+Villa/@20.379281,78.117458,16.74z/data=!4m5!3m4!1s0x3bd3e9de45afa0d5:0x86f09ca265fee055!8m2!3d20.3786679!4d78.120793">Plot No 17, Shastri Nagar, Shirey Layout, Behind Dattey College, Yavatmal, Maharashtra, 445001</a></p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-section">
<span>© 2021 <a href="https://www.linkedin.com/in/saket-khopkar-336684198/">Saket Khopkar</a></span>
<p>Developed and Maintained by Saket Khopkar</p>
</div>
</footer>
<script src="scripts/nav.js"></script>
<script src="scripts/banner.js"></script>
</body>
</html>