diff --git a/content/contact.html b/content/contact.html index a7d4feb..0873371 100644 --- a/content/contact.html +++ b/content/contact.html @@ -4,7 +4,7 @@ type: page --- -
+
@@ -17,5 +17,17 @@
- -
\ No newline at end of file + + + + + + \ No newline at end of file diff --git a/themes/bruno/assets/css/style.css b/themes/bruno/assets/css/style.css index 1eacf58..177cf20 100644 --- a/themes/bruno/assets/css/style.css +++ b/themes/bruno/assets/css/style.css @@ -35,17 +35,120 @@ nav { } .menu { - display: none; -} -.menu-open{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(243, 243, 242, 0); /* Start with transparent background */ + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; + z-index: 1000; display: flex; - gap: 10px; flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + pointer-events: none; /* Prevent interaction when hidden */ +} + +.menu-open { + opacity: 1; + visibility: visible; + background-color: rgba(243, 243, 242, 1); /* Fully opaque when open */ + pointer-events: auto; /* Allow interaction when visible */ +} + +.menu a { + font-size: 24px; text-decoration: none; - background-color: white; - padding: 10%; - width: 100%; - height: 100%; + color: #aaa; + transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; + opacity: 0; + transform: translateY(20px); +} + +.menu a.active { + color: #444; +} + +.menu-open a { + opacity: 1; + transform: translateY(0); + transition: color 0.3s ease, opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s; +} + +.menu-close { + position: absolute; + top: 20px; + right: 20px; + font-size: 24px; + cursor: pointer; + border: none; + background: none; + opacity: 0; + transition: opacity 0.3s ease; +} + +.menu-open .menu-close { + opacity: 1; +} + +/* Stagger the animation for menu items */ +.menu a:nth-child(1) { transition-delay: 0.1s; } +.menu a:nth-child(2) { transition-delay: 0.2s; } +.menu a:nth-child(3) { transition-delay: 0.3s; } +/* Add more if you have more menu items */ + +/* Ensure menu is hidden on larger screens if needed */ +@media (min-width: 769px) { + .menu { + position: static; + opacity: 1; + visibility: visible; + background-color: transparent; + pointer-events: auto; + flex-direction: row; + justify-content: center; /* Center the menu items */ + height: auto; + margin-top: 10px; + } + + .menu a { + margin: 0 10px; + text-decoration: none; + color: #666; + font-weight: 300; + text-transform: none; + font-size: 40px; + padding-left: 40px; + opacity: 1; + transform: translateY(0); + transition: none; + } + + .menu-toggle, .menu-close { + display: none; + } + + header { + margin-left: auto; + margin-right: auto; + padding-bottom: 40px; + padding-top: 70px; + } + + nav { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .logo { + margin-bottom: 125px; + } } .menu-toggle { @@ -60,9 +163,9 @@ nav { .menu-toggle .bar { width: 25px; - height: 3px; + height: 2px; background-color: #333; - margin: 3px 0; + margin: 2px 0; } .all-works{ padding-top: 25px; @@ -307,7 +410,11 @@ button[type="submit"]:hover { padding-bottom: 16px; } - +@media (min-width: 262px){ + .logo { + white-space: nowrap; + } +} @media (min-width: 541px) { .logo{ font-size: 33px; @@ -349,7 +456,7 @@ button[type="submit"]:hover { @media (min-width: 769px) { .menu { display: flex; - margin-top: 10px; + margin-top: 30px; } .menu a { margin: 0 10px; @@ -369,7 +476,9 @@ button[type="submit"]:hover { .menu-toggle { display: none; } - + .menu-close{ + display: none; + } nav { display: flex; flex-direction: column; @@ -488,3 +597,87 @@ button[type="submit"]:hover { } } +/* Add these new styles for the video container */ +.video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + height: 0; + overflow: hidden; + max-width: 100%; + margin-bottom: 20px; /* Add some space below the video */ +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +/* Adjust the existing styles for project-details video */ +.project-details video { + width: 100%; + max-width: 100%; + height: auto; + padding-bottom: 20px; +} + + +#submitButton { + position: relative; + transition: background-color 0.3s; +} + +#submitButton .button-text { + transition: opacity 0.3s; +} + +#submitButton .loading-svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; + animation: spin 1s linear infinite; +} + +#submitButton.loading .button-text { + opacity: 0; +} + +#submitButton.loading .loading-svg { + display: block; +} + +@keyframes spin { + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } +} + +#thankYouMessage { + text-align: center; + padding: 20px; + background-color: #f0f0f0; + border-radius: 5px; + margin-top: 20px; +} + +#submitButton .loading-svg circle { + stroke-dasharray: 60; + stroke-dashoffset: 60; + animation: circle-animation 1.5s cubic-bezier(0.78, 0.13, 0.15, 0.86) infinite; +} + +@keyframes circle-animation { + 0% { + stroke-dashoffset: 60; + } + 50% { + stroke-dashoffset: 0; + } + 100% { + stroke-dashoffset: -60; + } +} + diff --git a/themes/bruno/assets/js/app.js b/themes/bruno/assets/js/app.js index 99b2359..618bb59 100644 --- a/themes/bruno/assets/js/app.js +++ b/themes/bruno/assets/js/app.js @@ -1,9 +1,12 @@ -document.addEventListener("DOMContentLoaded", function() { - new VenoBox({ - selector: ".open-modal", - bgcolor: '#ffffff', - overlayColor: 'rgba(255, 255, 255, 0.85)', - maxWidth: '85%', - toolsColor: '#d2d2d2', - }); +// hamburger mobile menu +let menuToggle = document.querySelector('.menu-toggle'); +let menu = document.querySelector('.menu'); + +menuToggle.addEventListener('click', () => { + menu.classList.toggle('menu-open'); +}) + +let menuClose = document.querySelector('.menu-close'); +menuClose.addEventListener('click', () => { + menu.classList.remove('menu-open'); }) \ No newline at end of file diff --git a/themes/bruno/assets/js/contact-form.js b/themes/bruno/assets/js/contact-form.js index 237f621..7eceb89 100644 --- a/themes/bruno/assets/js/contact-form.js +++ b/themes/bruno/assets/js/contact-form.js @@ -1,17 +1,31 @@ (function() { - // Inicialize o EmailJS com sua chave pública emailjs.init("l3aDxyNn-8gbF6W4Y"); - document.getElementById('contactForm').addEventListener('submit', function(event) { + const form = document.getElementById('contactForm'); + const submitButton = document.getElementById('submitButton'); + const thankYouMessage = document.getElementById('thankYouMessage'); + + form.addEventListener('submit', function(event) { event.preventDefault(); + // Disable the submit button and show loading + submitButton.disabled = true; + submitButton.classList.add('loading'); + emailjs.sendForm('service_8zgyk4l', 'template_kvshg7o', this) .then(function() { console.log('SUCCESS!'); - alert('Mensagem enviada com sucesso!'); + // Hide the form and show the thank you message + form.style.display = 'none'; + thankYouMessage.style.display = 'block'; }, function(error) { console.log('FAILED...', error); - alert('Falha ao enviar a mensagem. Por favor, tente novamente.'); + alert('Failed to send the message. Please try again.'); + }) + .finally(function() { + // Re-enable the submit button and hide loading + submitButton.disabled = false; + submitButton.classList.remove('loading'); }); }); })(); \ No newline at end of file diff --git a/themes/bruno/assets/js/portfolio.js b/themes/bruno/assets/js/portfolio.js new file mode 100644 index 0000000..99b2359 --- /dev/null +++ b/themes/bruno/assets/js/portfolio.js @@ -0,0 +1,9 @@ +document.addEventListener("DOMContentLoaded", function() { + new VenoBox({ + selector: ".open-modal", + bgcolor: '#ffffff', + overlayColor: 'rgba(255, 255, 255, 0.85)', + maxWidth: '85%', + toolsColor: '#d2d2d2', + }); +}) \ No newline at end of file diff --git a/themes/bruno/layouts/_default/home.html b/themes/bruno/layouts/_default/home.html index 3ae4f5e..fa2eb3e 100644 --- a/themes/bruno/layouts/_default/home.html +++ b/themes/bruno/layouts/_default/home.html @@ -3,8 +3,8 @@
{{ $works := .Site.GetPage "/works" }} - - {{ range $works.Pages }} + + {{ range sort $works.Pages ".Params.year" "desc" }}
diff --git a/themes/bruno/layouts/partials/footer/js.html b/themes/bruno/layouts/partials/footer/js.html index e6498a9..ca1e676 100644 --- a/themes/bruno/layouts/partials/footer/js.html +++ b/themes/bruno/layouts/partials/footer/js.html @@ -1,33 +1,46 @@ +{{- with resources.Get "js/app.js" }} +{{- if eq hugo.Environment "development" }} +{{- with . | js.Build }} + +{{- end }} +{{- else }} +{{- $opts := dict "minify" true }} +{{- with . | js.Build $opts | fingerprint }} + +{{- end }} +{{- end }} +{{- end }} + {{ if eq .Type "works" }} - + - {{- with resources.Get "js/app.js" }} - {{- if eq hugo.Environment "development" }} - {{- with . | js.Build }} - - {{- end }} - {{- else }} - {{- $opts := dict "minify" true }} - {{- with . | js.Build $opts | fingerprint }} - - {{- end }} - {{- end }} - {{- end }} +{{- with resources.Get "js/portfolio.js" }} +{{- if eq hugo.Environment "development" }} +{{- with . | js.Build }} + +{{- end }} +{{- else }} +{{- $opts := dict "minify" true }} +{{- with . | js.Build $opts | fingerprint }} + +{{- end }} +{{- end }} +{{- end }} {{- end }} {{ if or (eq .Type "contact") (eq .Layout "contact") (eq .Title "Contact") }} - + - {{- with resources.Get "js/contact-form.js" }} - {{- if eq hugo.Environment "development" }} - {{- with . | js.Build }} - - {{- end }} - {{- else }} - {{- $opts := dict "minify" true }} - {{- with . | js.Build $opts | fingerprint }} - - {{- end }} - {{- end }} - {{- end }} +{{- with resources.Get "js/contact-form.js" }} +{{- if eq hugo.Environment "development" }} +{{- with . | js.Build }} + +{{- end }} +{{- else }} +{{- $opts := dict "minify" true }} +{{- with . | js.Build $opts | fingerprint }} + +{{- end }} +{{- end }} +{{- end }} {{- end }} \ No newline at end of file diff --git a/themes/bruno/layouts/partials/menu.html b/themes/bruno/layouts/partials/menu.html index edf783d..5887977 100644 --- a/themes/bruno/layouts/partials/menu.html +++ b/themes/bruno/layouts/partials/menu.html @@ -11,35 +11,34 @@ {{- $menuID := .menuID }} {{- with index site.Menus $menuID }} -
- {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} -
+
+ {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} + + +
{{- end }} {{- define "partials/inline/menu/walk.html" }} - {{- $page := .page }} - {{- range .menuEntries }} - {{- $attrs := dict "href" .URL }} - {{- if $page.IsMenuCurrent .Menu . }} - {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} - {{- else if $page.HasMenuCurrent .Menu .}} - {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} - {{- end }} - {{- $name := .Name }} - {{- with .Identifier }} - {{- with T . }} - {{- $name = . }} - {{- end }} - {{- end }} - {{ $name }} - {{- with .Children }} - {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} - {{- end }} - {{- end }} +{{- $page := .page }} +{{- range .menuEntries }} +{{- $attrs := dict "href" .URL }} +{{- if $page.IsMenuCurrent .Menu . }} +{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} +{{- else if $page.HasMenuCurrent .Menu .}} +{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} +{{- end }} +{{- $name := .Name }} +{{- with .Identifier }} +{{- with T . }} +{{- $name = . }} +{{- end }} +{{- end }} +{{ + $name }} +{{- with .Children }} +{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} +{{- end }} {{- end }} +{{- end }} \ No newline at end of file