cobular
/
PersonalWebsite_Static
mirror of https://github.com/JakeCover/PersonalWebsite_Static
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added an isotope grid, need to implement filtering well

Browse Source
FlicketyVersion
Cobular 6 years ago
parent cca619371f
commit 2311680499
6 changed files with 281 additions and 23 deletions
Show Stats Download Patch File Download Diff File

70
css/index.css
Unescape Escape View File

@ -13,21 +13,83 @@
} }
.carousel-cell { .carousel-cell {
border-color: #0000ff;
border-radius: 5px;
width: 66%; width: 66%;
background: #8C8; background: #ffffff;
margin-right: 10px; margin-right: 10px;
height: 60px; height: 60px;
line-height: 1.5; line-height: 1.5;
border-radius: 5px;
} }
.carousel-cell-content { .carousel-cell-content {
color: #ffffff; color: #2E2E2E;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.grid-item {
width: 30%;
float: left;
height: auto;
background: #e6e5e4;
border: 2px solid #b6b5b4;
margin: 5px;
text-align: center;
border-radius: 5px;
}
.grid {
align-content: center;
}
.student {
border-width: 4px;
background-color: #ef9a9a;
border-radius: 5px;
border-style: none;
}
.developer {
border-width: 4px;
background-color: #81d4fa;
border-radius: 5px;
border-style: none;
}
.person {
border-width: 4px;
background-color: #66bb6a;
border-radius: 5px;
border-style: none;
}
.python {
border-width: 4px;
border-top-color: #FFD43B;
border-bottom-color: #FFD43B;
border-left-color: #306998;
border-right-color: #306998;
border-style: solid;
}
.unity {
border-width: 4px;
border-top-color: #000000;
border-bottom-color: #000000;
border-left-color: #dddddd;
border-right-color: #dddddd;
border-style: solid;
}
.friends {
border-width: 4px;
border-top-color: #33691e;
border-bottom-color: #33691e;
border-left-color: #283593;
border-right-color: #283593;
border-style: solid;
}
/*# sourceMappingURL=index.css.map */ /*# sourceMappingURL=index.css.map */

2
css/index.css.map
Unescape Escape View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/index.sass"],"names":[],"mappings":"AAOA;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EA5BA;EACA;EACA;EACA","file":"index.css"} {"version":3,"sourceRoot":"","sources":["../sass/index.sass"],"names":[],"mappings":"AAMA;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EA1BA;EACA;EACA;EACA;;;AA2BF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"index.css"}

145
index.html
Unescape Escape View File

@ -23,6 +23,10 @@
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<script src="./scripts/packery-mode.pkgd.min.js"></script>
<script src="./scripts/filter_on_flickity.js"></script>
<!-- Custom CSS --> <!-- Custom CSS -->
<link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/index.css">
@ -37,50 +41,56 @@
<h3>I'm <b>Jake Cover</b>, a</h3><br> <h3>I'm <b>Jake Cover</b>, a</h3><br>
<div id="UpperCarousel"> <div id="UpperCarousel">
<div class="upper-main-carousel"> <div class="upper-main-carousel">
<div class="carousel-cell"> <div class="carousel-cell developer">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Developer Developer
</h3> </h3>
</div> </div>
<div class="carousel-cell"> <div class="carousel-cell student">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Student Student
</h3> </h3>
</div> </div>
<div class="carousel-cell"> <div class="carousel-cell person">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Gamer Person
</h3> </h3>
</div> </div>
</div> </div>
<script> <script>
$('.upper-main-carousel').flickity({ $('.upper-main-carousel').flickity({
wrapAround: true, wrapAround: true,
autoPlay: true, autoPlay: 3000,
pageDots: false, pageDots: false,
on: {
change: function (index) {
console.log("Upper: " + index)
}
}
}); });
</script> </script>
<button onclick="">Clike ME!</button>
</div> </div>
<br> <br>
<h3>Who likes</h3><br> <h3>Who likes</h3><br>
<div id="LowerCarousel"> <div id="LowerCarousel">
<div class="lower-main-carousel"> <div class="lower-main-carousel">
<div class="carousel-cell"> <div class="carousel-cell python">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Python Python
</h3> </h3>
</div> </div>
<div class="carousel-cell"> <div class="carousel-cell unity">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Unity Unity
</h3> </h3>
</div> </div>
<div class="carousel-cell"> <div class="carousel-cell games">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
Games FPS Games
</h3> </h3>
</div> </div>
<div class="carousel-cell"> <div class="carousel-cell people">
<h3 class="carousel-cell-content"> <h3 class="carousel-cell-content">
People People
</h3> </h3>
@ -89,12 +99,125 @@
<script> <script>
$('.lower-main-carousel').flickity({ $('.lower-main-carousel').flickity({
wrapAround: true, wrapAround: true,
autoPlay: true, autoPlay: 2000,
pageDots: false, pageDots: false,
on: {
change: function (index) {
switch (index) {
case 0:
$('.grid').isotope({ filter: '.python' });
break;
case 1:
$('.grid').isotope({ filter: '.unity' });
break;
case 2:
$('.grid').isotope({ filter: '.people' });
break;
case 3:
$('.grid').isotope({ filter: '.games' });
break;
}
console.log("Lower: " + index)
}
}
}); });
</script> </script>
</div> </div>
</div> </div>
<div class="grid">
<div class="grid-item python developer">
<h5>1 Distest</h5>
<p>
This is a really cool project!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="grid-item python developer">
<h5>2 ReplyBot</h5>
<p>
This is a really cool project!
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="grid-item developer unity">
<h5>3 ForeSight Sports</h5>
<p>
This is a really cool project!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="grid-item student unity">
<h5>4 Unity Club</h5>
<p>
This is a really cool project!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="grid-item student">
<h5>5 Robotics Captain</h5>
<p>
This is a really cool project!
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="grid-item friends person">
<h5>6 Telegram</h5>
<p>
This is a really cool project!
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="grid-item person games">
<h5>steam</h5>
<p>
This is a really cool project!
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script>
$('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
layoutMode: 'packery',
});
</script>
</div> </div>
</body> </body>

68
sass/index.sass
Unescape Escape View File

@ -1,4 +1,3 @@
@mixin centerer @mixin centerer
position: absolute position: absolute
top: 50% top: 50%
@ -16,17 +15,72 @@
width: 70% width: 70%
margin: auto margin: auto
.carousel-cell .carousel-cell
border-color: #0000ff
border-radius: 5px
width: 66% width: 66%
background: #8C8 background: #ffffff
margin-right: 10px margin-right: 10px
height: 60px height: 60px
line-height: 1.5 line-height: 1.5
// display: flex border-radius: 5px
// align-items: center
.carousel-cell-content .carousel-cell-content
color: #ffffff color: #2E2E2E
@include centerer @include centerer
// Grid Info
.grid-item
width: 30%
float: left
height: auto
background: #e6e5e4
border: 2px solid #b6b5b4
margin: 5px
text-align: center
border-radius: 5px
.grid
align-content: center
.student
border-width: 4px
background-color: #ef9a9a
border-radius: 5px
border-style: none
.developer
border-width: 4px
background-color: #81d4fa
border-radius: 5px
border-style: none
.person
border-width: 4px
background-color: #66bb6a
border-radius: 5px
border-style: none
.python
border-width: 4px
border-top-color: #FFD43B
border-bottom-color: #FFD43B
border-left-color: #306998
border-right-color: #306998
border-style: solid
.unity
border-width: 4px
border-top-color: #000000
border-bottom-color: #000000
border-left-color: #dddddd
border-right-color: #dddddd
border-style: solid
.friends
border-width: 4px
border-top-color: #33691e
border-bottom-color: #33691e
border-left-color: #283593
border-right-color: #283593
border-style: solid

13
scripts/filter_on_flickity.js
Unescape Escape View File

@ -0,0 +1,13 @@
// var $upper_carousel = $('.upper-main-carousel').flickity();
// var $lower_carousel = $('.lower-main-carousel').flickity();
// function listen_for_upper_selection(event, index) {
// console.log(index)
// }
// function listen_for_lower_selection(event, index) {
// console.log(index)
// }
// $upper_carousel.on('change.flickity',
// $lower_carousel.on('change.flickity', listen_for_lower_selection)

6
scripts/packery-mode.pkgd.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save