diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 000000000..9d93fd1b1 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +module.exports = { + printWidth: 120, + trailingComma: 'none', + semi: true, + singleQuote: true, + endOfLine: 'auto', + bracketSpacing: true, + bracketSameLine: true, + arrowParens: 'avoid', + singleAttributePerLine: true +}; diff --git a/assets/css/acordeon.css b/assets/css/acordeons.css similarity index 58% rename from assets/css/acordeon.css rename to assets/css/acordeons.css index 0a250de2a..6b1ea2566 100644 --- a/assets/css/acordeon.css +++ b/assets/css/acordeons.css @@ -1,67 +1,61 @@ -.acordeon { +.acordeons { display: flex; flex-direction: column; + align-items: center; + margin: 3rem auto; + gap: 2rem; +} + +.acordeon { width: 100%; - margin: 1rem 0; border: 1px solid #fff; border-radius: 1rem; - transition: .25s; + transition: all .2s; } -.acordeon.open, .acordeon:hover { background-color: #55569E; border-color: #55569E; } -.acordeon .trigger { +.trigger { + font-size: 1.5rem; + font-weight: bold; display: flex; - flex-direction: row; justify-content: space-between; align-items: center; - font-size: 1.5rem; - font-weight: 700; + width: 100%; padding: 1rem 2rem; background-color: transparent; color: #fff; border: none; -} - -.acordeon .trigger h2 { - margin: 0; - font-size: 1.5rem; - text-align: start; -} - -.acordeon .trigger:hover { cursor: pointer; } -.acordeon .trigger::after { +.trigger::after { content: ''; - display: inline-block; - width: 1.5rem; - height: 1.5rem; + background-image: url('../img/icons/open.svg'); background-repeat: no-repeat; background-size: contain; - background-image: url('../img/icons/arrow-top.svg'); - transition: .25s; + background-position: center; + width: 1.5rem; + height: 1rem; + transition: transform .4s; } .acordeon.open .trigger::after { transform: rotate(180deg); } -.acordeon .content { +.content { overflow: hidden; height: 0; opacity: 0; - transition: opacity .25s ease-in-out; + transition: height 0ms 400ms, opacity 400ms 0ms; } .acordeon.open .content { - display: block; - padding: 0 1rem 1rem 2rem; height: auto; opacity: 1; + transition: height 0ms 0ms, opacity 600ms 0ms; } \ No newline at end of file diff --git a/assets/css/experience.css b/assets/css/experience.css deleted file mode 100644 index c2334ed9f..000000000 --- a/assets/css/experience.css +++ /dev/null @@ -1,28 +0,0 @@ -.experience { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; - list-style: none; -} - -.experience li { - margin-bottom: 1rem; -} - -.experience li .period { - display: flex; - flex-direction: row; - align-items: center; -} - -.experience li .period::before { - content: ""; - display: inline-block; - width: 1rem; - height: 1rem; - background-repeat: no-repeat; - background-size: contain; - background-image: url('../img/icons/calendar.svg'); - margin-right: .5rem; -} \ No newline at end of file diff --git a/assets/css/experiencies.css b/assets/css/experiencies.css new file mode 100644 index 000000000..63c9e4454 --- /dev/null +++ b/assets/css/experiencies.css @@ -0,0 +1,53 @@ +.experiencies { + display: flex; + flex-direction: column; + padding-left: 1rem; + gap: 1rem; +} + +.experience { + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.experience p { + display: flex; + align-items: flex-end; +} + +.company::before { + content: ''; + background-image: url('../img/icons/company.png'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 1.5rem; + height: 1.5rem; + display: inline-block; + margin-right: .5rem; +} + +.time { + color: #ccc; +} + +.time::before { + content: ''; + background-image: url('../img/icons/experience.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 1.5rem; + height: 1.5rem; + display: inline-block; + margin-right: .5rem; +} + +@media screen and (max-width: 400px) { + .experiencies { + padding: 1rem 0.25rem; + margin: 0; + } +} \ No newline at end of file diff --git a/assets/css/footer.css b/assets/css/footer.css index d63625ad1..1ef24885d 100644 --- a/assets/css/footer.css +++ b/assets/css/footer.css @@ -1,12 +1,9 @@ footer { - width: 100%; display: flex; - flex-direction: row; justify-content: flex-end; - align-items: center; - padding: 1rem; } -footer img { - max-width: 100px; +footer a img { + width: 100px; + height: 100px; } \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css index 1f2c0d6ad..c7bd8cc6e 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,67 +1,93 @@ * { box-sizing: border-box; - font-family: 'Open Sans', sans-serif; + outline: 0; + list-style: none; + margin: 0; + padding: 0; } @font-face { font-family: 'Neue Machina'; - src: url('../fonts/neue-machina-regular.otf'); + src: url('../fonts/neue-machina/neue-machina-regular.otf'); } body { + font-family: 'Open Sans', sans-serif; + border-radius: 46px; background-color: #000; + /* background: linear-gradient(140deg, rgba(124, 12, 123, 1) 0%, rgba(16, 47, 73, 1) 10%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 65%, rgba(16, 47, 73, 1) 80%, rgba(124, 12, 123, 1) 90%); + background-repeat: no-repeat; */ color: #fff; } -a { - color: #fff; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -.main { +.container { margin: 1rem; - padding: 1rem; + padding: 2rem; border: 1px solid #fff; border-radius: 1rem; + max-width: 1000px; } -.main::before, -.main::after { +.container::before { content: ''; - background-image: url('../img/background.svg'); + background-image: url('../img/background/top.svg'); background-repeat: no-repeat; background-size: contain; display: inline-block; position: fixed; top: 0; left: 0; - width: 140vw; - height: 100vh; + width: 50vh; + height: 50vh; z-index: -1; } -.main::after { +.container::after { content: ''; - top: auto; - left: auto; + background-image: url('../img/background/bottom.svg'); + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + position: fixed; bottom: 0; right: 0; + width: 50vh; + height: 50vh; + z-index: -1; transform: rotate(180deg); } +a { + text-decoration: none; + color: #fff; +} -@media only screen and (min-width: 768px) { - .main { - max-width: 1024px; - margin: 1rem auto; +h3 { + display: flex; + align-items: center; +} + +@media screen and (max-width: 480px) { + .container { + padding: .25rem; + margin: 0; + } +} + +@media screen and (min-width: 768px) { + .container::before { + width: 100vh; + height: 100vh; } - .main::before, - .main::after { - width: 70vw; + .container::after { + width: 100vh; + height: 100vh; + } +} + +@media screen and (min-width: 1000px) { + .container { + margin: 1rem auto; } } \ No newline at end of file diff --git a/assets/css/header.css b/assets/css/header.css index 572ab9438..f6583d55f 100644 --- a/assets/css/header.css +++ b/assets/css/header.css @@ -3,94 +3,101 @@ flex-direction: column; align-items: center; position: relative; + padding: 0; } -.header::after { - content: ''; - display: inline-block; - position: absolute; - top: 1rem; - right: 1rem; - width: 2rem; - height: 2rem; - background-repeat: no-repeat; - background-size: contain; - background-image: url('../img/icons/header.svg'); -} - -.header .photo { +.header img { width: 200px; height: 200px; - border-radius: 50%; + border-radius: 100%; + filter: brightness(1.3) saturate(1.3); + object-fit: cover; } -.header .title { +.info { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.title { font-family: 'Neue Machina'; - text-align: center; + font-size: 2.25rem; } -.information { +.details { display: flex; flex-direction: column; - align-items: flex-start; - width: 100%; + gap: 1rem; } -.information p { +.details p { + margin: 0; display: flex; - flex-direction: row; align-items: center; - margin: .5rem; - font-size: 1.125rem; } -.information p::before { +.details p::before { content: ''; + width: 1.25rem; + height: 1.25rem; display: inline-block; - width: 1rem; - height: 1rem; + margin-right: .5rem; background-repeat: no-repeat; background-size: contain; - margin-right: .5rem; + background-position: center; } -.information .job::before { - background-image: url('../img/icons/job.svg'); +.job::before { + background-image: url('../img/icons/profile/job.png'); } -.information .location::before { - background-image: url('../img/icons/location.svg'); +.linkedin::before { + background-image: url('../img/icons/profile/linkedin.png'); } -.information .email::before { - background-image: url('../img/icons/email.svg'); +.location::before { + background-image: url('../img/icons/profile/location.svg'); } -.information .phone::before { - background-image: url('../img/icons/phone.svg'); +.phone::before { + background-image: url('../img/icons/profile/phone.svg'); } -@media only screen and (min-width: 768px) { - .header { - display: grid; - grid-template-areas: - "photo title" - "photo information" - ; +.email::before { + background-image: url('../img/icons/profile/email.svg'); +} + +@media screen and (min-width: 400px) { + .header::after { + content: ''; + background-image: url('../img/icons/points.svg'); + background-repeat: no-repeat; + background-size: contain; + width: 2.5rem; + height: 2.5rem; + position: absolute; + right: 0; + top: 0; } +} - .header .photo { - grid-area: photo; - margin: 0 auto; + + +@media screen and (max-width: 400px) { + .header { + padding: 1rem; } +} - .header .title { - grid-area: title; - text-align: start; - max-width: 210px; +@media screen and (min-width: 768px) { + .header { + flex-direction: row; + justify-content: center; + gap: 50px; } - .header .information { - grid-area: information; + .title { + line-height: 3rem; } } \ No newline at end of file diff --git a/assets/css/languages.css b/assets/css/languages.css deleted file mode 100644 index c8fb1fb94..000000000 --- a/assets/css/languages.css +++ /dev/null @@ -1,28 +0,0 @@ -.languages { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; -} - -.languages li { - display: flex; - flex-direction: row; - align-items: center; - padding-right: 1rem; - font-weight: 700; -} - -.languages li::before { - content: ""; - display: inline-block; - width: 1rem; - height: 1rem; - background-repeat: no-repeat; - background-size: contain; - background-image: url('../img/icons/check.svg'); - margin-right: .5rem; -} \ No newline at end of file diff --git a/assets/css/portfolio.css b/assets/css/portfolio.css deleted file mode 100644 index 78543f3e3..000000000 --- a/assets/css/portfolio.css +++ /dev/null @@ -1,37 +0,0 @@ -.portfolio { - display: flex; - flex-direction: column; - justify-content: flex-start; - width: 100%; - margin: 0; - padding: 0; - list-style: none; -} - -.portfolio li { - display: flex; - flex-direction: column; - justify-content: flex-start; - margin: 1rem 0; -} - -.portfolio li h3 { - display: flex; - flex-direction: row; - align-items: center; - font-size: 1.25rem; - font-weight: 700; - margin: 0; - margin-bottom: .5rem; -} - -.portfolio li h3.github::before { - content: ""; - display: inline-block; - width: 1rem; - height: 1rem; - background-repeat: no-repeat; - background-size: contain; - background-image: url('../img/icons/github.svg'); - margin-right: .5rem; -} \ No newline at end of file diff --git a/assets/css/projects.css b/assets/css/projects.css new file mode 100644 index 000000000..105b03692 --- /dev/null +++ b/assets/css/projects.css @@ -0,0 +1,39 @@ +.projects { + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 1rem; + gap: 2rem; +} + +.project { + padding-left: 1rem; + display: flex; + flex-direction: column; + gap: .5rem; +} + +.project h3::before { + content: ''; + background-image: url('../img/icons/github.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + width: 1.5rem; + height: 1.5rem; + display: inline-block; + margin-right: .5rem; +} + +@media screen and (max-width: 400px) { + .project a { + font-size: .75rem; + } +} + +@media screen and (max-width: 400px) { + .projects { + padding: 1rem .25rem; + margin: 0; + } +} \ No newline at end of file diff --git a/assets/css/skills.css b/assets/css/skills.css index 2995ada54..20e8fc0e2 100644 --- a/assets/css/skills.css +++ b/assets/css/skills.css @@ -1,43 +1,64 @@ .skills { + display: flex; + justify-content: space-between; + padding: 2rem; +} + + +.tools { display: flex; flex-direction: column; } -.skills .tools ul { +.tools h3 { + margin-bottom: 2rem; +} + +.tools-list { display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; flex-wrap: wrap; - margin: 0; - padding: 0; - list-style: none; + width: 250px; + gap: 2rem; } -.skills .tools ul li img { - max-width: 50px; - max-height: 50px; - margin: 0 .5rem; +.tools-img { + width: 50px; + height: 50px; } -.skills .personal ul { +.personal { + width: 400px; display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - flex-wrap: wrap; - margin: 0; - padding: 0; + flex-direction: column; + gap: 1rem; } -.skills .personal ul li { - margin-left: 2rem; - padding: .5rem +.personal h3 { + margin-bottom: 2rem; } -@media only screen and (min-width: 768px) { +.personal-skills { + display: grid; + grid-template-columns: auto auto; + gap: 1rem; +} + +@media screen and (max-width: 425px) { + .personal-skills { + display: flex; + flex-direction: column; + } +} + +@media screen and (max-width: 768px) { .skills { - display: grid; - grid-template-columns: 1fr 1fr; + flex-direction: column; + gap: 2rem; + padding: 2rem; + } + + .personal h3 { + margin-bottom: 2rem; + align-self: auto; } } \ No newline at end of file diff --git a/assets/fonts/neue-machina/neue-machina-bold.otf b/assets/fonts/neue-machina/neue-machina-bold.otf new file mode 100644 index 000000000..421d8da5a Binary files /dev/null and b/assets/fonts/neue-machina/neue-machina-bold.otf differ diff --git a/assets/fonts/neue-machina-regular.otf b/assets/fonts/neue-machina/neue-machina-regular.otf similarity index 100% rename from assets/fonts/neue-machina-regular.otf rename to assets/fonts/neue-machina/neue-machina-regular.otf diff --git a/assets/img/background.svg b/assets/img/background.svg deleted file mode 100644 index 0f894d91e..000000000 --- a/assets/img/background.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/img/background/bottom.svg b/assets/img/background/bottom.svg new file mode 100644 index 000000000..3888fbec9 --- /dev/null +++ b/assets/img/background/bottom.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/background/top.svg b/assets/img/background/top.svg new file mode 100644 index 000000000..3888fbec9 --- /dev/null +++ b/assets/img/background/top.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/dio.svg b/assets/img/dio.svg deleted file mode 100644 index e5d2b3566..000000000 --- a/assets/img/dio.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/img/icons/arrow-top.svg b/assets/img/icons/arrow-top.svg deleted file mode 100644 index a0dc911f7..000000000 --- a/assets/img/icons/arrow-top.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/img/icons/calendar.svg b/assets/img/icons/calendar.svg deleted file mode 100644 index 6ccc085dc..000000000 --- a/assets/img/icons/calendar.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/img/icons/check.svg b/assets/img/icons/check.svg deleted file mode 100644 index 4f6e2d0a5..000000000 --- a/assets/img/icons/check.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/img/icons/checked.svg b/assets/img/icons/checked.svg new file mode 100644 index 000000000..83c95e315 --- /dev/null +++ b/assets/img/icons/checked.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/close.svg b/assets/img/icons/close.svg new file mode 100644 index 000000000..5b1295cc2 --- /dev/null +++ b/assets/img/icons/close.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/company.png b/assets/img/icons/company.png new file mode 100644 index 000000000..35f5d6ff9 Binary files /dev/null and b/assets/img/icons/company.png differ diff --git a/assets/img/icons/dio.svg b/assets/img/icons/dio.svg new file mode 100644 index 000000000..74afd9049 --- /dev/null +++ b/assets/img/icons/dio.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/img/icons/email.svg b/assets/img/icons/email.svg deleted file mode 100644 index 27d087c2f..000000000 --- a/assets/img/icons/email.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/img/icons/experience.svg b/assets/img/icons/experience.svg new file mode 100644 index 000000000..e83c6ba3d --- /dev/null +++ b/assets/img/icons/experience.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/img/icons/github.svg b/assets/img/icons/github.svg index d89aef83f..c0f12825a 100644 --- a/assets/img/icons/github.svg +++ b/assets/img/icons/github.svg @@ -1,3 +1,10 @@ - + + + + + + + + diff --git a/assets/img/icons/header.svg b/assets/img/icons/header.svg deleted file mode 100644 index c9e2d5925..000000000 --- a/assets/img/icons/header.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/assets/img/icons/job.svg b/assets/img/icons/job.svg deleted file mode 100644 index 365242981..000000000 --- a/assets/img/icons/job.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/assets/img/icons/location.svg b/assets/img/icons/location.svg deleted file mode 100644 index e0f030130..000000000 --- a/assets/img/icons/location.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/img/icons/open.svg b/assets/img/icons/open.svg new file mode 100644 index 000000000..b25f42596 --- /dev/null +++ b/assets/img/icons/open.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/phone.svg b/assets/img/icons/phone.svg deleted file mode 100644 index 97bb57a30..000000000 --- a/assets/img/icons/phone.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/img/icons/points.svg b/assets/img/icons/points.svg new file mode 100644 index 000000000..df41c376f --- /dev/null +++ b/assets/img/icons/points.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/img/icons/profile/email.svg b/assets/img/icons/profile/email.svg new file mode 100644 index 000000000..939c8a097 --- /dev/null +++ b/assets/img/icons/profile/email.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/profile/job.png b/assets/img/icons/profile/job.png new file mode 100644 index 000000000..6ccb69382 Binary files /dev/null and b/assets/img/icons/profile/job.png differ diff --git a/assets/img/icons/profile/job2.svg b/assets/img/icons/profile/job2.svg new file mode 100644 index 000000000..7f5546b3d --- /dev/null +++ b/assets/img/icons/profile/job2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/img/icons/profile/linkedin.png b/assets/img/icons/profile/linkedin.png new file mode 100644 index 000000000..f6a5f5c55 Binary files /dev/null and b/assets/img/icons/profile/linkedin.png differ diff --git a/assets/img/icons/profile/location.svg b/assets/img/icons/profile/location.svg new file mode 100644 index 000000000..4a2038b37 --- /dev/null +++ b/assets/img/icons/profile/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/profile/phone.svg b/assets/img/icons/profile/phone.svg new file mode 100644 index 000000000..4c332e52b --- /dev/null +++ b/assets/img/icons/profile/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/tools/git.svg b/assets/img/icons/tools/git.svg deleted file mode 100644 index 5cb1a7177..000000000 --- a/assets/img/icons/tools/git.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/img/icons/tools/java.svg b/assets/img/icons/tools/java.svg deleted file mode 100644 index cf0a0e48c..000000000 --- a/assets/img/icons/tools/java.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/assets/img/icons/tools/js.svg b/assets/img/icons/tools/js.svg deleted file mode 100644 index d39b9bcde..000000000 --- a/assets/img/icons/tools/js.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/assets/img/icons/tools/nodejs.svg b/assets/img/icons/tools/nodejs.svg deleted file mode 100644 index c05f3c258..000000000 --- a/assets/img/icons/tools/nodejs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/img/icons/tools/react.svg b/assets/img/icons/tools/react.svg deleted file mode 100644 index 58d6c2454..000000000 --- a/assets/img/icons/tools/react.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/img/my-photo.png b/assets/img/my-photo.png deleted file mode 100644 index 749b8d86a..000000000 Binary files a/assets/img/my-photo.png and /dev/null differ diff --git a/assets/img/profile.jpg b/assets/img/profile.jpg new file mode 100644 index 000000000..26a58d142 Binary files /dev/null and b/assets/img/profile.jpg differ diff --git a/assets/js/acordeon.js b/assets/js/acordeon.js index daa6f3783..72f5a6b9e 100644 --- a/assets/js/acordeon.js +++ b/assets/js/acordeon.js @@ -1,15 +1,14 @@ +const acordeonTriggers = document.querySelectorAll('.trigger'); -const acordeonTriggers = document.querySelectorAll('.acordeon .trigger') +acordeonTriggers.forEach(trigger => { + trigger.addEventListener('click', () => { + const acordeon = trigger.parentElement; + const isOpen = acordeon.classList.contains('open'); -acordeonTriggers.forEach((trigger) => { - trigger.addEventListener('click', (e) => { - const acordeon = trigger.parentElement - const isOpen = acordeon.classList.contains('open') - - if (isOpen) { - acordeon.classList.remove('open') - } else { - acordeon.classList.add('open') - } - }) -}) + if (isOpen) { + acordeon.classList.remove('open'); + } else { + acordeon.classList.add('open'); + } + }); +}); diff --git a/assets/js/api.js b/assets/js/api.js index 29f0a21e9..0e51aaef1 100644 --- a/assets/js/api.js +++ b/assets/js/api.js @@ -1,7 +1,5 @@ - async function fetchProfileData() { - const url = 'https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/profile.json'; - const response = await fetch(url) - const profileData = await response.json() - return profileData + const url = 'https://raw.githubusercontent.com/rafaschenkel/js-developer-portfolio/schenkel/data/profile.json'; + const dados = await (await fetch(url)).json(); + return await dados; } diff --git a/assets/js/main.js b/assets/js/main.js index f5e871966..6328e7443 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,73 +1,80 @@ +(async () => { + const profileData = await fetchProfileData(); + updateInfos(profileData); + updateHardSkills(profileData); + updateSoftSkills(profileData); + updatePortfolio(profileData); + updateExperienceProfessional(profileData); +})(); -function updateProfileInfo(profileData) { - const photo = document.getElementById('profile.photo') - photo.src = profileData.photo - photo.alt = profileData.name +function updateInfos(profileData) { + const photo = document.querySelector('#profile-photo'); + photo.setAttribute('src', `${profileData.photo}`); - const name = document.getElementById('profile.name') - name.innerText = profileData.name + const name = document.querySelector('#profile-name'); + name.innerText = profileData.name; - const job = document.getElementById('profile.job') - job.innerText = profileData.job + const job = document.querySelector('#profile-job'); + job.innerText = profileData.job; - const location = document.getElementById('profile.location') - location.innerText = profileData.location + const linkedin = document.querySelector('#profile-linkedin'); + linkedin.setAttribute('href', `${profileData.linkedin}`); + linkedin.innerText = profileData.linkedin.replace('https://www.linkedin.com/in/', ''); - const phone = document.getElementById('profile.phone') - phone.innerText = profileData.phone - phone.href = `tel:${profileData.phone}` + const location = document.querySelector('#profile-location'); + location.innerText = profileData.location; - const email = document.getElementById('profile.email') - email.innerText = profileData.email - email.href = `mailto:${profileData.email}` -} + const phone = document.querySelector('#profile-phone'); + phone.setAttribute( + 'href', + `https://wa.me/+55${profileData.phone.replace('(', '').replace(')', '').replace(' ', '').replace('-', '')}` + ); + phone.innerText = profileData.phone; -function updateSoftSkills(profileData) { - const softSkills = document.getElementById('profile.skills.softSkills') - softSkills.innerHTML = profileData.skills.softSkills.map(skill => `
  • ${skill}
    • `).join('') + const email = document.querySelector('#profile-email'); + email.setAttribute('href', `mailto:${profileData.email}`); + email.innerText = profileData.email; } function updateHardSkills(profileData) { - const hardSkills = document.getElementById('profile.skills.hardSkills') - hardSkills.innerHTML = profileData.skills.hardSkills.map(skill => `
  • ${skill.name}
    • `).join('') + const ulHardSkills = document.querySelector('#profile-hardskills'); + ulHardSkills.innerHTML = profileData.skills.hardSkills + .map(hard => `
  • icone ${hard.name}
    • `) + .join(''); } -function updateLanguages(profileData) { - const languages = document.getElementById('profile.languages') - languages.innerHTML = profileData.languages.map(language => `
  • ${language}
    • `).join('') +function updateSoftSkills(profileData) { + const ulSoftSkills = document.querySelector('#profile-softskills'); + ulSoftSkills.innerHTML = profileData.skills.softSkills.map(soft => `
  • ${soft}
    • `).join(''); } function updatePortfolio(profileData) { - const portfolio = document.getElementById('profile.portfolio') - portfolio.innerHTML = profileData.portfolio.map(project => { - return ` -
  • -

    ${project.name}

    - ${project.url} -
    • - ` - }).join('') + const ulProjects = document.querySelector('#projects'); + ulProjects.innerHTML = profileData.portfolio + .map(proj => { + return ` +
  • +

    ${proj.name}

    + https://github.com/rafaschenkel/devsteam +
    • + `; + }) + .join(''); } -function updateProfessionalExperience(profileData) { - const professionalExperience = document.getElementById('profile.professionalExperience') - professionalExperience.innerHTML = profileData.professionalExperience.map(experience => { - return ` -
  • -

    ${experience.name}

    -

    ${experience.period}

    -

    ${experience.description}

    -
    • - ` - }).join('') +function updateExperienceProfessional(profileData) { + const experiencies = document.querySelector('#experiencies'); + experiencies.innerHTML = profileData.professionalExperience + .map(exp => { + return ` +
  • +

    ${exp.name}

    +

    ${exp.company}

    +

    ${exp.period}

    +

    ${exp.description}

    +
    • + `; + }) + .join(''); } - -(async () => { - const profileData = await fetchProfileData() - updateProfileInfo(profileData) - updateSoftSkills(profileData) - updateHardSkills(profileData) - updateLanguages(profileData) - updatePortfolio(profileData) - updateProfessionalExperience(profileData) -})() diff --git a/data/profile.json b/data/profile.json index 50da6a25a..643a38e25 100644 --- a/data/profile.json +++ b/data/profile.json @@ -1,78 +1,89 @@ { - "name": "Renan J Paula", - "photo": "https://avatars.githubusercontent.com/u/3266640?v=4", - "job": "Tech Lead no S3 Bank", - "location": "São Paulo - SP", - "phone": "(16) 98159-7656", - "email": "renanjohannsen@gmail.com", + "name": "Rafael Schenkel", + "photo": "https://avatars.githubusercontent.com/u/103801139?v=4", + "job": "Desenvolvedor Full Stack JS", + "linkedin": "https://www.linkedin.com/in/rafaschenkeldev", + "location": "Novo Hamburgo - RS", + "phone": "(51) 99429-9555", + "email": "rafaschenkel.dev@gmail.com", "skills": { "hardSkills": [ { - "name": "Nodejs", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/nodejs.png" + "name": "HTML5", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/html.png" }, { - "name": "Java", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/java.png" + "name": "CSS3", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/css.png" }, { - "name": "Angular", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/angular.png" + "name": "JavaScript", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/js.png" }, { "name": "React", "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/react.png" }, + { + "name": "Nodejs", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/nodejs.png" + }, + { + "name": "GitHub", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/github.png" + }, { "name": "Mongodb", "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/mongodb.png" }, { - "name": "Postgresql", - "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/postgresql.png" + "name": "MySQL", + "logo": "https://raw.githubusercontent.com/digitalinnovationone/js-developer-portfolio/main/data/imgs/mysql.png" } ], "softSkills": [ - "Empatia", "Liderança", + "Comunicação", "Trabalho em equipe", - "Flexibilidade", - "Organização" + "Organização", + "Comprometimento", + "Flexibilidade" ] }, - "languages": [ - "Português BR", - "Inglês (intermediário)", - "Espanhol (intermediário)", - "Italiano (iniciante)" - ], "portfolio": [ { - "name": "Curso Ministrado na DIO para a criação de uma Pokedex", - "url": "https://github.com/RenanJPaula/js-developer-pokedex", + "name": "Projeto DevSteam criado com React", + "url": "https://github.com/rafaschenkel/devsteam", "github": true }, { - "name": "Curso Ministrado na DIO para a criação de uma página de portfolio", - "url": "https://github.com/RenanJPaula/js-developer-portfolio", + "name": "Projeto AppMovies criado com React", + "url": "https://github.com/rafaschenkel/app-movies", + "github": true + }, + { + "name": "Criação de uma Pokedex", + "url": "https://github.com/rafaschenkel/js-developer-pokedex", + "github": true + }, + { + "name": "Criação de uma página de portfolio", + "url": "https://github.com/rafaschenkel/js-developer-portfolio", "github": true } ], "professionalExperience": [ { - "name": "Arquiteto de software / S3 BANK", - "period": "2022 - até o momento", - "description": "É um prazer trabalhar ao lado de tantos profissionais excepcionais e construir tantas inovações de mercado." - }, - { - "name": "Software Engineering Lead / DIO", - "period": "2021 - 2022", - "description": "Foi um grande prazer fazer parte deste time fantástico e poder contribuir com a transformação de tantas vidas." + "name": "Conferente Noturno", + "company": "Mk Comercio de Embalagens LTDA", + "period": "2018 - Atual", + "description": "Conferência de carga e separação de mercadorias" }, { - "name": "CEO / Brain Machine", - "period": "2016 - 2021", - "description": "Anos incríveis ao lado de pessoas maravilhosas ajudando muitas empresas por todo o mundo." + "name": "Conferente Noturno", + "company": "Hamburgo Plast Distribuidora LTDA", + "period": "2013 - 2017", + "description": "Conferência de carga e separação de mercadorias" } ] } \ No newline at end of file diff --git a/index.html b/index.html index 00a0165c3..1ae0de32f 100644 --- a/index.html +++ b/index.html @@ -3,114 +3,85 @@ - - Portifólio Renan J Paula - + Portfólio de Rafael - - - + - - - - - - + + + + + -
    +
    - Foto de Perfil - -

    - Olá,
    eu sou Carregando... -

    - -
    -

    Carregando...

    -

    Carregando...

    -

    - Carregando... -

    - + ... +
    +

    Olá,
    + eu sou o
    + loading... +

    +
    +

    loading...

    +

    loading...

    +

    loading...

    +

    loading...

    + +
    - -
    - - -
    -
    -
    -

    Ferramentas:

    -
      -
    -
    - -
    -

    Pessoal:

    -
      -
    • Carregando...
      • -
    • Carregando...
      • -
    • Carregando...
      • -
    -
    +
    + + +
    + +
    + +
    +
    +

    Linguagens / Frameworks:

    +
      +
      +
      +

      Habilidades pessoais:

      +
        +
        +
        +
        -
        -
        - -
        - - -
        -
          -
        • Carregando...
          • -
        -
        -
        - -
        - - -
        -
          -
        -
        -
        - -
        - - -
        -
          -
        -
        -
        - + +
        + +
        + +
          +
          +
          + +
          + +
          + +
            +
            +
            + +
            - +