-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (133 loc) · 9.88 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
<!DOCTYPE html>
<html>
<head>
<title>
Bibek's Portfolio
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico" />
<meta name="viewport" content="width=device-widht,inital-scale=1">
<link rel="stylesheet" href="assets/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet">
<!-- Fontawesome CDN include -->
<script src="https://kit.fontawesome.com/f4013c76e7.js" crossorigin="anonymous"></script>
<body>
<div class="webpage">
<div class="navigation">
<header>
<a href="#about_me"><i class="fas fa-user"></i>Bibek Dhakal</a></header>
<ul>
<li><a href="#about_me">About Me</a></li>
<li><a href="#my_skills">My Skills</a></li>
<li><a href="#contact_me">Contact</a></li>
<li><a href="#my_projects">Projects</a></li>
</ul>
</div>
<div class="social_media">
<div class="vertical_line"></div>
<div class="github icon"><a href="https://github.com/Bibekdhkl" class="fab fa-github" target="_blank"></a> </div>
<div class="twitter icon"><a href="https://twitter.com/bibekdhkl" class="fab fa-twitter" target="_blank"></a> </div>
<div class="hackerrank icon"><a href="https://www.hackerrank.com/Bibekdhkl" class="fab fa-hackerrank" target="_blank"></a> </div>
<div class="likedIn icon"><a href="https://www.linkedin.com/in/bibekdhkl/" class="fab fa-linkedin" target="_blank"></a> </div>
</div>
<main>
<section id="about_me">
<img src="assets/bibekdhkl.png" class="profile_img">
<div class="about_me_description">
<b style="color:blue;font-weight: 900;font-size: 2em;">Portfolio Upgrade ongoing...</b><br>
<h1>Hi there!</h1>
<p><b>I'm Bibek</b><br>An avid Learner, Programmer and an undergrad student who has been exploring different Tech domains as well as passionate on reading books of Self-Help, Novels and Programming. I am working on to be a responsible citizen of mother Earth as I believe in growing together. </p>
</div>
</section>
<hr><hr>
<!-- My skills section -->
<section id="my_skills">
<h2>My Skills</h2>
<div class="skills-div">
<div class="skills-description">
I am familiar with Procedural Oriented, Object Oriented, Markup, Markdown languages along with JS on Client side and PHP on server-side with MY-SQL as Database.
</div>
<div class="skill-bar">
<ul class="tech_stack">
<li>C-Programs<br><img src="assets/cprogram.png" alt="cprogram"></li>
<li>C++ Programs<br><img src="assets/cplusplus.png" alt="c++"></li>
<li>HTML<br><img src="assets/html.png" alt="html"></li>
<li>CSS<br><img src="assets/css.png" alt="html"></li>
<li>JavaScript<br><img src="assets/javascript.png" alt="js"></li>
<li>PHP<br><img src="assets/php.png" alt="php"></li>
<li>MYSQL<br><img src="assets/mysql.png" alt="mysql"></li>
<li>Java<br><img src="assets/java.png" alt="Java"></li>
<li>Python<br><img src="assets/python.png" alt="Python"></li>
<li>Linux<br><img src="assets/linux.png" alt="Linux"></li>
</ul>
</div>
</div>
</section>
<hr/><hr/>
<section id="other_tech">
<h2>Other Technology</h2>
<div class="skills-div">
<div class="skills-description">
Some technologies I have been using regularly in my projects
</div>
<div class="skill-bar">
<ul class="tech_stack">
<li>Git<br><img src="assets/git.png" alt="Git"></li>
<li>Github<br><img src="assets/github.png" alt="Github"></li>
<li>Gitlab<br><img src="assets/gitlab.png" alt="Gitlab"></li>
<li>Vim<br><img src="assets/vim.png" alt="Vim"></li>
<li>Open Source<br><img src="assets/opensource.png" alt="Open Source"></li>
<li>Ubuntu<br><img src="assets/ubuntu.png" alt="Ubuntu"></li>
<li>Google Collab<br><img src="assets/googleColab.png" alt="google Collab"></li>
</ul>
</div>
</div>
</section>
<hr><hr>
<!-- Project section -->
<div id="my_projects">
<h2>My Projects</h2>
<p>These are the collections of projects that I have done:</p>
<div class="projects_tiles">
<div class="project">Project 1 Coming soon...</div>
<div class="project">Project 2 Coming soon...</div>
<div class="project">Project 3</div>
<div class="project">Project 4</div>
<div class="project">Project 5</div>
<div class="project">Project 6</div>
</div>
</div>
<hr><hr>
<section id="contact_me">
<!-- <h2>Contact Me</h2> -->
<h1 onmouseover="addText()" onmouseout="removeText()">Let's have a coffee together!<span id="text_area"></span></h1></span>
<div class = "inside_contact_me">
<div class="user_details">
<input class="first_input" type="text" placeholder="Your name"><br>
<input class="first_input" type="email" placeholder="Your email"><br>
<input class="message_me" type="text" placeholder="Message Me" ><br>
<input class="send_button" type="button" value="Send">
</div>
<div class="my_information">
<p class="my_info_text">
Imadol, Lalitpur<br>
Feel free to Reach out to Me<br>
on <b>LinkedIn or Twitter</b>
</p>
</div>
</div>
<!-- <button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button> -->
<button onclick="scrollToTop()" class="totop">^</button>
</section>
<footer>
<p>Contribute to the Portfolio from <a href="https://github.com/Bibekdhkl/bibekdhkl.github.io" style="color:blue
">Here</a></p>
<p class="footer_text">© Copying this site will cost you a Github Follow ;) </p>
</footer>
</main>
</div>
<script src="app.js"></script>
</body>
</head>
</html>