diff --git a/assets/css/style.css b/assets/css/style.css index 291d830..d571dad 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1968,7 +1968,7 @@ textarea.form-input::-webkit-resizer { } .avatar-box img { - width: 150px; + width: 180px; } .info-content .name { diff --git a/assets/js/script.js b/assets/js/script.js index 7e4f72d..5379274 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,20 +1,18 @@ -'use strict'; - - +"use strict"; // element toggle function -const elementToggleFunc = function (elem) { elem.classList.toggle("active"); } - - +const elementToggleFunc = function (elem) { + elem.classList.toggle("active"); +}; // sidebar variables const sidebar = document.querySelector("[data-sidebar]"); const sidebarBtn = document.querySelector("[data-sidebar-btn]"); // sidebar toggle functionality for mobile -sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); }); - - +sidebarBtn.addEventListener("click", function () { + elementToggleFunc(sidebar); +}); // testimonials variables const testimonialsItem = document.querySelectorAll("[data-testimonials-item]"); @@ -31,47 +29,45 @@ const modalText = document.querySelector("[data-modal-text]"); const testimonialsModalFunc = function () { modalContainer.classList.toggle("active"); overlay.classList.toggle("active"); -} +}; // add click event to all modal items for (let i = 0; i < testimonialsItem.length; i++) { - testimonialsItem[i].addEventListener("click", function () { - modalImg.src = this.querySelector("[data-testimonials-avatar]").src; modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt; - modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML; - modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML; + modalTitle.innerHTML = this.querySelector( + "[data-testimonials-title]" + ).innerHTML; + modalText.innerHTML = this.querySelector( + "[data-testimonials-text]" + ).innerHTML; testimonialsModalFunc(); - }); - } // add click event to modal close button modalCloseBtn.addEventListener("click", testimonialsModalFunc); overlay.addEventListener("click", testimonialsModalFunc); - - // custom select variables const select = document.querySelector("[data-select]"); const selectItems = document.querySelectorAll("[data-select-item]"); const selectValue = document.querySelector("[data-selecct-value]"); const filterBtn = document.querySelectorAll("[data-filter-btn]"); -select.addEventListener("click", function () { elementToggleFunc(this); }); +select.addEventListener("click", function () { + elementToggleFunc(this); +}); // add event in all select items for (let i = 0; i < selectItems.length; i++) { selectItems[i].addEventListener("click", function () { - let selectedValue = this.innerText.toLowerCase(); selectValue.innerText = this.innerText; elementToggleFunc(select); filterFunc(selectedValue); - }); } @@ -79,9 +75,7 @@ for (let i = 0; i < selectItems.length; i++) { const filterItems = document.querySelectorAll("[data-filter-item]"); const filterFunc = function (selectedValue) { - for (let i = 0; i < filterItems.length; i++) { - if (selectedValue === "all") { filterItems[i].classList.add("active"); } else if (selectedValue === filterItems[i].dataset.category) { @@ -89,18 +83,14 @@ const filterFunc = function (selectedValue) { } else { filterItems[i].classList.remove("active"); } - } - -} +}; // add event in all filter button items for large screen let lastClickedBtn = filterBtn[0]; for (let i = 0; i < filterBtn.length; i++) { - filterBtn[i].addEventListener("click", function () { - let selectedValue = this.innerText.toLowerCase(); selectValue.innerText = this.innerText; filterFunc(selectedValue); @@ -108,13 +98,9 @@ for (let i = 0; i < filterBtn.length; i++) { lastClickedBtn.classList.remove("active"); this.classList.add("active"); lastClickedBtn = this; - }); - } - - // contact form variables const form = document.querySelector("[data-form]"); const formInputs = document.querySelectorAll("[data-form-input]"); @@ -123,19 +109,15 @@ const formBtn = document.querySelector("[data-form-btn]"); // add event to all form input field for (let i = 0; i < formInputs.length; i++) { formInputs[i].addEventListener("input", function () { - // check form validation if (form.checkValidity()) { formBtn.removeAttribute("disabled"); } else { formBtn.setAttribute("disabled", ""); } - }); } - - // page navigation variables const navigationLinks = document.querySelectorAll("[data-nav-link]"); const pages = document.querySelectorAll("[data-page]"); @@ -143,7 +125,6 @@ const pages = document.querySelectorAll("[data-page]"); // add event to all nav link for (let i = 0; i < navigationLinks.length; i++) { navigationLinks[i].addEventListener("click", function () { - for (let i = 0; i < pages.length; i++) { if (this.innerHTML.toLowerCase() === pages[i].dataset.page) { pages[i].classList.add("active"); @@ -154,12 +135,9 @@ for (let i = 0; i < navigationLinks.length; i++) { navigationLinks[i].classList.remove("active"); } } - }); } - - // Função para rolar suavemente até um elemento específico const scrollToElement = (selector, offset = 0) => { const element = document.querySelector(selector); @@ -167,18 +145,19 @@ const scrollToElement = (selector, offset = 0) => { const top = element.offsetTop + offset; window.scrollTo({ top: top, - behavior: "smooth" + behavior: "smooth", }); } }; - // Lazy Loading de Imagens e Iframes // Esse script adia o carregamento de imagens e iframes até que estejam próximos de serem exibidos document.addEventListener("DOMContentLoaded", function () { const lazyLoad = () => { - const lazyElements = document.querySelectorAll("img[data-src], iframe[data-src]"); + const lazyElements = document.querySelectorAll( + "img[data-src], iframe[data-src]" + ); const windowHeight = window.innerHeight; lazyElements.forEach((element) => { @@ -197,12 +176,9 @@ document.addEventListener("DOMContentLoaded", function () { lazyLoad(); // Executa ao carregar a página }); - // Animações Suaves ao Rolagem (Smooth Scroll) // Adiciona uma experiência fluida ao rolar para links âncora. - - document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", function (e) { @@ -218,7 +194,6 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - //Minimizar a Re-renderização com requestAnimationFrame let ticking = false; @@ -236,7 +211,6 @@ const optimizeScroll = () => { window.addEventListener("scroll", optimizeScroll); - // Preloader Simples document.addEventListener("DOMContentLoaded", function () { const preloader = document.createElement("div"); @@ -255,7 +229,6 @@ document.addEventListener("DOMContentLoaded", function () { }); }); - // Script para Melhorar Performance (Debounce e Throttle) const debounce = (func, delay) => { @@ -266,9 +239,12 @@ const debounce = (func, delay) => { }; }; -window.addEventListener("resize", debounce(() => { - console.log("Resize otimizado!"); -}, 200)); +window.addEventListener( + "resize", + debounce(() => { + console.log("Resize otimizado!"); + }, 200) +); const throttle = (func, limit) => { let lastFunc; @@ -290,6 +266,9 @@ const throttle = (func, limit) => { }; }; -window.addEventListener("scroll", throttle(() => { - console.log("Scroll otimizado!"); -}, 200)); +window.addEventListener( + "scroll", + throttle(() => { + console.log("Scroll otimizado!"); + }, 200) +); diff --git a/index alterar este.html b/index alterar este.html new file mode 100644 index 0000000..dc017db --- /dev/null +++ b/index alterar este.html @@ -0,0 +1,626 @@ + + + + + + + + + + + Portfolio - Gustavo Lima + + + + + + + + + + + + + +
+ + + +
+
+ +
+
+
+
+
+ + + + +
+ + + +
+
+

Sobre mim

+
+
+

✨ Transformando dados em insights.

+

📚 Atualmente aprendendo serviços avançados do GCP e buscando certificação Fabric.

+

🎯 Metas: Dominar soluções de dados em tempo real e expandir minha expertise em engenharia de dados.

+

🎲 Curiosidade: Amo otimizar consultas SQL complexas!

+

🚀 Engenheiro de Dados | Google Cloud | Oracle SQL | Especialista em Fabric

+
+ +
+

O que eu faço

+
    +
  • +
    + Microsoft Fabric +
    +
    +

    Microsoft Fabric

    +

    O design mais moderno e de alta qualidade feito em nível profissional. +

    +
    +
    • +
  • +
    + Power BI +
    +
    +

    Power BI

    +

    Desenvolvimento de dashboards de alta qualidade em nível profissional. +

    +
    +
    • +
  • +
    + ícone de Python +
    +
    +

    Python

    +

    Desenvolvimento profissional de soluções automatizadas e análise de dados. +

    +
    +
    • +
  • +
    + ícone de Google Cloud +
    +
    +

    Google Cloud

    +

    Implementação de soluções na nuvem com alta qualidade e eficiência.

    +
    +
    • +
+
+ + + + +
+ +
+
+

Resume

+
+
+
+
+ +
+

Education

+
+
    +
  1. +

    University school of the arts

    + 2007 — 2008 +

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque + corrupti, quos dolores et quas molestias exceptur.

    +
    2. +
  2. +

    New york academy of art

    + 2006 — 2007 +

    Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis + voluptas assumenda est omnis..

    +
    3. +
  3. +

    High school of art and design

    + 2002 — 2004 +

    Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut + fugit, sed consequuntur magni dolores eos.

    +
    4. +
+
+
+
+
+ +
+

Experience

+
+
    +
  1. +

    Creative director

    + 2015 — Present +

    Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque + corrupti, quos dolores et qvuas molestias exceptur.

    +
    2. +
  2. +

    Art director

    + 2013 — 2015 +

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque + corrupti, quos dolores et quas molestias exceptur.

    +
    3. +
  3. +

    Web designer

    + 2010 — 2013 +

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque + corrupti, quos dolores et quas molestias exceptur.

    +
    4. +
+
+
+

My skills

+
    +
  • +
    +
    Web design
    + 80% +
    +
    +
    +
    +
    • +
  • +
    +
    Graphic design
    + 70% +
    +
    +
    +
    +
    • +
  • +
    +
    Branding
    + 90% +
    +
    +
    +
    +
    • +
  • +
    +
    WordPress
    + 50% +
    +
    +
    +
    +
    • +
+
+
+ +
+
+

Portfolio

+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+ +
+
+ +
+
+

Blog

+
+
+ +
+
+ +
+
+

Contact

+
+
+
+ +
+
+
+

Contact Form

+
+
+ + +
+ + +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/index copy.html b/index copy.html index d954816..db6cc7a 100644 --- a/index copy.html +++ b/index copy.html @@ -1,691 +1,724 @@ - - - - - vCard - Personal Portfolio - - - - - - - - - - - -
- - - - -
- - + -
-
-

About me

-
-
-

I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media. I enjoy turning complex problems into simple, beautiful and intuitive designs.

-

My job is to build your website so that it is functional and user-friendly but at the same time attractive. Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.

-
- -
-

What i'm doing

-
    -
  • -
    - design icon -
    -
    -

    Web design

    -

    The most modern and high-quality design made at a professional level.

    -
    -
    • -
  • -
    - Web development icon -
    -
    -

    Web development

    -

    High-quality development of sites at the professional level.

    -
    -
    • -
  • -
    - mobile app icon -
    -
    -

    Mobile apps

    -

    Professional development of applications for iOS and Android.

    -
    -
    • -
  • -
    - camera icon -
    -
    -

    Photography

    -

    I make high-quality photos of any category at a professional level.

    -
    -
    • -
-
- -
-

Testimonials

-
    -
  • -
    -
    - Daniel lewis -
    -

    Daniel lewis

    -
    -

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.

    -
    -
    -
    • -
  • -
    -
    - Jessica miller -
    -

    Jessica miller

    -
    -

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.

    -
    -
    -
    • -
  • -
    -
    - Emily evans -
    -

    Emily evans

    -
    -

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.

    -
    +
    +

    Testimonials

    +
      +
    • +
      +
      + Daniel lewis +
      +

      Daniel lewis

      +
      +

      Richard was hired to create a corporate identity. We were very pleased with the work done. She has + a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, + ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels + dolore magnarels alia.

      -
      • -
    • -
      -
      - Henry william -
      -

      Henry william

      -
      -

      Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.

      -
      +
      +
      • +
    • +
      +
      + Jessica miller +
      +

      Jessica miller

      +
      +

      Richard was hired to create a corporate identity. We were very pleased with the work done. She has + a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, + ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels + dolore magnarels alia.

      -
      • -
    -
    - -
    -
    -
    - -
    -
    - Daniel lewis +
    +
    • +
  • +
    +
    + Emily evans
    - quote icon +

    Emily evans

    +
    +

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has + a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, + ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels + dolore magnarels alia.

    +
    -
    -

    Daniel lewis

    - -
    -

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.

    +
    • +
  • +
    +
    + Henry william +
    +

    Henry william

    +
    +

    Richard was hired to create a corporate identity. We were very pleased with the work done. She has + a lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, + ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels + dolore magnarels alia.

    -
-
- -
-

Clients

- +
+
+
+ +
+
+ Daniel lewis +
+ quote icon +
+
+

Daniel lewis

+ +
+

Richard was hired to create a corporate identity. We were very pleased with the work done. She has a + lot of experience and is very concerned about the needs of client. Lorem ipsum dolor sit amet, + ullamcous cididt consectetur adipiscing elit, seds do et eiusmod tempor incididunt ut laborels dolore + magnarels alia.

+
+
- +
+
+

Clients

+ +
+ + -
-
-

Resume

-
-
-
-
- -
-

Education

+
+
+

Resume

+
+
+
+
+
-
    -
  1. -

    University school of the arts

    - 2007 — 2008 -

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.

    -
    2. -
  2. -

    New york academy of art

    - 2006 — 2007 -

    Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est omnis..

    -
    3. -
  3. -

    High school of art and design

    - 2002 — 2004 -

    Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur magni dolores eos.

    -
    4. -
-
-
-
-
- -
-

Experience

+

Education

+
+
    +
  1. +

    University school of the arts

    + 2007 — 2008 +

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque + corrupti, quos dolores et quas molestias exceptur.

    +
    2. +
  2. +

    New york academy of art

    + 2006 — 2007 +

    Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis + voluptas assumenda est omnis..

    +
    3. +
  3. +

    High school of art and design

    + 2002 — 2004 +

    Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut + fugit, sed consequuntur magni dolores eos.

    +
    4. +
+
+
+
+
+
-
    -
  1. -

    Creative director

    - 2015 — Present -

    Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas molestias exceptur.

    -
    2. -
  2. -

    Art director

    - 2013 — 2015 -

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.

    -
    3. -
  3. -

    Web designer

    - 2010 — 2013 -

    Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et quas molestias exceptur.

    -
    4. -
-
-
-

My skills

-
    -
  • -
    -
    Web design
    - 80% -
    -
    -
    -
    -
    • -
  • -
    -
    Graphic design
    - 70% -
    -
    -
    -
    -
    • -
  • -
    -
    Branding
    - 90% -
    -
    -
    -
    -
    • -
  • -
    -
    WordPress
    - 50% -
    -
    -
    -
    -
    • -
-
-
- -
-
-

Portfolio

-
-
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
- - - - - - + + + + \ No newline at end of file