-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (146 loc) · 8.61 KB
/
index.html
File metadata and controls
178 lines (146 loc) · 8.61 KB
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
<!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>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul class="nav nav-transparent" id="nav">
<li><a href="#" class="hover-underline-animation">Home</a></li>
<li><a href="#about-me" class="hover-underline-animation">About me</a></li>
<li><a href="#skills" class="hover-underline-animation">My skills</a></li>
<li><a href="#my-works" class="hover-underline-animation">My work</a></li>
<li><a href="#contacts" class="hover-underline-animation">Contact me</a></li>
</ul>
</div>
<div class="section" id="home">
<img src="img/bg.jpg" alt="Background" id="background">
<div class="gradient"></div>
<div class="text">
<h1 class="heading">My name is Sarbagya.</h1>
<p>A student, Programmer, Enginerring Aspirant.</p>
<a href="#my-works"><button id="work">See My Work</button></a>
</div>
</div>
<div class="section" id="about-me">
<div class="text">
<span id="special-text">Hello, My name is Sarbagya</span>
<p>
I am a 18 year old student Studying +2 science in <span><a href="https://www.google.com/search?q=Arniko+Awasiya+Secondary+School" target="_blank">Arniko Awasiya Secondary School</a></span>. I love the feild of Computer Science mainly becuase it teaches the arts of programming and solving real world problems through it. I spend most of my free time reading about topics in science and technology, particularly in the fields of computer science and physics, and I'm constantly looking for new ways to learn and expand my knowledge. My ultimate goal is to work for a big tech company. What drives me every day is the excitement of learning and exploring new ideas. I'm always striving to improve my skills and knowledge. I believe that technology has the power to change the world for the better, and I want to be a part of that change. Whether it's creating software that helps people connect with each other or designing systems that make our world more sustainable,
</p>
<span id="drive">I'm driven by the potential to make a <span>difference</span>.</span>
</div>
<img src="img/me.jpg" alt="Picture of me">
</div>
<div class="section" id="skills">
<h1 class="heading">My Skills</h1>
<div class="container">
<div class="inner" id="inner-js" title="Javascript">
<div class="box" id="js">
<img src="img/skills/js.png" alt="">
</div>
<div class="status"><div class="progress"></div></div><div class="text">35%</div>
</div>
<div class="inner" id="inner-py" title="Python">
<div class="box" id="python">
<img src="img/skills/py.png" alt="">
</div>
<div class="status"><div class="progress"></div></div><div class="text">70%</div>
</div>
<div class="inner" id="inner-web-dev" title="Web-Development">
<div class="box" id="web-dev">
</>
</div>
<div class="status"><div class="progress"></div></div><div class="text">40%</div>
</div>
<div class="inner" id="inner-c" title="C Programming">
<div class="box" id="c">
<img src="img/skills/c.png" alt="">
</div>
<div class="status"><div class="progress"></div></div><div class="text">65%</div>
</div>
</div>
</div>
<div class="section" id="my-works">
<h1 class="heading">My work</h1>
<div class="card-container">
<div class="cards">
<div class="inner-card">
<h3 class="heading"><a href="https://github.com/Subdev514/premix" target="_blank">Discord bot using python</a></h3>
<p>Using python I built a discord bot that responds to your commads and edits the bot settings itself accroding to the liking. The bot comprises of more than 700 lines of code and is one my biggest project yet.</p>
</div>
</div>
<div class="cards">
<div class="inner-card">
<h3 class="heading"><a href="https://github.com/Subdev514/Motivational_texts" target="_blank">Motivational text message</a></h3>
<p>Made in python Motivational text message is a program that will send you motivational texts every day at specified time. While making the project I learned a lot about how to work with APIs and other valueable things. The program is fully customizable and I walk through the entire setup.</p>
</div>
</div>
<div class="cards">
<div class="inner-card">
<h3 class="heading"><a href="https://github.com/Subdev514/Demon_slayer_website" target="_blank">Anime review website</a></h3>
<p>Demon slayer is one of the most visually appealing anime.As a fan of the anime one of the first complete website I ever designed was a website all about the anime. It was my first expreinces in web design and I got to learn a lot from it.</p>
</div>
</div>
<div class="cards">
<div class="inner-card">
<h3 class="heading"><a href="#">This Website</a></h3>
<p>This website took several hours to make and it was one of the best expreinces I have ever had in web-design. The website is built mostly with HTML and CSS and slight javascript. I want to thank my computer teacher Er. Abhay Karn for providing me the opportunity and helping me along the journey.</p>
</div>
</div>
</div>
</div>
<div class="section" id="contacts">
<div class="inner-contact">
<h1 class="heading">Contacts</h1>
<div class="inner-inner-contact">
<a href="mailto:bhattaraid514@gmail.com">
<div class="links" id="link-1">
<img src="img/social/gmail.png" alt="Gmail icon"> Bhattaraid514@gmail.com
</div>
</a>
<div class="links" id="link-2">
<img src="img/social/discord.png" alt="Discord icon"> lonely guy#4624 <img src="img/star.png" alt="star"> <span class="active">Most Active</span>
</div>
<a href="tel:+977 9817362856">
<div class="links" id="link-3">
<img src="img/social/phone.png" alt="Phone icon"> +977 9817362856
</div>
</a>
<a href="https://github.com/Subdev514/">
<div class="links" id="link-3">
<img src="img/social/github.png" alt="github icon"> Github.com/Subdev514
</div>
</a>
<a href="https://www.facebook.com/sarbagya.bhattarai">
<div class="links" id="link-4">
<img src="img/social/fb.png" alt="Facebook icon"> Sarbagya Bhattarai
</div>
</a>
<a href="https://www.facebook.com/sarbagya.bhattarai">
<div class="links" id="link-5">
<img src="img/social/messenger.png" alt="Messenger icon"> Sarbagya Bhattarai
</div>
</a>
</div>
</div>
<footer>Copyright © Sarbagya Bhattarai</footer>
</div>
<script>
window.onscroll = () => {
if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 ) {
document.getElementById("nav").classList.add("nav-colored")
document.getElementById("nav").classList.remove("nav-transparent")
}
else {
document.getElementById("nav").classList.add("nav-transparent");
document.getElementById("nav").classList.remove("nav-colored");
}
}
</script>
</body>
</html>