Skip to content

Commit

Permalink
booting animation :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dadedeandrade
dadedeandrade committed Mar 25, 2022
1 parent 0689537 commit 7855f1c
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 39 deletions.
6 changes: 6 additions & 0 deletions simplePort/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@
<link rel="stylesheet" href="styles/styleWhiteTheme.css">
<link rel="stylesheet" href="styles/toggleStyle.css">
<script src="https://kit.fontawesome.com/4cd12089dc.js" crossorigin="anonymous"></script>
<script src="booting.js"></script>
<script src="scripts/main.js" defer></script>
<script src="scripts/matrixEffect.js" defer></script>
</head>

<body>

<section class="booting" id="bootSection">
<h1 id="bootText">Developed by <<b>Vinicius de Andrade</b>></h1>
</section>

<div id="blackGround" class="blackGround"></div>
<canvas id="Matrix"></canvas>
<section class="mainContent">
Expand Down
87 changes: 48 additions & 39 deletions simplePort/scripts/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
const toggleLanguage = document.querySelector('#toggleLanguage')

toggleLanguage.addEventListener('click',()=>{
toggleLanguage.addEventListener('click', () => {
toggleLanguage.classList.toggle('active')
if(toggleLanguage.className.includes('active')){
const h1 = document.querySelector('header h1')
const h2 = document.querySelector('header h2')
const liveChat = document.querySelector('#liveChat')
const socialMedia = document.querySelector('.userMedia p')
const itemDetails = document.querySelector('.itemDetails')
h1.innerHTML='Olá, seja bem vindo ao meu portifólio!'
h2.innerHTML='Aqui você consegue acessar todos meus projetos em andamento com as stacks utilizadas e que tenho conhecimento, espero que goste :)'
socialMedia.innerHTML='Redes sociais:'
itemDetails.classList.toggle('heightFix')
itemDetails.innerText='Esse projeto foi criado com o intuito de disponibilizar um ambiente agradável para desenvolvedores terem a possibilidade de um coffeBreak em home-office. Acredito na importancia de um momento de distração durante a jornada de trabalho e no home-office o momento do cafézinho se perdeu, por isso a ideia do projeto, O MVP que seria o chat já está disponibilizado e futuramente outras funções serão implementadas como uma radio colaborativa, mensagens privadas, cadastro de usurio e por aí vai :)';

} else {
const h1 = document.querySelector('header h1')
const h2 = document.querySelector('header h2')
const liveChat = document.querySelector('#liveChat')
const socialMedia = document.querySelector('.userMedia p')
h1.innerHTML='Hi, Welcome to my portifolio!'
h2.innerHTML='Here you can find all my projects with the stacks im currently working, hope you enjoy :)'
liveChat.innerHTML='CoffeBreak RealTime Chat'
socialMedia.innerHTML='Social Media:'
itemDetails.innerText="The idea behind this project was to create a pleasant environment for developers so they can take a small break from home-office in a chat with their colleagues. I believe in the idea that moments of distraction are one of the most important things during the working day so we can keep productivity going and keep burnout away, and with the current ascension of homeoffice we are kinda losing that little break we had in the office, thats why i developed the app. The MVP is ready, and for the future i'll implement more features like a collaborative radio, private messages, user registration and more :)";
}}
)
if (toggleLanguage.className.includes('active')) {
const h1 = document.querySelector('header h1')
const h2 = document.querySelector('header h2')
const liveChat = document.querySelector('#liveChat')
const socialMedia = document.querySelector('.userMedia p')
const itemDetails = document.querySelector('.itemDetails')
h1.innerHTML = 'Olá, seja bem vindo ao meu portifólio!'
h2.innerHTML = 'Aqui você consegue acessar todos meus projetos em andamento com as stacks utilizadas e que tenho conhecimento, espero que goste :)'
socialMedia.innerHTML = 'Redes sociais:'
itemDetails.classList.toggle('heightFix')
itemDetails.innerText = 'Esse projeto foi criado com o intuito de disponibilizar um ambiente agradável para desenvolvedores terem a possibilidade de um coffeBreak em home-office. Acredito na importancia de um momento de distração durante a jornada de trabalho e no home-office o momento do cafézinho se perdeu, por isso a ideia do projeto, O MVP que seria o chat já está disponibilizado e futuramente outras funções serão implementadas como uma radio colaborativa, mensagens privadas, cadastro de usurio e por aí vai :)';

} else {
const h1 = document.querySelector('header h1')
const h2 = document.querySelector('header h2')
const liveChat = document.querySelector('#liveChat')
const socialMedia = document.querySelector('.userMedia p')
h1.innerHTML = 'Hi, Welcome to my portifolio!'
h2.innerHTML = 'Here you can find all my projects with the stacks im currently working, hope you enjoy :)'
liveChat.innerHTML = 'CoffeBreak RealTime Chat'
socialMedia.innerHTML = 'Social Media:'
itemDetails.innerText = "The idea behind this project was to create a pleasant environment for developers so they can take a small break from home-office in a chat with their colleagues. I believe in the idea that moments of distraction are one of the most important things during the working day so we can keep productivity going and keep burnout away, and with the current ascension of homeoffice we are kinda losing that little break we had in the office, thats why i developed the app. The MVP is ready, and for the future i'll implement more features like a collaborative radio, private messages, user registration and more :)";
}
}
)



Expand All @@ -39,45 +40,53 @@ const eachProject = document.querySelectorAll('.item h2')

console.log(eachProject);

toggleTheme.addEventListener('click',()=>{
toggleTheme.addEventListener('click', () => {
body.classList.toggle('whiteTheme')
canvas.classList.toggle('whiteTheme')

linkedinIcon.classList.toggle('whiteTheme')
githubIcon.classList.toggle('whiteTheme')
toggleTheme.classList.toggle('whiteTheme')
toggleThemeLanguage.classList.toggle('whiteTheme')
eachProject.forEach(project=>{

toggleTheme.classList.toggle('whiteTheme')
toggleThemeLanguage.classList.toggle('whiteTheme')
eachProject.forEach(project => {
project.classList.toggle('whiteTheme')
})
const toggleIcon=()=>{

const toggleIcon = () => {
const toggleIcon = document.querySelector('#toggleIcon')
if(toggleIcon.classList =='gg-sun'){
if (toggleIcon.classList == 'gg-sun') {
toggleIcon.classList.remove('gg-sun')
toggleIcon.classList.add('gg-moon')
}
else if(toggleIcon.classList == 'gg-moon') {
else if (toggleIcon.classList == 'gg-moon') {
toggleIcon.classList.remove('gg-moon')
toggleIcon.classList.add('gg-sun')
}
}
toggleIcon()
})

function addActiveClassOnHover(elem){
function addActiveClassOnHover(elem) {
document.querySelector(`#${elem}`).classList.add('active')
}
function removeActiveClassOnHover(elem){
function removeActiveClassOnHover(elem) {
document.querySelector(`#${elem}`).classList.remove('active')
}



const itemDetails = document.querySelector('.itemDetails')
liveChat.addEventListener('mouseover',()=>{
liveChat.addEventListener('mouseover', () => {

})

})

function bootingScreen() {

setTimeout(() => document.getElementById('bootSection').classList.add('booting-finish'), 5000)
setTimeout(() => document.getElementById('bootText').classList.add('booting-finish'), 5000)

}

bootingScreen()
110 changes: 110 additions & 0 deletions simplePort/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,116 @@
}


.booting-finish {
display: none !important;
z-index: -100;
}

@-webkit-keyframes booting {
0% {
-webkit-transform: scale(20);
transform: scale(20);
-webkit-filter: blur(4px);
filter: blur(4px);
}
20% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
}

@keyframes booting {
0% {
-webkit-transform: scale(20);
transform: scale(20);
-webkit-filter: blur(4px);
filter: blur(4px);
}
20% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
80% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
}

.booting {
position: absolute;
width: 100%;
height: 100vh;
z-index: 11;
background: linear-gradient(26deg, rgba(48,48,48,1) 75%, rgba(79,79,79,1) 98%),rgba(0,0,0,1) 0%;
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
-webkit-animation: booting 5s forwards;
animation: booting 5s forwards;
}

@-webkit-keyframes AnimationName {
0% {
background-position: 76% 0%;
}
50% {
background-position: 25% 100%;
}
100% {
background-position: 76% 0%;
}
}

@keyframes AnimationName {
0% {
background-position: 76% 0%;
}
50% {
background-position: 25% 100%;
}
100% {
background-position: 76% 0%;
}
}

.booting h1 {
color: white;
text-align: center;
line-height: 100vh;
font-weight: 100;
}


html {
margin: 0px;
height: 100%;
Expand Down

0 comments on commit 7855f1c

Please sign in to comment.