Skip to content

Commit

Permalink
fixed commit
Browse files Browse the repository at this point in the history
  • Loading branch information
WilliamBergamin authored and WilliamBergamin committed Nov 24, 2018
1 parent dc0368a commit fce19f1
Showing 1 changed file with 234 additions and 0 deletions.
234 changes: 234 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html>
<title>William WebSite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/stylebasic.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* TODO take this resource out make it local*/
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url('/static/backb.png');
min-height: 100%;
}

/* Third image (Contact) */
.bgimg-3 {
background-image: url("/static/backb.png");
min-height: 400px;
}

.wide {letter-spacing: 10px;}
.hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-3 {
background-attachment: scroll;
min-height: 400px;
}
}
</style>
<body>

<!-- Navbar (sit on top) -->
<div class="top">
<div class="bar" id="myNavbar">
<a class="bar-item button hover-black hide-medium hide-large right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="bar-item button">HOME</a>
<a href="#about" class="bar-item button hide-small"><i class="fa fa-user"></i> ABOUT</a>
<a href="#portfolio" class="bar-item button hide-small"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="#contact" class="bar-item button hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="bar-block white hide hide-large hide-medium">
<a href="#about" class="bar-item button" onclick="toggleFunction()">ABOUT</a>
<a href="#portfolio" class="bar-item button" onclick="toggleFunction()">PORTFOLIO</a>
<a href="#contact" class="bar-item button" onclick="toggleFunction()">CONTACT</a>
</div>
</div>

<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 display-container opacity-min" id="home">
<div class="display-middle" style="white-space:nowrap;">
<span class="center padding-large black xlarge wide animate-opacity">GREATINGS, <span class="hide-small">FRIEND</span></span>
</div>
</div>

<!-- Container (About Section) -->
<div class="content container padding-64" id="about">
<h3 class="center">ABOUT ME</h3>
<p>I am a third year student enrolled in Concordia University’s Computer Engineering Co-op program with an expected graduation in May 2020. I have been a JAVA software developer for the past year at TD insurance. During my time there, I gained knowledge on the front to
back-end components of TD Insurance services. I would configure and develop components with technology partners to meet specific goals and requirements. More specifically, I was responsible for the development of JAVA APIs and updating out-dated back-end services,
to ensure they are free of coding vulnerabilities and follow proper security standards. I have been involved in several projects during my time at Concordia University, which have strengthened my skill set. For example, I have taken part in 3 hackathons that I have
successfully completed and won prizes. In McGill RoboHack 2017, my team and I won “Best Electrical Robot” with our project “ShotBot”, a Robot controlled via Bluetooth that was capable of detecting and filling up to 6 glasses with liquid. In BlockHacks 2017, my team
and I won 2nd place overall with our Avalon project, two Android application that allowed refugees to connect with refugee centers and update their personal information. Most recently in RoboHacks 2018, my team and I won 1st place for having created the Perifold Robot,
which used Arduino and AI technologies to fold shirts. All projects were created and demonstrated during a 24 hour timeframe. Participating in hackathons did not only enhance my ability to work within time constraints, but further improved my technical communication skills,
ability to work with limited resources, capability to delegate tasks and work in a team.</p>
<div class="row">
<div class="col m6 center padding-large">
<p><b><i class="fa fa-user margin-right"></i>William Bergamin</b></p><br>
<img src="/static/me.jpg" class="round image" alt="Photo of Me" width="500" height="333">
</div>

<!-- Hide this text on small devices -->
<div class="col m6 hide-small padding-large">
<p>I am currently Vice-President of Social Affairs for Concordia’s Engineering & Computer Science Association (ECA). I am responsible of coordinating all social events for the engineering students at Concordia. This position allows me to negotiate all contracts pertaining
to these social events with both internal and external contacts. This also means that I am the person responsible of managing the budget of these events. Finally, the most important part of my mandate is getting students involved in the various societies Concordia Engineering
has to offer. Additionally, I was part of Concordia’s Engineering Games delegation, placing 3rd overall in the 2018 provincial Engineering Games. In this 4-day competition, I competed in an academic challenge in the form of an engineering exam and a physical challenge in the form
of a sports competition. Furthermore, my 4 years experience working in customer service can also demonstrate my strong people and teamwork skills in both English and French.</p>
</div>
</div>
</div>

<!-- Container (Portfolio Section) -->
<div class="content container padding-64" id="portfolio">
<h3 class="center">MY WORK</h3>
<!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
<div class="row-padding center">
<div class="col m3">
<img src="/w3images/p1.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="The mist over the mountains">
</div>

<div class="col m3">
<img src="/w3images/p2.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="Coffee beans">
</div>

<div class="col m3">
<img src="/w3images/p3.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="Bear closeup">
</div>

<div class="col m3">
<img src="/w3images/p4.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="Quiet ocean">
</div>
</div>

<div class="row-padding center section">
<div class="col m3">
<img src="/w3images/p5.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="The mist">
</div>

<div class="col m3">
<img src="/w3images/p6.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="My beloved typewriter">
</div>

<div class="col m3">
<img src="/w3images/p7.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="Empty ghost train">
</div>

<div class="col m3">
<img src="/w3images/p8.jpg" style="width:100%" onclick="onClick(this)" class="hover-opacity" alt="Sailing">
</div>
<button class="button padding-large light-grey" style="margin-top:64px">LOAD MORE</button>
</div>
</div>

<!-- Modal for full size images on click-->
<div id="modal01" class="modal black" onclick="this.style.display='none'">
<span class="button large black display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="modal-content animate-zoom center transparent padding-64">
<img id="img01" class="image">
<p id="caption" class="opacity large"></p>
</div>
</div>

<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 display-container opacity-min">
<div class="display-middle">
<span class="xxlarge text-white wide">CONTACT</span>
</div>
</div>

<!-- Container (Contact Section) -->
<div class="content container padding-64" id="contact">

<div class="row padding-32 section">
<div class="col m8 panel">
<div class="large margin-bottom">
<i class="fa fa-phone fa-fw hover-text-black xlarge margin-right"></i> 5145033126<br>
<i class="fa fa-envelope fa-fw hover-text-black xlarge margin-right"></i> berw@videotron.ca<br>
</div>
<form action="/action_page.php" target="_blank">
<div class="row-padding" style="margin:0 -16px 8px -16px">
<div class="half">
<input class="input border" type="text" placeholder="Name" required name="Name">
</div>
<div class="half">
<input class="input border" type="text" placeholder="Email" required name="Email">
</div>
</div>
<input class="input border" type="text" placeholder="Message" required name="Message">
<button class="button black right section" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</form>
</div>
</div>
</div>

<!-- Footer -->
<footer class="center black padding-64 opacity hover-opacity-off">
<a href="#home" class="button light-grey"><i class="fa fa-arrow-up margin-right"></i>To the top</a>
<div class="xlarge section">
<i class="fa fa-facebook-official hover-opacity"></i>
<i class="fa fa-instagram hover-opacity"></i>
<i class="fa fa-snapchat hover-opacity"></i>
<i class="fa fa-pinterest-p hover-opacity"></i>
<i class="fa fa-twitter hover-opacity"></i>
<i class="fa fa-linkedin hover-opacity"></i>
</div>
</footer>

<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}

// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "bar" + " card" + " animate-top" + " white";
} else {
navbar.className = navbar.className.replace(" card animate-top white", "");
}
}

// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("show") == -1) {
x.className += " show";
} else {
x.className = x.className.replace(" show", "");
}
}
</script>

</body>
</html>

0 comments on commit fce19f1

Please sign in to comment.