Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history 
final push
  • Loading branch information
@tjb17003
tjb17003 authored Mar 10, 2020
1 parent 0795128 commit 2ff1037
Show file tree
Hide file tree
Showing 3 changed files with 296 additions and 45 deletions.
93 changes: 67 additions & 26 deletions cssShowcase/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Hind:300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie&display=swap" rel="stylesheet">
</head>
<body>
<div class="title">
Expand All @@ -29,86 +30,126 @@

<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="btn btn-2">Home</a></li>
<li><a id="about"href="#" class="btn btn-2">About</a></li>

<li><a id="contact" href="#" class="btn btn-2">Contact</a>
<ul class="drop-menu">
<li><a class="drop" href="https://www.instagram.com/tylerjamesburke/"><i id="icons" class="fa fa-instagram" aria-hidden="true"></i>Instagram</a></li>
<li><a class="drop" href="mailto:tylerburke3@gmail.com"><i id="icons" class="fa fa-envelope-o" aria-hidden="true"></i>Email</a></li>
<li><a class="drop" href="www.linkedin.com/in/tyler-burke-149ab31a3"><i id="icons" class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a></li>
</ul>
</li>

</ul>
</nav>
<div class="center">
<div class="drop-menu2">
<p id="aboutInfo">Hello,</p>
<p id="aboutInfo">Welcome to my page! I have chosen a few of my favored pieces to display my craft below. Currently I am attending the University of Connecticut as
a Digital Media and Design student. I am focused on a concentration of Web & Interactive Media Design. </p>
<p id="aboutInfo">I have a passion for art and creating detailed illustrations. For me conveying emotion and making an observer feel a certain way is the most rewarding
aspect of drawing. To do this I shape my artwork in a way that exposes a certain emotion leaving a lingering impression on a person. Such as picking a certain subject
matter and implementing hidden messages underneath the broader picture. Interpretation of these messages are totally individualized for the viewer. Art has the power to
transform, to educate, inspire and motivate others. It is a significant feature of my life and has altered the way I view this world.</p>
<p id="aboutInfo"> Thank you for taking some time to read a little about me, enjoy some art!</p>
</div>
</div>


<div class="center">
<div class ="artwork">
<div class="l show-on-scroll">
<img src="../cssShowcase/img/art2.jpg" alt="">
</div>

<div class="l">
<img src="../cssShowcase/img/art2.jpg" alt="">
</div>


<div class="s">


<div class="s show-on-scroll">
<img src="../cssShowcase/img/art1.jpg" alt="">
</div>



<div class="s">
<div class="s show-on-scroll">
<img src="../cssShowcase/img/art4.JPG" alt="">
</div>
<div class="m show-on-scroll">
<img src="../cssShowcase/img/art12.jpg" alt="">
</div>


<div class="m">
<img src="../cssShowcase/img/art3.jpg" alt="">
</div>




<div class="m">
<div class="m show-on-scroll">
<img src="../cssShowcase/img/art5.jpg" alt="">
</div>

<div class="s show-on-scroll">
<img src="../cssShowcase/img/art3.jpg" alt="">
</div>

<div class="s">
<div class="l show-on-scroll">
<img src="../cssShowcase/img/art6.jpg" alt="">
</div>



<div class="l">
<img src="../cssShowcase/img/art12.jpg" alt="">
</div>



<div class="s">
<div class="s show-on-scroll">
<img src="../cssShowcase/img/art8.jpg" alt="">
</div>



<div class="m">
<div class="m show-on-scroll">
<img src="../cssShowcase/img/art9.jpg" alt="">
</div>

<div class="m">
<div class="m show-on-scroll">
<img src="../cssShowcase/img/art10.jpg" alt="">
</div>


<div class="l">
<div class="l show-on-scroll">
<img src="../cssShowcase/img/art7.jpg" alt="">
</div>



<div class="s">
<div class="s show-on-scroll">
<img src="../cssShowcase/img/art11.JPG" alt="">
</div>




<div class="s">
<div class="s show-on-scroll">
<img src="../cssShowcase/img/art13.jpg" alt="">
</div>

</div>
</div>
</div>

<script src="https://use.fontawesome.com/0e60a59edb.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contact").click(function(){
$("ul").toggleClass("active")
})
})

$(document).ready(function(){
$("#about").click(function(){
$("div").toggleClass("active")
})
})
</script>
<script src="main.js"></script>
</body>
</html>
40 changes: 39 additions & 1 deletion cssShowcase/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,41 @@




var scroll = window.requestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60

)};

function isElementInViewport(el) {
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return(
(rect.top <= 0
&& rect.bottom >= 0)
||
(rect.bottom >= (window.innerHeight || document
.documentElement.clientHeight) &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight))
||
(rect.top >= (window.innerHeight || document
.documentElement.clientHeight))

);
}
var elementToShow = document.querySelectorAll('.show-on-scroll');

function loop() {
elementToShow.forEach(function(element){
if (isElementInViewport(element)) {
element.classList.add('is-visible');
} else {
element.classList.remove('is-visible');
}
});
scroll(loop);
}

loop()
Loading

0 comments on commit 2ff1037

Please sign in to comment.