-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
223 lines (205 loc) · 9.25 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
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Github Page for Manik Sharma">
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
<title>Hello, World!</title>
</head>
<body>
<div class="container">
<font size="20">
<h1 class="title">Hello, World!</h1>
</font>
<p><font size="16">whoami</font></p>
<p class="description">This is my website. I am Manik Sharma. <br> I am a 12 year old (currently) developer from India. <br> I like to do stuff like coding and I love to use Python and some Arduino or ESP32 for my projects. <br> I am currently learning Godot and C/C++ (and doing more with Pygame!) <br> <br> Check out some of my projects below!</p>
<a href="https://maniksharma69420.github.io/atlas" class="btn">Letsplayatlas</a>
<a href="https://www.github.com/ManikSharma69420" class="btn">The Github</a>
<a href="https://maniksharma2.website3.me" class="btn">Clickthebutton!</a>
<br>
<center>
<hr style="width:50%;height:5px;"><br>
<p><font size="16">My Projects:</font></p>
<br>
<br>
<p>
<img src="daVidTools.png" alt="DaVidTools" /> <br>
<font size="12">DaVidTools</font><br>
daVidTools is a passion project of mine. <br>
It is a camera - picture and video and voice recorder app. <br>
It is made in Python using PyAutoGUI and PySimpleGUI for the GUI <br>
and sounddevice and OpenCV for audio and camera respectively. <br>
<a href="https://github.com/ManikSharma69420/daVidTools">Link here</a>
</p>
<br>
<br>
<p>
<img src="SimplTextEditor.png" alt="SimplTextEditor" /> <br>
<font size="12">Simpl-TextEditor</font><br>
Simpl-TextEditor is a simple text editor (wow who would have guessed!) <br>
made using Python and Tkinter only. It lacks some basic features, and <br>
is pretty basic albeit nice imo (could be biased lol). <br>
<a href="https://github.com/ManikSharma69420/Simpl-TextEditor">Link here</a>
</p>
<br>
<br>
<p>
<img src="TicTacToeTK.png" alt="TicTacToeTK" /> <br>
<font size="12">TicTacToeTK</font><br>
TicTacToeTK is another simple TicTacToe clone using <br>
only Tkinter (I love this library btw) and Python <br>
it is pretty much everything you need but no AI (yet). <br>
<a href="https://github.com/ManikSharma69420/TicTacToeTK">Link here</a>
</p>
<br>
<br>
<p>
<img src="ThePOCGame.png" alt="ThePOCGame" /> <br>
<font size="12">ThePOCGame</font><br>
ThePOCGame is a simple game made using Pygame <br>
(yay something different!) and Python (yea I like Python) <br>
It basically consists on some obstacles you have to pass and <br>
it gets progressivly harder as you continue. Link below: <br>
(I misspelled the Github repo name lol - From POC to PCO). <br>
<a href="https://github.com/ManikSharma69420/ThePCOGame">Link here</a>
<br>
<a href="ThePOCGame.html">Play it online here</a>
</p>
<br>
<br>
<p>
<img src="NavDet.png" alt="NavDet"> <br>
<font size="12">NavDet (ArduinoObjectSensor)</font><br>
Ahh, finally the reason I made this Github. This is code <br>
for a competition for which the diagram is give above. <br>
This is my trusty NavDet. Feel free to use it! It uses an <br>
Arduino and a HCSR04 and other stuff (on the Github page) <br>
and I'm really proud of it. <br>
<a href="https://github.com/ManikSharma69420/ArduinoObjectSensor">Link here</a>
</p>
<br>
<br>
<p>
<img src="ChessPuzzle.png" alt="ChessPuzzle"> <br>
<font size="12">PyGameChess Puzzles</font><br>
This is a new project of mine! The inspiration came from <br>
a riddle which had a 5x5 chess baord. I checked and I couldn't <br>
find ANY games which had a 5x5 chess board. So, instead of making <br>
It it Adobe Express (school gave me), I made it in PyGame as ANY <br>
Programmer HAD TO! (lol). Try it! :D <br>
<a href="https://github.com/ManikSharma69420/PyGameChessPuzzles">Link here</a>
</p>
<br>
<br>
<p><font size="5">And Many More!... Check them out on my Github and the links above (like letsplayatlas and Clickthebutton!)</font></p>
<br><br>
<p><font size="4">Contact me!</font></p> <br><br>
<a href="mailto:[email protected]" class="emailbutton>
<span class="icon">
<img src="email_icon.png" alt="Email me!">
</span>
<span class="text">Email me!</span>
</a>
<a href="https://twitter.com/reiskaek" class="twitterbutton>
<span class="twittericon">
<img src="twitter_logo.png" alt="Check out my twitter!">
</span>
<span class="twittertext">Check out my twitter!</span>
</a>
<br><br><br>
<p xmlns:cc="http://creativecommons.org/ns#" ><a rel="cc:attributionURL" href="https://github.com/ManikSharma69420">This work</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://maniksharma69420.github.io/">Manik Sharma</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
</center>
</div>
<script <script src="https://silly.possiblyaxolotl.com/ring/webstring.js"></script>
<script>
const container = document.querySelector('.container');
const image = document.getElementById('myImage');
function checkImageSize() {
const containerWidth = container.clientWidth;
const imageWidth = image.clientWidth;
// Check if the image exceeds the container width
if (imageWidth > containerWidth) {
// Scale down the image by 65%
image.style.transform = 'scale(0.65)';
} else {
// Reset to original size if it fits
image.style.transform = 'scale(0.75)';
}
}
// Run the function on page load
window.onload = checkImageSize;
// Optional: Run the function on window resize
window.onresize = checkImageSize;
</script>
<style>
.emailbutton {
background: linear-gradient(to right, #1A2980 0%, #26D0CE 100%);
color: white;
padding: 15px 40px;
margin: 10px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
background-size: 200% auto;
border-radius: 60px;
height: 32px;
display: inline-flex;
align-items: center;
overflow: hidden;
width: 40px; /* Start as a small button */
transition: width 0.5s ease; /* Smooth expansion */
position: relative; /* Prevents logo or text shifting */
}
.emailbutton:hover {
width: 140px; /* Expands only to the right */
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px; /* Keeps the Poki logo in the center of the small button */
flex-shrink: 0; /* Prevents the icon from shrinking when text appears */
}
.icon img {
height: 20px;
width: 20px;
}
.text {
white-space: nowrap;
opacity: 0; /* Initially hidden */
padding-left: 8px;
transition: opacity 0.5s ease; /* Smooth fade-in effect */
}
.twitterbutton:hover .text {
opacity: 1; /* Text appears on hover */
}
.twitterbutton:hover {
width: 140px; /* Expands only to the right */
}
.twittericon {
display: flex;
justify-content: center;
align-items: center;
width: 40px; /* Keeps the Poki logo in the center of the small button */
flex-shrink: 0; /* Prevents the icon from shrinking when text appears */
}
.twittericon img {
height: 20px;
width: 20px;
}
.twittertext {
white-space: nowrap;
opacity: 0; /* Initially hidden */
padding-left: 8px;
transition: opacity 0.5s ease; /* Smooth fade-in effect */
}
.twitterbutton:hover .text {
opacity: 1; /* Text appears on hover */
}
</style>
</body>
</html>