-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (164 loc) · 10.5 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Soumya Gautam - A Programmer and Web Developer</title>
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat&family=Sacramento&display=swap">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<section>
<div class="navigation-pane fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#top-container"><img src="images/profile.png" class="top-img" alt="top-img"></a>
</li>
<li class="nav-item">
<a class="nav" href="#Skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav" href="#Awards">Achievements</a>
</li>
<li class="nav-item">
<a class="nav" href="#Work">Work</a>
</li>
<li class="nav-item">
<a class="nav" href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div id="top-container" class="top-container">
<h1><em><b>I'm Soumya</b></em></h1>
<h2 class="programmer" style="margin-top: 20px;">a programmer</h2>
<img class="bottom-cloud" src="images/cloud.png" alt="Cloud-Image">
<img src="images/mountain.png" alt="Mountain-Image" height="500px">
</div>
</section>
<div class="middle-container">
<div class="profile">
<img src="images/profile.png" alt="Profile-Image" height=200px width=200px class="profile-img">
<h2 style="margin: 25px 0;">Hello</h2>
<p class="intro">I am an 11-year-old Python Programmer and a Web Developer</p>
</div>
<hr>
<div class="skills" id="Skills">
<h2>My Skills</h2>
<div class="skill-row">
<img class="computer-image" src="images/computer.png" alt="code-img">
<h3>Design Everything</h3>
<p>I can develop beautiful full-stack websites 💻...</p>
</div>
<div class="skill-row">
<img class="chillies-image" src="images/chilli.png" alt="Chilli-Image">
<h3><br>Develop Everything</h3>
<p>I can develop data science applications, GUI apps 📱, games 🎮, etc...</p>
</div>
<hr>
<div class="recognition" id="Awards">
<h2>My Awards and Recognitions</h2>
<img src="images/awards.png" alt="Awards-Image" height=200px width=200px, style="margin: 30px 0;">
<p class="awards">I am a National-Level Cyber, Mathematics and STEM Olympiad Winner,<br> a certified professional Python and Web Developer and a graphic designer</p>
</div>
<hr>
<h2 style="margin-bottom: 30px;">My Works</h2>
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner" id="Work">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">If the Index finger of person is upward that means move the mouse but if index and middle finger are both upwards in a small distance only then it is a click</h2>
<img class="testimonial-image" src="images/VirtualMouse.PNG" alt="AI Virtual Mouse" height="300px" width="350px">
<em style="margin-left: 20px;">AI Virtual Mouse</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Based on the length of the line between the Index finger and the Middle finger, computer volume is made increased or decreased</h2>
<img class="testimonial-image" src="images/GestureVolumeControl.png" alt="Gesture Volume Control" height="400px" width="350px">
<em style="margin-left: 20px;">Gesture Volume Control</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Counts the number of curls of arm based on the elbow angle between them</h2>
<img class="testimonial-image" src="images/Personal Trainer.PNG" alt="AI Personal Trainer" height="400px" width="500px">
<em style="margin-left: 20px;">AI Personal Trainer</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Draws the bounding box on the boundary of the face based on facial landmarks</h2>
<img class="testimonial-image" src="images/Face Detector.png" alt="Face Detector" height="300px" width="350px">
<em style="margin-left: 20px;">Face Detector</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">Draws points on the face based on 468 facial landmarks</h2>
<img class="testimonial-image" src="images/Face Mesh.PNG" alt="Face Mesh" height="300px" width="350px">
<em style="margin-left: 20px;">Face Mesh</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">An imaginary beautiful pet caring service 😀. View full website on GitHub: <a class="website-link" href="https://soumyagautam.github.io/TinDog/" target="_blank">https://soumyagautam.github.io/TinDog/</a></h2>
<img src="images/TinDog.png" alt="TinDog" height="300px" width="650px">
<em style="margin-left: 20px;">TinDog</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">An Online Blog Framework made with Python library Flask where user can read, comment, log in, logout and signup for their accounts. Admins (i.e. me 😀) can publish and remove blog posts. View full code on GitHub: <a class="website-link" href="https://github.com/soumyagautam/soumya-blog" target="_blank">https://github.com/soumyagautam/soumya-blog</a></h2>
<img src="images/BlogSite4.png" alt="Blog Site" height="350px" width="600px">
<em style="margin-left: 20px;">Blog Site V4</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My personal card that tells about me but the profile pic is not mine.</h2>
<img src="images/Card.png" alt="Card" height="300px" width="600px">
<em style="margin-left: 20px;">Personal Card</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">A high quality game with sound effects</h2>
<img src="images/Space Invader.png" alt="Space Invader Game" height="300px" width="400px">
<em style="margin-left: 20px;">Space Invader Game</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">A little kanye quote desktop app</h2>
<img src="images/kanye.png" alt="Kanye Quaotes App" height="400px" width="225px">
<em style="margin-left: 20px;">Kanye Quotes App</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">An imaginary mobile company's website 😀. View full website on GitHub: <a class="website-link" target="_blank" href="https://soumyagautam.github.io/RealPhone/">https://soumyagautam.github.io/RealPhone/</a></h2>
<img src="images/RealPhone.png" alt="RealPhone" height="300px" width="600px">
<em style="margin-left: 20px;">RealPhone</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">An imaginary hotel's website 😀. View full website on GitHub: <a class="website-link" target="_blank" href="https://soumyagautam.github.io/Hotel_Sea_View_Imaginary/">https://soumyagautam.github.io/Hotel_Sea_View_Imaginary/</a></h2>
<img src="images/HotelSeaView.png" alt="Hotel Sea View" height="300px" width="600px">
<em style="margin-left: 20px;">Hotel Sea View</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<hr>
<div class="contact-me" id="Contact">
<h2>Get In Touch</h2>
<h3 style="margin-top: 20px;">I Can Help You</h3>
<p class="contact-message">Love chillies as much as I do? Let's connect now and discuss how tasty they are !!!</p>
<a class="btn" href="mailto:connect.soumyagautam@gmail.com">Contact Me</a>
</div>
</div>
</div>
<br><br>
<div class="bottom-container">
<a class="footer-link" href="https://www.instagram.com/leisuregrafy/" target="_blank"><img src="images/instagram.png" alt="Instagram" height="30px" width="30px"></a>
<a class="footer-link" href="https://github.com/soumyagautam" target="_blank"><img src="images/github.png" alt="GitHub" height="30px" width="30px"></a>
<p class="copyright">© 2022, Soumya Gautam, India</p>
</div>
</body>
</html>