Commit b99b2b43 authored by sbiego's avatar sbiego

less demanding space animation

parent 40c4b4d3
......@@ -54,10 +54,10 @@
@keyframes vibrate {
0% {-moz-transform: rotate( 0deg);
transform: rotate( 0deg);}
20% {-moz-transform: rotate( 3deg);
transform: rotate( 3deg);}
60% {-moz-transform: rotate( -2deg);
transform: rotate( -2deg);}
20% {-moz-transform: rotate( 10deg);
transform: rotate( 10deg);}
60% {-moz-transform: rotate( -5deg);
transform: rotate( -5deg);}
100% {-moz-transform: rotate( 0deg);
transform: rotate( 0deg);}
}
......@@ -70,6 +70,15 @@
100% {opacity: 0.1;}
}
@keyframes shine {
0% {opacity: .4;}
50% {opacity: 1;}
/*20% {opacity: .8;}
50% {opacity: 1;}
80% {opacity: .2;}*/
100% {opacity: .4;}
}
/* Global */
body {
......@@ -95,7 +104,8 @@
.accordion-heading .accordion-toggle {
background: none;
color: #999;
font-size: 12pt;
font-size: 1em;
padding: 12px;
}
.accordion-heading.accordionize .accordion-toggle span, .accordion-heading.togglize .accordion-toggle span {
color: #ddd
......@@ -109,6 +119,7 @@
background: none;
}
/* HOVER anc COLOR MAIN COLOR */
.accordion-heading:hover .accordion-toggle, .accordion-heading:hover .accordion-toggle.inactive, .button:hover, .button:active, .button:focus, .icons-example ul li a:hover {
background-color: #cc2854;
......@@ -161,7 +172,8 @@
left: 50%;
margin-top: -100vh;
margin-left: -100vw;
animation: vibrate 10s ease 30;
/*animation: vibrate 4s ease 1;*/
animation: shine 4s cubic-bezier(1,.0,.0,1) 12;
background-size: 160px;
backface-visibility: visible;
overflow: hidden;
......@@ -192,12 +204,12 @@
<div class="accordion accordion-body collapse" id="accordionArea">
<div class="accordion-group">
<div class="accordion-heading accordionize">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#twoArea">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#vision">
Design
<span class="font-icon-magic"></span>
</a>
</div>
<div id="twoArea" class="accordion-body collapse">
<div id="vision" class="accordion-body collapse">
<div class="accordion-inner">
I'm a freelance graphic designer and my latest project is <a href="http://vision.flowin.space">Vision</a> is how I live through colors giving shapes to feelings and experience.<br/>
I've created logos, posters, flyers, icons, album cover, some fonts and many other works.<br/>
......@@ -209,12 +221,12 @@
</div>
<div class="accordion-group">
<div class="accordion-heading accordionize">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#sixArea">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#glock">
Glock
<span class="font-icon-time"></span>
</a>
</div>
<div id="sixArea" class="accordion-body collapse">
<div id="glock" class="accordion-body collapse">
<div class="accordion-inner">
A new intuitive graphical and beautiful clock, written with SVG, <a href="http://snapsvg.io/">Snap.svg</a>, JS, HTML5 and CSS3!
<br/><br/>
......@@ -224,12 +236,27 @@
</div>
<div class="accordion-group">
<div class="accordion-heading accordionize">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#sevenArea">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#minhex">
MinHex
<span class="font-icon-flag"></span>
</a>
</div>
<div id="minhex" class="accordion-body collapse">
<div class="accordion-inner">
An <a href="https://github.com/NuxTuxSux/MinHex">open-source</a> Mines spin-off with an hexagonal field, created by <a href="https://github.com/NuxTuxSux">NuxTuxSux</a> and some UI interface made by me with <a href="http://snapsvg.io/">Snap.svg</a> and JS!
<br/><br/>
<a class="button button-min" href="http://minhex.flowin.space">Play MinHex!</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading accordionize">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#me">
About me
<span class="font-icon-user"></span>
</a>
</div>
<div id="sevenArea" class="accordion-body collapse">
<div id="me" class="accordion-body collapse">
<div class="accordion-inner">
<img id="profile_pic" src="img/io.jpg" alt="my profile photo" />
Hi! I'm Diego Turtulici<br>
......@@ -252,12 +279,12 @@
</div>
<div class="accordion-group">
<div class="accordion-heading accordionize">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#eightArea">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#credits">
credits
<span class="font-icon-info"></span>
</a>
</div>
<div id="eightArea" class="accordion-body collapse">
<div id="credits" class="accordion-body collapse">
<div class="accordion-inner">
Site created with HTML5, CSS3, JS, BootStrap and <a href="http://www.alessioatzeni.com/blog/brushed-template/"> Brushed teplate</a>. The background animation credits to <a href="http://codepen.io/TheRealAlan/pen/gzqsy">Alan Crissey</a>.
Every element without explicit attribution is made by me.<br/>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment