-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
210 lines (202 loc) · 16.4 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
198
199
200
201
202
203
204
205
206
207
208
209
210
<!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">
<title>My portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ysabeau:wght@1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container object1">
<a href="#" class="arrow-up-hide">
<svg class="arrow-up" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" />
</svg>
</a>
<nav>
<div class="heading-line">
<div class="light"></div>
</div>
<ul>
<li class="lin"><a href="#">Home</a></li>
<li class="lin"><a href="#about">About</a></li>
<li class="lin"><a href="files/Shiva_Aleti_Resume.pdf">Resume</a></li>
<div class="contactme">Contact <div class="line1"></div>
<a href="https://github.com/shivaaleti" target="_blank"><svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
<a href="https://www.facebook.com/profile.php?id=100090209632692" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
</path>
</svg>
</a>
<a href="https://www.linkedin.com/in/shiva-aleti-b06443237/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z">
</path>
</svg>
</a>
</div>
</ul>
</nav>
<div class="all-items">
<div class="introduction-to-me">
<div class="intro">
<div class="hello"> Welcome!</div>
<div class="my-intro">I am <span id="element"></span>.<br>
I am thrilled to present
to you a collection of my work and achievements.</div>
<a href="files/Shiva_Aleti_Resume.pdf" class="link-button">Download Resume </a>
</div>
<div class="image"></div>
</div>
<div class="line"></div>
<div class="sections">
<div class="section1">
<div class="section1-image">
<!-- -->
<div class="section1-image-1">
<div class="top-down"></div>
</div>
<div class="section1-image-1 image-2 ">
<div class="down-top"></div>
</div>
</div>
<div class="section1-intro">
<div class="section1-me reveal-left">Education
<div class="line line2"></div>
</div>
<div class="section1-me-1 reveal-right">I am a Bachelor's student in Computer Science
specializing in website development using HTML, CSS, and JavaScript. With a strong
foundation in programming and web development principles, I can create visually appealing
and interactive websites.
<br>
<div class="hide-more-education">
<div class="ssc">In the year 2020, I successfully completed my SSC examinations at Dixit Road M.P.S High School affiliated with Pune University, achieving a remarkable first-class distinction.</div>
<div class="hsc">In the year 2022, I successfully completed my HSC examinations at Greater Mumbai Educational Society, affiliated with Pune University, and attained a commendable first-class distinction.</div>
<div class="fy">In the year 2023, I successfully completed both Semester 1 and Semester 2 of my First Year in Bachelors in Computer Application at M. L. Dahanukar College of Commerce, affiliated with Pune University. I am proud to have obtained an impressive A grade in Semester 1 and an exceptional A+ grade in Semester 2.</div>
<div class="sy">Currently, I am in the second year of my Bachelor's in Computer Application program.</div>
</div>
<button class="link-button-1">Show more...</button>
</div>
</div>
</div>
<div class="section1">
<div class="section1-intro section2-intro">
<div class="section1-me reveal-left">Projects
<div class="line line2"></div>
</div>
<div class="section1-me-1 reveal-right">I've mastered the art of combining HTML, CSS, and
JavaScript to craft captivating games and animations that push the boundaries of digital
experiences, leaving users spellbound and craving for more. Get ready to be immersed in a
world where technology and creativity collide to create unforgettable interactive
adventures.
<br>
<div class="hide-more-project">
<div class="car-animation">I proudly developed a captivating <a href="https://car123animation.netlify.app/" target="_blank">car animation</a> project utilizing pure HTML, CSS, and JavaScript.</div>
<div class="flappy-bird"> I successfully crafted an engaging <a href="https://jumpingbirdgame.netlify.app/" target="_blank">Flappy Bird Game</a> project using only HTML, CSS, and JavaScript.</div>
<div class="dino-game">I skillfully designed an exciting <a href="https://dinousergame.netlify.app/" target="_blank">T-Rex Dinosaur Game</a> project using pure HTML, CSS, and JavaScript.</div>
<div class="tictactoe-game">I developed a <a href="https://ticgametacgametoegamenew.netlify.app/" target="_blank">Tic-Tac-Toe project</a> to showcase my programming skills and problem-solving abilities on my portfolio website.</div>
<div class="todolist">I created a <a href="https://todomakelist.netlify.app/" target="_blank">To-Do List project</a> to demonstrate my organization and task management capabilities on my portfolio website.</div>
</div>
<button class="link-button-2">Show more...</button>
</div>
</div>
<div class="section1-image section2-image">
<div class="section1-image-1 section2-image-1">
<div class="top-down"></div>
</div>
<div class="section1-image-1 image-2 section2-image-2">
<div class="down-top"></div>
</div>
<div class="section1-image-1 image-2 section2-image-3">
<div class="down-top"></div>
</div>
<div class="section1-image-1 image-2 section2-image-4">
<div class="down-top"></div>
</div>
<div class="section1-image-1 image-2 section2-image-5">
<div class="down-top"></div>
</div>
</div>
</div>
<div class="section3" id="about">
<div class="aboutme reveal-left">About Me</div>
<div class="content">
<div class="my-photo reveal-right"></div>
<div class="me">I am <span class="my-name"> Shiva Aleti</span></div>
<div class="my-information">Currently I am a student at <a href="https://www.mldcc.com/"
class="college-name">M.L. Dahanukar College of Commerce College in Mumbai
</a> pursuing Bachelor of Computer Science with <span
class="color-blue no-underline">8.5</span> CGPA in Semester I and <span
class="color-blue no-underline no-hover">9.0</span> CGPA in semester II.I have excellent
skills in Front End Developer using HTML,CSS and JavaScript.<br>For more details download my
<a href="files/Shiva_Aleti_Resume.pdf" class="color-blue">Resume</a></div>
<div class="contact-me">
<a href="https://www.youtube.com/channel/UC1N6dcX5phcCnLlEyyQkK2w" class="youtube">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-youtube" viewBox="0 0 16 16">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
</svg>
</a>
<a href="https://github.com/shivaaleti" target="_blank" class="github"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-github" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
<a href="https://www.facebook.com/profile.php?id=100090209632692" target="_blank"
class="facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z">
</path>
</svg>
</a>
<a href="https://www.linkedin.com/in/shiva-aleti-b06443237/" target="_blank"
class="linkedin">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z">
</path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script src="script.js">
</script>
</body>
</html>