Start using git
This commit is contained in:
commit
a6c3082272
10 changed files with 1499 additions and 0 deletions
488
css/style.css
Normal file
488
css/style.css
Normal file
|
|
@ -0,0 +1,488 @@
|
|||
*, *:before, *:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
overflow-x: hidden; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Work Sans', sans-serif; }
|
||||
|
||||
body.dark-mode {
|
||||
-webkit-filter: invert(100%);
|
||||
filter: invert(100%); }
|
||||
body.dark-mode .image-container img {
|
||||
-webkit-filter: invert(100%);
|
||||
filter: invert(100%); }
|
||||
body.dark-mode .bg {
|
||||
opacity: 0 !important; }
|
||||
body.dark-mode section:nth-child(even), body.dark-mode footer:nth-child(even) {
|
||||
background: #eee !important; }
|
||||
body.dark-mode section:nth-child(odd), body.dark-mode footer:nth-child(odd) {
|
||||
background: white !important; }
|
||||
body.dark-mode .works-card .text-container {
|
||||
color: #333 !important; }
|
||||
body.dark-mode .works-card .text-container a {
|
||||
color: inherit !important;
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important; }
|
||||
body.dark-mode footer {
|
||||
color: #333 !important; }
|
||||
|
||||
.main {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden; }
|
||||
.main > * {
|
||||
position: relative; }
|
||||
.main > canvas#bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.main .text-container {
|
||||
text-align: left;
|
||||
max-width: 50rem;
|
||||
margin: auto auto auto 13vw; }
|
||||
.main h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
margin: 0 0 2rem;
|
||||
color: #333; }
|
||||
.main h3 {
|
||||
margin: 1rem 0 0;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.4;
|
||||
font-weight: normal;
|
||||
color: #999; }
|
||||
.main a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-bottom: 0.2rem solid transparent;
|
||||
white-space: nowrap;
|
||||
position: relative; }
|
||||
.main a:before {
|
||||
content: '';
|
||||
bottom: 0.2rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
background: rgba(51, 51, 51, 0.2);
|
||||
position: absolute;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: center left;
|
||||
-ms-transform-origin: center left;
|
||||
transform-origin: center left;
|
||||
opacity: 0.2;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
.main a:hover:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
opacity: 1; }
|
||||
|
||||
.works-card {
|
||||
height: 100vh;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
z-index: 10; }
|
||||
.works-card > div {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
height: 100%; }
|
||||
.works-card .image-container img {
|
||||
width: 133%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 0.2rem;
|
||||
-webkit-box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33);
|
||||
box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); }
|
||||
.works-card .image-container:nth-child(1) img {
|
||||
right: 0; }
|
||||
.works-card .image-container:nth-child(2) img {
|
||||
left: 0; }
|
||||
.works-card .text-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
padding: 0 2rem;
|
||||
-webkit-transition: all 0.225s ease;
|
||||
-o-transition: all 0.225s ease;
|
||||
transition: all 0.225s ease; }
|
||||
.works-card .text-container > * {
|
||||
max-width: 30rem;
|
||||
width: 100%; }
|
||||
.works-card .text-container h1 {
|
||||
font-size: 3.3rem;
|
||||
margin: 0 0 1rem; }
|
||||
.works-card .text-container p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem 0 0; }
|
||||
.works-card .text-container a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem 1rem 1.25rem;
|
||||
border-radius: 0.1rem;
|
||||
margin-top: 1rem;
|
||||
-webkit-box-shadow: 0 0.05rem 0.025rem rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0.05rem 0.025rem rgba(0, 0, 0, 0.3);
|
||||
margin-right: 1rem; }
|
||||
.works-card .text-container a:before {
|
||||
position: absolute;
|
||||
bottom: 1.2rem;
|
||||
left: 1.25rem;
|
||||
width: calc(100% - 3.25rem);
|
||||
content: '';
|
||||
height: 0.115rem;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
border-top: 0.115rem solid black;
|
||||
opacity: 0.2;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: center left;
|
||||
-ms-transform-origin: center left;
|
||||
transform-origin: center left; }
|
||||
.works-card .text-container a:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 1.25rem;
|
||||
pointer-events: none;
|
||||
font-size: 0.66rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 0.33rem;
|
||||
width: 0.33rem;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
border: 1px solid black;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
line-height: 1.2rem;
|
||||
margin: auto;
|
||||
opacity: 0.7;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
.works-card .text-container a:hover:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1); }
|
||||
.works-card .text-container a:hover:after {
|
||||
right: 1.15rem; }
|
||||
.works-card .text-container a.dark {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.9); }
|
||||
.works-card .text-container a.dark:before {
|
||||
border-color: inherit; }
|
||||
.works-card .text-container a.dark:after {
|
||||
border-color: inherit; }
|
||||
|
||||
#contact {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 5rem 2rem 3rem; }
|
||||
#contact h1 {
|
||||
font-size: 3.3rem;
|
||||
margin: 0 0 2rem; }
|
||||
#contact p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem auto 0; }
|
||||
#contact .contact-info-container {
|
||||
max-width: 40rem;
|
||||
margin: 2rem auto;
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
height: 12rem; }
|
||||
#contact .contact-info-container a.contact-method {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 6rem;
|
||||
position: relative;
|
||||
padding-left: 6rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
overflow: hidden; }
|
||||
#contact .contact-info-container a.contact-method h3, #contact .contact-info-container a.contact-method p {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
#contact .contact-info-container a.contact-method h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
-webkit-transform: translateY(0.6rem);
|
||||
-ms-transform: translateY(0.6rem);
|
||||
transform: translateY(0.6rem); }
|
||||
#contact .contact-info-container a.contact-method p {
|
||||
line-height: 1.25rem;
|
||||
height: 1.25rem;
|
||||
-webkit-transform: translateY(1rem);
|
||||
-ms-transform: translateY(1rem);
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
color: #777;
|
||||
font-size: 0.9rem; }
|
||||
#contact .contact-info-container a.contact-method i {
|
||||
font-size: 2rem;
|
||||
line-height: 6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
text-align: center; }
|
||||
#contact .contact-info-container a.contact-method i:before {
|
||||
position: relative;
|
||||
z-index: 10; }
|
||||
#contact .contact-info-container a.contact-method i:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0.7);
|
||||
-ms-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
content: '';
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
background: #333; }
|
||||
#contact .contact-info-container a.contact-method i.email:before {
|
||||
content: '@';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 5.5rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
text-align: center; }
|
||||
#contact .contact-info-container a.contact-method:hover h3 {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
#contact .contact-info-container a.contact-method:hover p {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1; }
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: #1f2e3a;
|
||||
color: white;
|
||||
font-size: 1.2rem; }
|
||||
|
||||
.ticker {
|
||||
padding: 2rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
font-family: monospace;
|
||||
letter-spacing: 1px; }
|
||||
|
||||
.ticker:after {
|
||||
content: '_';
|
||||
opacity: 0.4;
|
||||
-webkit-animation: blink 0.5s infinite;
|
||||
animation: blink 0.5s infinite; }
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
49% {
|
||||
opacity: 0; }
|
||||
51% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
49% {
|
||||
opacity: 0; }
|
||||
51% {
|
||||
opacity: 1; }
|
||||
100% {
|
||||
opacity: 1; } }
|
||||
|
||||
@media (max-width: 900px), (orientation: portrait) {
|
||||
.main > .text-container {
|
||||
margin: auto;
|
||||
padding: 2rem; }
|
||||
.works-card {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto; }
|
||||
.works-card > div {
|
||||
height: auto;
|
||||
width: 100%; }
|
||||
.works-card .text-container {
|
||||
-webkit-box-ordinal-group: 3;
|
||||
-ms-flex-order: 2;
|
||||
order: 2;
|
||||
padding-bottom: 2rem; }
|
||||
.works-card .image-container {
|
||||
-webkit-box-ordinal-group: 2;
|
||||
-ms-flex-order: 1;
|
||||
order: 1;
|
||||
padding-top: 3rem;
|
||||
min-height: calc(45vw + 5rem); }
|
||||
.works-card .image-container img {
|
||||
width: 80vw;
|
||||
margin: auto;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
-webkit-box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33);
|
||||
box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1), 0 0.25rem 1rem rgba(0, 0, 0, 0.33); }
|
||||
#contact {
|
||||
text-align: left; }
|
||||
#contact .contact-info-container a.contact-method h3 {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0); }
|
||||
#contact .contact-info-container a.contact-method p {
|
||||
-webkit-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1; } }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#contact .contact-info-container {
|
||||
height: auto; }
|
||||
#contact .contact-info-container a.contact-method {
|
||||
width: 100%; } }
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.main > .text-container h1 {
|
||||
font-size: 3rem; }
|
||||
.main > .text-container h3 {
|
||||
font-size: 1.5rem; }
|
||||
.works-card > .text-container p {
|
||||
font-size: 1rem; }
|
||||
.works-card > .text-container h1 {
|
||||
font-size: 2.6rem; } }
|
||||
|
||||
.bg-scroller {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh; }
|
||||
.bg-scroller .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.225s ease;
|
||||
-o-transition: all 0.225s ease;
|
||||
transition: all 0.225s ease; }
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
html {
|
||||
font-size: 20px; } }
|
||||
|
||||
@media (min-width: 2400px) {
|
||||
html {
|
||||
font-size: 24px; } }
|
||||
|
||||
@media (min-width: 2800px) {
|
||||
html {
|
||||
font-size: 32px; } }
|
||||
|
||||
@media (min-width: 3600px) {
|
||||
html {
|
||||
font-size: 36px; } }
|
||||
531
css/style.scss
Normal file
531
css/style.scss
Normal file
|
|
@ -0,0 +1,531 @@
|
|||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
filter: invert(100%);
|
||||
|
||||
.image-container img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.bg {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
section:nth-child(even), footer:nth-child(even) {
|
||||
background: #eee !important;
|
||||
}
|
||||
|
||||
section:nth-child(odd), footer:nth-child(odd) {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.works-card .text-container {
|
||||
color: #333 !important;
|
||||
|
||||
a {
|
||||
color: inherit !important;
|
||||
background: rgba(0,0,0,0.1) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden;
|
||||
|
||||
> * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
> canvas#bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
text-align: left;
|
||||
max-width: 50rem;
|
||||
margin: auto auto auto 13vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: 500;
|
||||
margin: 0 0 2rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 1rem 0 0;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.4;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
border-bottom: 0.2rem solid transparent;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
bottom: 0.2rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
background: rgba(#333, 0.2);
|
||||
position: absolute;
|
||||
transform: scaleX(0);
|
||||
transform-origin: center left;
|
||||
opacity: 0.2;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.works-card {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 133%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 0.2rem;
|
||||
box-shadow: 0 0 10rem rgba(0,0,0,0.1), 0 0.25rem 1rem rgba(0,0,0,0.33);
|
||||
}
|
||||
|
||||
.image-container:nth-child(1) img {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.image-container:nth-child(2) img {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0 2rem;
|
||||
transition: all 0.225s ease;
|
||||
|
||||
> * {
|
||||
max-width: 30rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.3rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
background: rgba(black, 0.05);
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem 1rem 1.25rem;
|
||||
border-radius: 0.1rem;
|
||||
margin-top: 1rem;
|
||||
box-shadow: 0 0.05rem 0.025rem rgba(0,0,0,0.3);
|
||||
margin-right: 1rem;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
bottom: 1.2rem;
|
||||
left: 1.25rem;
|
||||
width: calc(100% - 3.25rem);
|
||||
content: '';
|
||||
height: 0.115rem;
|
||||
transition: all 0.2s ease;
|
||||
border-top: 0.115rem solid black;
|
||||
opacity: 0.2;
|
||||
box-sizing: border-box;
|
||||
transform: scaleX(0);
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 1.25rem;
|
||||
pointer-events: none;
|
||||
font-size: 0.66rem;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 0.33rem;
|
||||
width: 0.33rem;
|
||||
transform: rotate(45deg);
|
||||
border: 1px solid rgba(black, 1);
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
line-height: 1.2rem;
|
||||
margin: auto;
|
||||
opacity: 0.7;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 1.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color: rgba(255,255,255,0.8);
|
||||
background: rgba(white, 0.9);
|
||||
|
||||
&:before {
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 5rem 2rem 3rem;
|
||||
|
||||
h1 {
|
||||
font-size: 3.3rem;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
margin: 1rem auto 0;
|
||||
}
|
||||
|
||||
.contact-info-container {
|
||||
max-width: 40rem;
|
||||
margin: 2rem auto;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 12rem;
|
||||
|
||||
a.contact-method {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 6rem;
|
||||
position: relative;
|
||||
padding-left: 6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
h3, p {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.4;
|
||||
transform: translateY(0.6rem);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transform: translateY(1rem);
|
||||
opacity: 0;
|
||||
color: #777;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
line-height: 6rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(0.7);
|
||||
content: '';
|
||||
transition: all 0.2s ease;
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
i.email {
|
||||
&:before {
|
||||
content: '@';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 5.5rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
h3 {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
p {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
background: #1f2e3a;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.ticker {
|
||||
padding: 2rem 0 0;
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
font-family: monospace;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.ticker:after {
|
||||
content: '_';
|
||||
opacity: 0.4;
|
||||
animation: blink 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { opacity: 0; }
|
||||
49% { opacity: 0; }
|
||||
51% { opacity: 1; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@media(max-width: 900px), (orientation: portrait) {
|
||||
.main > .text-container {
|
||||
margin: auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.works-card {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
|
||||
> div {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
order: 2;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
order: 1;
|
||||
padding-top: 3rem;
|
||||
min-height: calc(45vw + 5rem);
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 80vw;
|
||||
margin: auto;
|
||||
display: block;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
box-shadow: 0 0 5rem rgba(0,0,0,0.1), 0 0.25rem 1rem rgba(0,0,0,0.33);
|
||||
}
|
||||
}
|
||||
|
||||
#contact {
|
||||
text-align: left;
|
||||
|
||||
.contact-info-container a.contact-method {
|
||||
h3 {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
p {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
#contact .contact-info-container {
|
||||
height: auto;
|
||||
|
||||
a.contact-method {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 400px) {
|
||||
.main {
|
||||
> .text-container {
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.works-card {
|
||||
> .text-container {
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-scroller {
|
||||
z-index: 5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.225s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1800px) {
|
||||
html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 2400px) {
|
||||
html {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 2800px) {
|
||||
html {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 3600px) {
|
||||
html {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
BIN
img/works/antriksh.png
Normal file
BIN
img/works/antriksh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
img/works/pixelio.png
Normal file
BIN
img/works/pixelio.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
img/works/shravan.png
Normal file
BIN
img/works/shravan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 513 KiB |
BIN
img/works/thegirlcode.png
Normal file
BIN
img/works/thegirlcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
img/works/watson.png
Normal file
BIN
img/works/watson.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
img/works/wikipedia.png
Normal file
BIN
img/works/wikipedia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
136
index.html
Normal file
136
index.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>Naman Sood - web developer</title>
|
||||
<meta name="description" content="Web developer and technology enthusiast who's never gonna give you up.">
|
||||
<meta name="keywords" content="nsood, nfool, naman sood, nachloride, nsdcars5, namansood, namandoesnotpanic">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<section id="home" class="main" style="background: white;">
|
||||
<canvas id="bg"></canvas>
|
||||
<div class="text-container">
|
||||
<h1>Hi, I'm Naman.</h1>
|
||||
<h3>I'm a<span class="age"> seventeen</span> year-old student and web developer based in India. Below is a showcase of my <a href="#thegirlcode">works</a>, and ways to <a href="#contact">contact</a> me.</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="thegirlcode" class="works-card" style="background: linear-gradient(-30deg, #ff1151 30%, #ff7097 80%); color: white">
|
||||
<div class="image-container">
|
||||
<img src="img/works/thegirlcode.png" class="side-image">
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h1>The Girl Code</h1>
|
||||
<p>The Girl Code is a nonprofit organization that aims to inspire confidence in girls that they can code.</p>
|
||||
<p>I am the lead backend developer on their open source online learning platform using NodeJS and MongoDB, which teaches Python in an interactive manner by letting them interact with the language and write their own code.</p>
|
||||
<p><a href="http://thegirlcode.co" target="_blank" class="button dark" style="color: #ff1151">Website</a> <a href="https://learn.thegirlcode.co" target="_blank" class="button dark" style="color: #ff1151">Platform</a> <a href="https://github.com/thegirlcode/backend" target="_blank" class="button dark" style="color: #ff1151">Source</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="shravan" class="works-card white-link" style="background: white; color: #333">
|
||||
<div class="text-container">
|
||||
<h1>Shravan</h1>
|
||||
<p>Shravan is the concept of a user interface for a smartphone which does not require sight, and instead functions on sound and haptic feedback.</p>
|
||||
<p>I built an early prototype of Shravan, and designed a website to promote it. Design for Shravan, and its logo, were made by Siladityaa Sharma.</p>
|
||||
<p>Shravan won the Make event at MINET 2016, organized by the Mother's International School.</p>
|
||||
<p><a href="https://shravan.nsood.in" target="_blank" class="button" style="color: #333">Website</a><a href="https://shravan.nsood.in/app" target="_blank" class="button" style="color: #333">Try it</a></p>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="img/works/shravan.png" class="side-image">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pixelio" class="works-card" style="background: #141414; color: white">
|
||||
<div class="image-container">
|
||||
<img src="img/works/pixelio.png" class="side-image">
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h1>Pixel.io</h1>
|
||||
<p>Pixel.io is a reimagination of Google's Material design language for the Google Pixel phone.</p>
|
||||
<p>I built a website showcasing the basic Pixel.io design principles for the preliminary round of XINO 2016. The video was made by Siladityaa Sharma.</p>
|
||||
<p><a href="https://nsood.in/xino16" target="_blank" class="button dark" style="color: #141414">Website</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="watson" class="works-card" style="background: white; color: black">
|
||||
<div class="text-container">
|
||||
<h1>Watson</h1>
|
||||
<p>Watson is a search engine with a focus on research - it lets you preview search results before you open them, and it lets you save relevant search results as "pinboards", which can be saved for later use.</p>
|
||||
<p>I created Watson for the preliminary round of Build at Exun 2017, and helped write the case study. Graphics and the video were provided by Arimit Bhattacharya.</p>
|
||||
<p><a href="http://watson-exun17.herokuapp.com/about" target="_blank" class="button" style="color: black">Website</a><a href="http://watson-exun17.herokuapp.com" target="_blank" class="button" style="color: black">Try it</a><a href="https://drive.google.com/file/d/1aQdsWGe9u7RFncbhPcJdD6GepquqS7u8/view" target="_blank" class="button" style="color: black">Case study</a></p>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="img/works/watson.png" class="side-image">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="antriksh" class="works-card white-link" style="background: linear-gradient(#1f2e3a, #30475a); color: white">
|
||||
<div class="image-container">
|
||||
<img src="img/works/antriksh.png" class="side-image">
|
||||
</div>
|
||||
<div class="text-container">
|
||||
<h1>Antriksh</h1>
|
||||
<p>Antriksh is a fictional corporation which aims to start a space settlement on a planet named Vulcan.</p>
|
||||
<p>We were tasked to design a landing page for Antriksh for the final round of Build at Exun 2017, and provide a way for users to experience the planet, and sign up to live in the settlement. The graphics for the website were created by Siddharth Nayak.</p>
|
||||
<p>Antriksh won the Build web design event at Exun 2017, organized at Delhi Public School, RK Puram.</p>
|
||||
<p><a href="https://nsood.in/exun17" target="_blank" class="button dark" style="color: #1f2e3a">Website</a></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="wikipedia" class="works-card" style="background: white; color: black">
|
||||
<div class="text-container">
|
||||
<h1>Wikipedia</h1>
|
||||
<p>Wikpedia, the free online encyclopedia, needs no introduction. For the preliminary round of XINO 2018, we were asked to redesign Wikipedia.</p>
|
||||
<p>Apart from a visual redesign, I added to the site some useful features, like the ability to take notes and save them for later reference, to bookmark important pages, and to summarize lengthy pages with the SMMRY API. Design and graphics were provided by Manan Dua.</p>
|
||||
<p><a href="http://wikipedia.nsood.in" target="_blank" class="button" style="color: black">Try it</a><a href="http://github.com/namansood/wikipedia" target="_blank" class="button" style="color: black">Source code</a></p>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="img/works/wikipedia.png" class="side-image">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<h1>Contact</h1>
|
||||
<p>I appreciate everything from a pull request to an email. Hit me up and I'll get in touch as soon as I can.</p>
|
||||
<div class="contact-info-container">
|
||||
<a class="contact-method" href="mailto:mail@nsood.in">
|
||||
<i class="email"></i>
|
||||
<h3 class="type">Email</h3>
|
||||
<p class="detail">mail@nsood.in</p>
|
||||
</a>
|
||||
<a class="contact-method" href="https://codepen.io/NSDCars5">
|
||||
<i class="fab fa-codepen"></i>
|
||||
<h3 class="type">CodePen</h3>
|
||||
<p class="detail">NSDCars5</p>
|
||||
</a>
|
||||
<a class="contact-method" href="https://facebook.com/nsood">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
<h3 class="type">Facebook</h3>
|
||||
<p class="detail">Naman Sood</p>
|
||||
</a>
|
||||
<a class="contact-method" href="https://github.com/namansood">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3 class="type">GitHub</h3>
|
||||
<p class="detail">namansood</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
|
||||
Made by Naman Sood, with love.
|
||||
<br>
|
||||
<div class="ticker"></div>
|
||||
|
||||
</footer>
|
||||
|
||||
<div class="bg-scroller"></div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
344
js/script.js
Normal file
344
js/script.js
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
var firstInit = true;
|
||||
|
||||
function mobileConditions() {
|
||||
return !($(window).width() > 900 && $(window).height() < $(window).width());
|
||||
}
|
||||
|
||||
function bgInit(useCSSbg) {
|
||||
$('.works-card').each(function() {
|
||||
var $el = $(this);
|
||||
|
||||
if(firstInit) {
|
||||
var bg = $el.css('background-image');
|
||||
if(bg == 'none') bg = $el.css('background-color');
|
||||
$el.attr('data-bg', bg);
|
||||
var el = $('<div class="bg"></div>');
|
||||
el.css('background', bg);
|
||||
$('.bg-scroller').append(el);
|
||||
}
|
||||
|
||||
|
||||
if(useCSSbg) {
|
||||
$el.css('background', $el.attr('data-bg'));
|
||||
$el.find('.text-container').css('opacity', '1');
|
||||
}
|
||||
else {
|
||||
$el.css('background', '');
|
||||
}
|
||||
});
|
||||
|
||||
firstInit = false;
|
||||
}
|
||||
|
||||
bgInit(false);
|
||||
|
||||
var scrolledWindows, minBg, maxBg, delta, ogDelta;
|
||||
|
||||
function calculateBg() {
|
||||
if(!mobileConditions()) {
|
||||
bgInit(false);
|
||||
|
||||
$('.bg-scroller').find('.bg').each(function() {
|
||||
$(this).css('opacity', '0');
|
||||
});
|
||||
|
||||
scrolledWindows = $(window).scrollTop() / $(window).height();
|
||||
// start hax: subtract number of sections above changing background
|
||||
scrolledWindows -= $($('.works-card')[0]).offset().top / $(window).height();
|
||||
scrolledWindows = Math.max(scrolledWindows, 0);
|
||||
// end hax
|
||||
minBg = Math.floor(scrolledWindows);
|
||||
maxBg = minBg + 1;
|
||||
delta = scrolledWindows - minBg;
|
||||
ogDelta = delta;
|
||||
if(delta < 0.4) {
|
||||
delta = 0;
|
||||
}
|
||||
else if(delta < 0.6) {
|
||||
delta = 5*(delta-0.4);
|
||||
}
|
||||
else {
|
||||
delta = 1;
|
||||
}
|
||||
|
||||
delta = -1 * Math.cos(delta/1 * (Math.PI/2)) + 1;
|
||||
|
||||
$('.bg-scroller').find('.bg:nth-child(' + (minBg+1) + ')').css('opacity', 1);
|
||||
$('.bg-scroller').find('.bg:nth-child(' + (maxBg+1) + ')').css('opacity', delta);
|
||||
|
||||
|
||||
$('.works-card:nth-child(' + (minBg+2) + ') .text-container').css({
|
||||
opacity: 1 - delta,
|
||||
});
|
||||
$('.works-card:nth-child(' + (maxBg+2) + ') .text-container').css({
|
||||
opacity: delta,
|
||||
});
|
||||
}
|
||||
|
||||
else {
|
||||
bgInit(true);
|
||||
}
|
||||
}
|
||||
|
||||
calculateBg();
|
||||
|
||||
var timer;
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
scrollAnimations();
|
||||
|
||||
clearTimeout(timer);
|
||||
|
||||
timer = setTimeout(function() {
|
||||
var sections = $('section');
|
||||
|
||||
var hash = '';
|
||||
|
||||
sections.each(function() {
|
||||
var $el = $(this);
|
||||
var viewportPos = ($(window).scrollTop() - $el.offset().top) / $(window).height();
|
||||
|
||||
if(viewportPos < 0.4 && viewportPos > -0.6) {
|
||||
hash = $el.attr('id');
|
||||
}
|
||||
});
|
||||
|
||||
if(hash) {
|
||||
history.replaceState({
|
||||
page: hash
|
||||
}, $('title').html(), '#' + hash);
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
function scrollAnimations() {
|
||||
calculateBg();
|
||||
|
||||
if(!mobileConditions()) {
|
||||
$('.main h1, .main h3').each(function() {
|
||||
var scrolledFrac = $(window).scrollTop() / $(window).height();
|
||||
$(this).css({
|
||||
opacity: Math.min(1, 1.2 - 1.5*scrolledFrac),
|
||||
position: 'relative',
|
||||
// fun fact: using transforms here causes weird rendering bugs in Chrome
|
||||
top: (scrolledFrac * $(window).height() / 2) + 'px'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var canvas = $('canvas#bg')[0];
|
||||
|
||||
canvas.width = $(window).width();
|
||||
canvas.height = $(window).height();
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
$(window).on('resize', function() {
|
||||
canvas.width = $(window).width();
|
||||
canvas.height = $(window).height();
|
||||
})
|
||||
|
||||
function Point() {
|
||||
var p = this;
|
||||
|
||||
var r = 8;
|
||||
|
||||
// progress below 0 is neglected, negative initial
|
||||
// progress serves to introduce random delays -
|
||||
// at 0.05 progress points per second, for example
|
||||
// a dot with initial progress -0.15 will run 2 frames
|
||||
// after a dot with initial progress -0.05
|
||||
var initialProgress = -4 * Math.random();
|
||||
|
||||
// moves point to a random location and
|
||||
// resets its progress
|
||||
this.init = function() {
|
||||
p.x = Math.random() * canvas.width;
|
||||
p.y = Math.random() * canvas.height;
|
||||
p.progress = initialProgress;
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
if(p.progress >= 0) {
|
||||
// opacity of of dot changes with progress
|
||||
ctx.fillStyle = 'rgba(0,0,0,' + Math.sqrt(p.progress*0.005) + ')';
|
||||
ctx.beginPath();
|
||||
// radius calculation: maps progress from [0, 1] to [0, pi],
|
||||
// then takes sine of that to get an increase, then decrease
|
||||
// in radius. absolute value to prevent floating point errors
|
||||
// accidentally causing negative sine values which cause ctx.arc
|
||||
// to throw errors
|
||||
ctx.arc(p.x, p.y, Math.abs(Math.sin(Math.PI*p.progress)*r), 0, 2*Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
this.render = function() {
|
||||
// stars come faster than they go
|
||||
// so user can look at them longer
|
||||
// i guess? idk this just looked pretty
|
||||
if(p.progress > 0.5)
|
||||
p.progress += 0.005;
|
||||
else
|
||||
p.progress += 0.05;
|
||||
p.draw();
|
||||
if(p.progress >= 1) p.init();
|
||||
}
|
||||
}
|
||||
var dots = [];
|
||||
|
||||
var n = 20;
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
dots[i] = new Point();
|
||||
dots[i].init();
|
||||
}
|
||||
|
||||
function loop() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
dots[i].render();
|
||||
}
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
loop();
|
||||
|
||||
var sentences = [
|
||||
'Semicolons optional.',
|
||||
'Best viewed in Sublime Text 3.',
|
||||
'#PCMR',
|
||||
'This text is subject to change.',
|
||||
];
|
||||
|
||||
var counter = 1;
|
||||
|
||||
var ticker = $("footer .ticker");
|
||||
|
||||
function changeText() {
|
||||
var el = ticker,
|
||||
text = sentences[counter],
|
||||
oldText = el.text();
|
||||
|
||||
var x = setInterval(function() {
|
||||
if(oldText.length != 0) {
|
||||
oldText = oldText.slice(0, -1);
|
||||
el.text(oldText);
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
var y = setInterval(function() {
|
||||
if(el.text().length != text.length) {
|
||||
el.text(text.slice(0, el.text().length+1));
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
if(counter >= sentences.length - 1)
|
||||
counter = 0;
|
||||
else
|
||||
counter++;
|
||||
|
||||
changeText();
|
||||
}, 5000);
|
||||
clearInterval(y);
|
||||
}
|
||||
}, 60);
|
||||
}, 60);
|
||||
clearInterval(x);
|
||||
}
|
||||
}, 60);
|
||||
}
|
||||
|
||||
ticker.html(sentences[0]);
|
||||
|
||||
setTimeout(changeText, 5000);
|
||||
|
||||
$('a[href^="#"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var el = $($(this).attr('href'));
|
||||
|
||||
var distance = Math.abs($(window).scrollTop() - $(el).offset().top);
|
||||
|
||||
var time = Math.floor( Math.sqrt(distance / $(document).height()) * 1500 );
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: el.offset().top
|
||||
}, time);
|
||||
});
|
||||
|
||||
// slight convenience: fix the header section with my correct age automatically
|
||||
|
||||
var ages = [
|
||||
{
|
||||
year: 2018,
|
||||
number: ' seventeen'
|
||||
},
|
||||
{
|
||||
year: 2019,
|
||||
number: 'n eighteen'
|
||||
},
|
||||
{
|
||||
year: 2020,
|
||||
number: ' nineteen',
|
||||
},
|
||||
{
|
||||
year: 2021,
|
||||
number: ' twenty',
|
||||
extend: true
|
||||
},
|
||||
{
|
||||
year: 2031,
|
||||
number: ' thirty',
|
||||
extend: true
|
||||
},
|
||||
// should not be using this website past this age probably hmm
|
||||
{
|
||||
year: 2041,
|
||||
number: ' <insert big-ass number>',
|
||||
}
|
||||
];
|
||||
|
||||
for(var i = ages.length - 1; i >= 0; i--) {
|
||||
var bday = new Date('01/19/' + ages[i].year),
|
||||
today = new Date();
|
||||
|
||||
if(bday.getTime() <= today.getTime()) {
|
||||
var str = ages[i].number;
|
||||
|
||||
if(ages[i].extend) {
|
||||
var numbers = ['', ' one', ' two', ' three', ' four', ' five', ' six', ' seven', ' eight', ' nine'];
|
||||
|
||||
var n = today.getFullYear() - bday.getFullYear();
|
||||
|
||||
str += numbers[n];
|
||||
}
|
||||
|
||||
$('.age').html(str);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// easter egg
|
||||
|
||||
var sequence = [87, 65, 75, 65, 78, 68, 65, 70, 79, 82, 69, 86, 69, 82];
|
||||
|
||||
var eei = 0;
|
||||
|
||||
$(window).on('keyup', function(e) {
|
||||
if(e.keyCode == sequence[eei]) {
|
||||
eei++;
|
||||
}
|
||||
|
||||
else {
|
||||
eei = 0;
|
||||
}
|
||||
|
||||
if(eei == sequence.length) {
|
||||
$('body').toggleClass('dark-mode');
|
||||
eei = 0;
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue