Skip to content

Commit 8f1db26

Browse files
BinaryVectorJrBinaryVectorJr
committed
Updated Index Site to be clean
1 parent 6bf9c43 commit 8f1db26

File tree

1 file changed

+137
-99
lines changed

1 file changed

+137
-99
lines changed

‎index.html‎

Lines changed: 137 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -3,84 +3,23 @@
33
<title>Home</title>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7-
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
6+
<!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
87

98
<style>
109

11-
.w3-row-padding img {margin-bottom: 12px}
12-
<!-- /* Remove margins from "page content" on small screens */ -->
13-
<!-- @media only screen and (max-width: 600px) {#main {margin-left: 0}} -->
14-
.wrapper { text-align: center; }
10+
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
11+
@media (max-width: 600px) {
12+
section {
13+
-webkit-flex-direction: column;
14+
flex-direction: column;
15+
}
16+
}
1517
.button {
1618
position: absolute;
1719
top: 50%;
1820
}
1921

20-
hr{
21-
height: 2px;
22-
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
23-
24-
border:0;
25-
height:1px;
26-
}
27-
28-
footer{
29-
background-color: #222;
30-
}
31-
32-
body {
33-
font-family: ubuntu;
34-
padding: 0;
35-
margin: 0;
36-
font-size: 18px;
37-
}
38-
39-
.img-circle{
40-
border-radius: 50%;
41-
}
42-
43-
.container {
44-
position: relative;
45-
font-size: 18px;
46-
}
47-
48-
.overlay {
49-
position: absolute;
50-
top: 0;
51-
bottom: 0;
52-
left: 0;
53-
right: 0;
54-
height: 100%;
55-
width: 100%;
56-
opacity: 0;
57-
transition: .5s ease;
58-
background-color: #008080;
59-
}
60-
61-
.container:hover .overlay {
62-
opacity: 3;
63-
filter: alpha(opacity=30);
64-
65-
transition: all 0.5s ease-in-out;
66-
-webkit-transition: all 0.5s ease-in-out;
67-
-moz-transition: all 0.5s ease-in-out;
68-
-o-transition: all 0.5s ease-in-out;
69-
}
70-
71-
.text {
72-
color: white;
73-
font-size: 18px;
74-
position: absolute;
75-
top: 50%;
76-
left: 50%;
77-
-webkit-transform: translate(-50%, -50%);
78-
-ms-transform: translate(-50%, -50%);
79-
transform: translate(-50%, -50%);
80-
text-align: center;
81-
}
82-
83-
#myBtn {
22+
#toggleModeBtn {
8423
display: none;
8524
position: fixed;
8625
bottom: 15px;
@@ -96,54 +35,137 @@
9635
border-radius: 4px;
9736
}
9837

99-
#myBtn:hover {
38+
body{
39+
font-size: 16px;
40+
}
41+
42+
footer {
43+
background-color: #777;
44+
padding: 10px;
45+
text-align: center;
46+
color: white;
47+
}
48+
#toggleModeBtn:hover {
10049
background-color: #555;
10150
}
51+
52+
.tab {
53+
display:inline-block;
54+
margin-left: 40px;
55+
}
56+
57+
.title
58+
{
59+
display: block;
60+
height: 22px;
61+
line-height: 22px;
62+
padding: 4px 6px;
63+
font-size: 16px;
64+
color: #000;
65+
margin-bottom: 13px;
66+
}
67+
.title .left-float { float:left }
68+
.title .right-float { float:right }
69+
70+
.content .sub-content .left-float { float:left }
71+
.content .sub-content .right-float { float:right }
72+
73+
.content{
74+
padding: 10px;
75+
}
76+
77+
.sub-content{
78+
padding: 10px;
79+
}
80+
10281
</style>
10382

104-
<body class="w3-white">
83+
<body>
10584

106-
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
85+
<button onclick="toggle_visibility('cvsection')" id="toggleModeBtn" title="Go to top">Show Details</button>
10786

10887
<!-- BEGIN PAGE CONTENT -->
10988
<div id="main">
11089
<!-- Header/Home -->
111-
<header class="w3-container w3-center w3-white" id="home">
112-
<h1 class="w3-xxxlarge"><span class="w3-hide-small">Hello there....it's been a while since anyone has been here.</strong></h1>
90+
<header id="home">
91+
<h1>Angshuman Mazumdar</h1>
92+
<h2>Games and Simulation Researcher</h2>
93+
<!-- My Portfolio Link -->
94+
<div class="title">
95+
<span class="right-float"><a href="./portfolio.html">Click here for visual examples of my work. Promise, this is not a scam :)</a></span>
96+
<span class="left-float"><i>West Lafayette</i></span>
97+
</div>
98+
<hr>
11399
</header>
114100

115101
<!-- ABOUT SECTION -->
116-
<div class="w3-content w3-justify w3-text-grey w3-padding-large w3-center" id="about">
117-
<p> You seem lost. Oh, you are? </p>
118-
<p>No worries! Let me guide you through the exit!</p>
102+
<div class="content" id="skills">
103+
<b>KEY SKILLS AND ABILITIES</b>
104+
</div>
105+
<div class="sub-content">
106+
<b>Computer Vision and Graphics</b><br>
107+
<p><span class="tab">Unreal Engine (Blueprint & C++), Unity (Desktop, Mobile, & Oculus SDK), World Machine, AnyLogic, NetLogo</span></p>
119108

120-
<br>
109+
<b>Deveopment</b><br>
110+
<p><span class="tab">C#, C++, CUDA, Vulkan, Visual Basic for Applications (VBA), Full stack (HTML, CSS, JavaScript, Django)</span></p>
121111

122-
<!-- My Portfolio Link -->
123-
<div class="w3-container w3-center" id="links">
124-
<a href="./portfolio.html"> <img class="img-square" src="./images/door.png" alt="Exit" style="width:100px">
125-
<!-- <a href="https://www.flaticon.com/free-icons/door" title="door icons">Door icons created by Retinaicons - Flaticon</a> -->
126-
</div>
112+
<b>Research and Management</b><br>
113+
<p><span class="tab">Microsoft Power Automate, Microsoft Forms, Git, Jira, Overleaf</span></p>
127114

115+
<b>Soft Skills</b><br>
116+
<p><span class="tab">Team Management and leadership, public speaking, mentoring, detail-oriented decision making</span></p>
117+
</div>
118+
</div>
119+
<hr>
120+
<div class="content" id="education">
121+
<b>EDUCATION</b>
122+
</div>
123+
<div class="sub-content">
124+
<span class="left-float"><b>Doctor of Philosophy – Technology (Agent Based Simulation)</b> &emsp; Aug 2021 - Present</span>
125+
<p><span class="tab"><i>Purdue University, West Lafayette, IN</i></span></p>
126+
127+
<span class="left-float"><b>Master of Science – Computer Graphics Technology </b> &emsp; Aug 2019 - May 2021</span>
128+
<p><span class="tab"><i>Purdue University, West Lafayette, IN</i></span></p>
129+
130+
<span class="left-float"><b>Semester Exchange Program – Capstone Project (Robotics)</b> &emsp; Jan 2019 - May 2019</span>
131+
<p><span class="tab"><i>Rochester Institute of Technology, Rochester, NY</i></span></p>
132+
133+
<span class="left-float"><b>Bachelor of Technology – Electronics and Communication Engineering</b> &emsp; Jul 2015 - May 2019</span>
134+
<p><span class="tab"><i>Vellore Institute of Technology, Vellore, Tamil Nadu (India)</i></span></p>
135+
</div>
136+
</div>
137+
<hr>
138+
<div class="content" id="experience">
139+
<b>PROFESSIONAL EXPERIENCE</b>
140+
</div>
141+
<div class="sub-content">
142+
<span class="left-float"><b>Lead Graduate Teaching Assistant</b></span>
143+
<p><span class="tab"><i>Purdue University, West Lafayette, IN</i></span></p>
144+
145+
<span class="left-float"><b>Interaction Mechanic Developer (Contract)</b></span>
146+
<p><span class="tab"><i>Purdue University, West Lafayette, IN</i></span></p>
147+
148+
<span class="left-float"><b>Summer Trainee Intern</b></span>
149+
<p><span class="tab"><i>Bharti Airtel, Chandigarh, Punjab, India</i></span></p>
150+
</div>
128151
</div>
129152

130153
</div>
131154

132155
<!-- w3-text-white makes the black icons into white -->
133156

134157
<!-- Footer -->
135-
<footer class="w3-bottom w3-padding-16 w3-hover-opacity-on w3-text-white">
136-
<div class="w3-large w3-center">
137-
<a href="https://twitter.com/BinaryVectorJr" target="_blank"><i class="fa fa-twitter w3-text-white w3-hover-opacity"></i></a>&nbsp
138-
<a href="https://www.linkedin.com/in/angshuman-mazumdar-a0b75a130/" target="_blank"><i class="fa fa-linkedin w3-text-white w3-hover-opacity"></i></a>&nbsp
139-
</div>
158+
<footer class="w3-bottom">
140159
<p class="w3-large w3-center">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-grey">w3.css</a> and <a href="https://www.flaticon.com/free-icons/door" title="door icons">Door icons created by Retinaicons - Flaticon</a> </p>
141160
</footer>
142161

143162
<!-- END PAGE CONTENT -->
144163
</body>
145164

146-
<script>
165+
<script type="text/javascript">
166+
167+
document.getElementById("toggleModeBtn").style.display = "block";
168+
147169
// Used to trigger the accordion
148170
function myFunction1(id) {
149171
var x = document.getElementById(id);
@@ -155,22 +177,38 @@ <h1 class="w3-xxxlarge"><span class="w3-hide-small">Hello there....it's been a w
155177
}
156178

157179
// When the user scrolls down 20px from the top of the document, show the button
158-
window.onscroll = function() {scrollFunction()};
159-
160-
function scrollFunction() {
161-
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
162-
document.getElementById("myBtn").style.display = "block";
163-
} else {
164-
document.getElementById("myBtn").style.display = "none";
165-
}
166-
}
180+
// window.onscroll = function() {scrollFunction()};
181+
182+
// function scrollFunction() {
183+
// if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 20) {
184+
// document.getElementById("toggleModeBtn").style.display = "block";
185+
// } else {
186+
// document.getElementById("toggleModeBtn").style.display = "none";
187+
// }
188+
// }
167189

168190
// When the user clicks on the button, scroll to the top of the document
169191
function topFunction() {
170192
document.body.scrollTop = 0;
171193
document.documentElement.scrollTop = 0;
172194
}
173195

196+
function toggle_visibility(cvsection) {
197+
var e = document.getElementById(cvsection);
198+
document.getElementById("toggleModeBtn").textContent = 'Show Details';
199+
if(e.style.display == 'block')
200+
{
201+
e.style.display = 'none';
202+
document.getElementById("toggleModeBtn").textContent = 'Show Details';
203+
}
204+
else
205+
{
206+
e.style.display = 'block';
207+
document.getElementById("toggleModeBtn").textContent = 'Hide Details';
208+
}
209+
210+
}
211+
174212
</script>
175213

176214
</html>

0 commit comments

Comments
 (0)