From a42b0bf7857e0854b9f5310b751113eec5e12cfb Mon Sep 17 00:00:00 2001 From: Tulio Macedo Date: Mon, 8 Jan 2024 06:48:40 -0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20A=20p=C3=A1gina=20/now?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inclusão da página /now em pt-br e en-us --- src/layouts/Layout.astro | 14 ++++++++++ src/pages/en/card.astro | 2 +- src/pages/en/now.astro | 56 ++++++++++++++++++++++++++++++++++++++++ src/pages/now.astro | 56 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 src/pages/en/now.astro create mode 100644 src/pages/now.astro diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 86e7258..52fd6b0 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -78,4 +78,18 @@ body { font-family: inherit; } +.link { + color: hsl(var(--s)); + text-decoration: none; +} + +.link:hover { + cursor: pointer; + background-color: hsl(var(--bc) / 0.1); + --tw-text-opacity: 1; + color: hsl(var(--bc) / var(--tw-text-opacity)); + outline: .3rem solid transparent; + outline-offset: .3rem; +} + diff --git a/src/pages/en/card.astro b/src/pages/en/card.astro index 53f15bb..13e0740 100644 --- a/src/pages/en/card.astro +++ b/src/pages/en/card.astro @@ -9,7 +9,7 @@ import Tulio from '@assets/img/quem/tulio-profile.png' --- - +
diff --git a/src/pages/en/now.astro b/src/pages/en/now.astro new file mode 100644 index 0000000..9051200 --- /dev/null +++ b/src/pages/en/now.astro @@ -0,0 +1,56 @@ +--- +import Layout from '../../layouts/Layout.astro' +import Title from '@components/ui/Title.astro' +import Subtitle from '@components/ui/Subtitle.astro' +--- + +
+
+
+
+ 🇧🇷 + + +
+
+ 🇺🇸 + +
+
+
+ + <Subtitle title='Keepping up with the /now page movement.' /> + <div class="flex flex-col flex-wrap gap-4 items-strech"> + <h3 class="text-3xl">The movement</h3> + <p class="text-base md:text-xl mb-4">I accidentally found a page on the internet from the person who started the movement (<a class="link" href="https://sive.rs/nowff" target="_blank">Derek Sivers</a>) explaining that he created a page to say what he is doing at the moment, as many people asked that.</p> + <p class="text-base md:text-xl mb-4">A friend also made a similar page and he tweeted about it and within a few hours several people decided to adopt the practice, so he created a website, <a class="link" href="http://nownownow.com/" target="_blank">nownownow</a>, to showcase people's /now pages. This is mine!</p> + + <hr class="border border-secondary bg-secondary rounded-2xl py-1 my-2"> + + <h3 class="text-3xl mb-3">What I am doing</h3> + <h4 class="text-2xl mb-1">Studying Wordpress themes</h4> + <p class="text-base md:text-xl mb-4">At the moment I'm using it at work to design a new interface to replace the CMS we currently use and this will require a lot of knowledge to implement.</p> + <h4 class="text-2xl mb-1">Studying Astro and VueJS</h4> + <p class="text-base md:text-xl mb-4">I already use VueJS at work and in personal projects, which suits me very well, but I needed an alternative for some cases and after looking around a bit I ended up deciding on Astro, which is the tool I used to build this page.</p> + <h4 class="text-2xl mb-1">Creating a new page to use as a professional profile</h4> + <p class="text-base md:text-xl mb-4">Although this page could serve this purpose, I believe that one where I can put my portfolio would be more appropriate.</p> + </div> + </div> +</Layout> + +<style> +.toggle-language { + display: flex; + flex-direction: column; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.active { + height: 0.25rem; + width: 100%; + border-radius: 0.75rem; + --tw-text-opacity: 1; + background-color: hsl(var(--p) / var(--tw-text-opacity));; +} +</style> diff --git a/src/pages/now.astro b/src/pages/now.astro new file mode 100644 index 0000000..1c4c370 --- /dev/null +++ b/src/pages/now.astro @@ -0,0 +1,56 @@ +--- +import Layout from '../layouts/Layout.astro' +import Title from '@components/ui/Title.astro' +import Subtitle from '@components/ui/Subtitle.astro' +--- +<Layout title='Página do Teseu - Now'> + <div class="flex flex-col px-8 py-4 md:px-36 xl:px-[14rem] min-h-[calc(100vh-13rem)]"> + <div class="flex justify-end w-full"> + <div class="flex justify-center gap-8 text-5xl mb-8 w-full md:w-max transition-all duration-300"> + <div class="toggle-language"> + 🇧🇷 + <span id="ptbr" class="active"></span> + </div> + <div class="toggle-language"> + <a href="/en/now"> 🇺🇸 + <span id="en"></span> + </a> + </div> + </div> + </div> + <Title title='O que estou aprontando' /> + <Subtitle title='Acompanhando o movimento /now page (a página agora).' /> + <div class="flex flex-col flex-wrap gap-4 items-strech"> + <h3 class="text-3xl">O movimento</h3> + <p class="text-base md:text-xl mb-4">Encontrei por acaso na net uma página da pessoa que iniciou o movimento (<a class="link" href="https://sive.rs/nowff" target="_blank">Derek Sivers</a>) explicando que fez uma página para dizer o que está fazendoxl momento, já que muitas pessoas perguntavam isso.</p> + <p class="text-base md:text-xl mb-4">Um amigo também fez uma página semelhante e ele tuitou sobre isso e em poucas horas várias pessoas resolveram adotar a prática, assim ele criou um site, o <a class="link" href="http://nownownow.com/" target="_blank">nownownow</a>, para apresentar as páginas /now das pessoas. Essa é a minha!</p> + + <hr class="border border-secondary bg-secondary rounded-2xl py-1 my-2"> + + <h3 class="text-3xl mb-3">O que estou fazendo</h3> + <h4 class="text-2xl mb-1">Estudando temas do Wordpress</h4> + <p class="text-base md:text-xl mb-4">No momento estou usando no trabalho para desenhar uma nova interface para substituir o CMS que usamos atualmente e isso vai exigir bastante conhecimento para implementar.</p> + <h4 class="text-2xl mb-1">Estudando Astro e VueJS</h4> + <p class="text-base md:text-xl mb-4">Já uso VueJS no trabalho e em projetos pessoais, o que me serve muito bem, mas estava precisando de uma alternativa para alguns casos e depois de procurar um pouco acabei decidindo pelo Astro, que é a ferramenta que usei para construir essa página.</p> + <h4 class="text-2xl mb-1">Criando uma nova página para usar como perfil profissional</h4> + <p class="text-base md:text-xl mb-4">Apesar dessa página poder servir a esse propósito, acredito que uma em que eu coloque meu portfólio seria mais adequada.</p> + </div> + </div> +</Layout> + +<style> +.toggle-language { + display: flex; + flex-direction: column; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 300ms; +} +.active { + height: 0.25rem; + width: 100%; + border-radius: 0.75rem; + --tw-text-opacity: 1; + background-color: hsl(var(--p) / var(--tw-text-opacity));; +} +</style>