-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.js
102 lines (84 loc) · 2.83 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { user, repositories } from "./services/api.js"
import { checkSection } from "./menus.js"
import { techs } from "./techs.js"
import { showProjects } from "./projects.js"
import { calcAge } from "./age.js"
const sectionAboutMe = document.querySelector("#about-me")
const photo = sectionAboutMe.querySelector(".photo")
const linkedin = document.querySelector(".section-social-medias a")
const elSectionAboutMe = sectionAboutMe.querySelector("section")
const paragraph = elSectionAboutMe.querySelector("p")
async function getData(url) {
const response = await fetch(url)
const data = await response.json().catch(error => error)
return data
}
async function getResponse(repo) {
const response = await getData(repo)
return response
}
async function getUser() {
return getResponse(user)
}
async function getRepos() {
return getResponse(repositories)
}
function showDataUser(user) {
const bio = document.createElement("h4")
photo.src = user.avatar_url
bio.innerHTML = `${user.bio} | ${user.location}`
elSectionAboutMe.insertBefore(bio, paragraph)
linkedin.href = user.blog
}
function showMyAge() {
const age = calcAge()
const contentAge = document.createElement("p")
contentAge.innerHTML = `Meu nome é Matheus Aurélio, tenho ${age} anos, sou Desenvolvedor Front-End e Técnico em Desenvolvimento de Sistemas, tendo como objetivo atuar no desenvolvimento de interfaces com foco em experiência para o usuário.`
elSectionAboutMe.querySelector("h4").after(contentAge)
}
window.onload = async () => {
const [user, repos] = await Promise.all([getUser(), getRepos()])
showDataUser(user)
showProjects(repos)
showMyAge()
}
const articleAbilities = document.querySelector("#abilities")
const section = document.querySelector("#abilities section")
techs.map(item => {
section.innerHTML += `<figure style="color: ${item.color};">
<span>
<i class="${item.icon}"></i>
</span>
<figcaption>${item.name}</figcaption>
</figure>`
})
articleAbilities.append(section)
const buttonTopPage = document.querySelector(".btn-top-page")
window.onscroll = () => {
showButton()
checkSection()
}
function showButton() {
scrollY > 600 ? buttonTopPage.classList.add("show") : buttonTopPage.classList.remove("show")
}
const form = document.querySelector("form")
const buttonForm = form.querySelector("button[type='submit']")
form.onsubmit = () => buttonForm.disabled = true
$('#phone').mask('(00) 00000-0000')
const swiper = new Swiper('.swiper', {
slidesPerView: 1,
keyboard: true,
pagination: {
el: '.swiper-pagination',
},
breakpoints: {
767: {
slidesPerView: 2,
setWrapperSize: true
}
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
}
})