Skip to content

Commit

Permalink
removed particles bg and added new gradient background effect library…
Browse files Browse the repository at this point in the history 
…. Added sidenav for mobile navigation"
  • Loading branch information
@dheerajshenoy
dheerajshenoy committed Feb 3, 2024
1 parent 89b7951 commit 1720bed
Show file tree
Hide file tree
Showing 14 changed files with 1,298 additions and 654 deletions.
28 changes: 19 additions & 9 deletions about_me.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@
<script src="./js/jquery-3.7.1.js"></script>
</head>
<body>

<script src="./js/index.js"></script>
<script src="./js/granim.min.js"></script>
<canvas id="bg-canvas"></canvas>
<div id="navbar">
<a href="./index.html" id="navbar--title--link"><span id="navbar--title">dheerajshenoy.github.io</span></a>
<button id="sidenav-menu-button" onclick="openSideNav()"></button>
<div id="navbar--buttons">
<ul>
<li><a href="index.html">Home</a></li>
Expand All @@ -20,19 +25,26 @@
</ul>
</div>
</div>

<div id="sidenav">
<a class="close-btn" href="javascript:void(0)" onclick="closeSideNav()">🗙</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about_me.html">About Me</a></li>
</ul>
</div>

<div class="main_content">
<span class="main_content--text">About Me</span>
<div class="main_content--hr"></div>

<h1>Introduction</h1>

<div id="info-container">

<img src="./images/dheeraj.jpg" alt="Avatar" id="avatar">
<p>I'm a post-graduate student of Physics with specialisation in Astrophysics and Data Analysis. I'm fond of computer science and programming. I'm currently working in the area of Solar Physics on Coronal Mass Ejections (CMEs) for my Masters Thesis at the Indian Institute of Astrophysics (IIA), Bangalore.
<p>I'm a post-graduate student of Physics with specialisation in Astrophysics and Data Analysis. I'm fond of computer science and programming. I'm currently working in the area of Solar Physics on Coronal Mass Ejections (CMEs) for my Masters Thesis.

Visit my <a href="https://www.everydingeverydong.blogspot.com/" target="_blank">blog</a> for updates on topics like open source softwares, physics, my personal experiences etc.
Visit my <a href="https://everydingeverydong.blogspot.com/" target="_blank">blog</a> for updates on topics like open source softwares, physics, my personal experiences etc.

</p>

Expand Down Expand Up @@ -70,15 +82,13 @@ <h4><u>Computer</u></h4>
<h3>Contact</h3>
<div id="contact_list">
<ul>
<li><a href="https://www.linkedin.com/in/dheeraj-vittal-shenoy" target="_blank"><img src="./images/linkedin.svg" class="contact_img" /></a></li>
<li><a href="https://twitter.com/dheerajshenoy22" target="_blank"><img src="./images/twitter.svg" class="contact_img" /></a></li>
<li><a href="https://github.com/dheerajshenoy" target="_blank"><img src="./images/github.svg" class="contact_img" /></a></li>
<li><a href="https://www.linkedin.com/in/dheeraj-vittal-shenoy" target="_blank"><img class="linkedin-icon" src="./images/linkedin.svg" class="contact_img" /></a></li>
<li><a href="https://twitter.com/dheerajshenoy22" target="_blank"><img src="./images/twitter.svg" class="contact_img x-icon" /></a></li>
<li><a href="https://github.com/dheerajshenoy" target="_blank"><img class="git-img" src="./images/github.svg" class="contact_img" /></a></li>
</ul>
</div>
</div>

<script src="./js/index.js"></script>
<canvas class="background"></canvas>
<script src="./js/particles.min.js"></script>
</body>
</html>
21 changes: 21 additions & 0 deletions css/about_me.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
#contact_list li {
display: inline-block;
margin: 10px;
transition: ease-out 0.3s;
}

#contact_list li:hover {
Expand Down Expand Up @@ -45,3 +46,23 @@
}

}

.linkedin-icon {
border-radius: 10px;
background-color: lightblue;
transition: ease-out 0.3s;
}

.linkedin-icon:hover {
box-shadow: 0 5px 10px 0 black;
}

.x-icon {
border-radius: 10px;
transition: ease-out 0.3s;
background-color: #08a0e9;
}

.x-icon:hover {
box-shadow: 0 5px 10px 0 black;
}
132 changes: 114 additions & 18 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ body {
padding: 0;
width: 100vw;
display: flex;
background-image: url("../images/bg.png");
/* background-image: url("../images/bg.png"); */
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #d8dee9;
/* background-color: black; */
color: white;
background-size: cover;
background-position: center;
Expand All @@ -21,10 +21,10 @@ body {
}

a {
color: #FF5000;
}

a:visited {
color: #2e3440;
}

/* remove margin on mobile phones */
Expand All @@ -38,27 +38,19 @@ a:visited {
flex-direction: column;
align-items: center;
}

}

#navbar--mini--button {
display: none;
}

@media only screen and (max-width: 200px) {

#navbar--buttons {
display: none;
}

}

#navbar {
/* background-color: #bf616a; */
background-color: #2e3440;
width: 100vw;
box-shadow: 0px 0px 20px 0px black;
z-index: 2;
position: relative;
}

#navbar--title {
Expand Down Expand Up @@ -121,6 +113,18 @@ a:visited {
background-color: #4c566a;
}

.main-container {
padding: 20px;
margin: 50px;
height: auto;
width: 80%;
border-radius: 10px;
background-color: rgba(12, 23, 12, 0.3);
box-shadow: 0 2px 10px 0 black;
backdrop-filter: blur(4px);
z-index: 1;
}

.main_content {
padding: 20px;
margin: 50px;
Expand Down Expand Up @@ -175,11 +179,103 @@ a:visited {
left: 0;
}

#bg-canvas {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
}

.git-img {
border-radius: 30px;
background-color: white;
transition: ease-out 0.3s;
}

.git-img:hover {
box-shadow: 0 5px 10px 0 black;
}

#sidenav {
right: 0;
top: 0;
overflow-x: hidden;
position: fixed;
height: 100%;
width: 0;
background-color: black;
z-index: 2;
padding: 0;
transition: ease-out 0.3s;
}

#sidenav li {
list-style: none;
margin: 0;
padding: 0;
}

#sidenav a {
text-decoration: none;
font-family: "Rajdhani Semibold", sans-serif;
font-size: 1em;
padding: 10px;
display: block;
transition: 0.3s;
color: gray;
}

#sidenav a:hover {
color: white;
}

#sidenav ul {
padding: 0;
}

.close-btn {
top: 0;
font-family: Rajdhani Semibold;
background-color: gray;
}

#sidenav .close-btn {
color: white;
}

#sidenav .close-btn:hover {
color: black;
}

#sidenav-menu-button {
float: right;
border: none;
font-size: 1.25em;
width: 20px;
border-radius: 20px;
height: 20px;
background-color: orange;
pading: 20px;
margin: 10px;
display: none;
}

.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
#sidenav-menu-button:hover {
background-color: gold;
}

/* Toggle the menu button for switching between sidenav and navbar */
@media only screen and (max-width: 700px) {

#navbar--buttons {
display: none;
}

#sidenav-menu-button {
display: block;
}

}

6 changes: 6 additions & 0 deletions css/projects.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

#project-link {
text-decoration: none;
font-family: Rajdhani Semibold;
color: black;
}

.project-card:hover {
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5);
}
Expand Down
1 change: 1 addition & 0 deletions images/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/home.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 21 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,43 +8,41 @@
<script src="./js/jquery-3.7.1.js"></script>
</head>
<body>
<script src="./js/index.js"></script>
<script src="./js/granim.min.js"></script>
<canvas id="bg-canvas"></canvas>
<div id="navbar">
<a href="./index.html" id="navbar--title--link"><span id="navbar--title">dheerajshenoy.github.io</span></a>
<button id="sidenav-menu-button" onclick="openSideNav()"></button>
<div id="navbar--buttons">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about_me.html">About Me</a></li>
</ul>
</div>
<div id="navbar--mini--button">
BB
</div>


</div>
<div class="main_content restrict_width">

<div id="sidenav">
<a class="close-btn" href="javascript:void(0)" onclick="closeSideNav()">🗙</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about_me.html">About Me</a></li>
</ul>
</div>

<div class="main_content">
<span class="main_content--text">Home</span>
<div class="main_content--hr"></div>
Just a simple github project homepage. I'm still learning web development in my free time, so this might not be a beautiful website, but I like it.
<br><br>

Colorscheme for the website is from <a href="https://www.nordtheme.com" target="_blank"><i>Nord</i></a>
<br><br>
Super cool particle effects are done using the javascript library <a href="https://github.com/marcbruederlin/particles.js"><i>Particles.js</i></a>
<br>
<br>
<button id="todo-btn" class="stylish-button" onclick="todo_btn_click()">See TODO</button>
<!-- Not Shown --!>
<div id="todo-box">
<h2>TODO</h2>
<ul>
<li>Add contents</li>
<li>Learn more about writing good code</li>
</ul>
</div>
</div>

<script src="./js/index.js"></script>
<canvas class="background"></canvas>
<script src="./js/particles.min.js"></script>
<div id="selected-projects-box">
HELLO WORLD
</div>
</div>
</body>
</html>
Loading

0 comments on commit 1720bed

Please sign in to comment.