Skip to content

Commit

Permalink
feat: cool animations
Browse files Browse the repository at this point in the history
  • Loading branch information
jamerrq committed Mar 19, 2024
1 parent a139950 commit df851d9
Show file tree
Hide file tree
Showing 10 changed files with 51 additions and 21 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,6 @@ pnpm-debug.log*

# temporal files
tmp.json

# action file (for now)
_studio.yml
4 changes: 3 additions & 1 deletion readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,12 @@ CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo=
- [Nerd Fonts Cheat Sheet (removed)](https://www.nerdfonts.com/cheat-sheet)
- [Tailwind CSS Debug Screens](https://github.com/jorenvanhee/tailwindcss-debug-screens)
- [Typed CSS (removed)](https://typedcss.com/)
- [CSS Peeps (removed)](https://css-peeps.com/)
- [CSS Peeps](https://css-peeps.com/)
- [Tailwind Cheat Sheet](https://tailwindcomponents.com/cheatsheet/)
- [Astro View Transitions](https://docs.astro.build/en/guides/view-transitions/)
- [Astro View Transitions - Lifecycle Events](https://docs.astro.build/en/guides/view-transitions/#lifecycle-events)
- [🦔 AstroCritters](https://github.com/astro-community/AstroCritters)
- [@astrojs/preact](https://docs.astro.build/en/guides/integrations-guide/preact/)
- [Unlighthouse](https://unlighthouse.dev/)
- [Astro Compress](https://github.com/Playform/AstroCompress#readme)
- [Vite Plugin PWA](https://vite-pwa-org.netlify.app/)
35 changes: 22 additions & 13 deletions src/components/badges/open-to-work.astro
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,26 @@ interface Props {
const { lang = 'en' }: Props = Astro.props
---

<span
class='bg-emerald-100 text-emerald-800 text-xs font-bold inline-flex items-center px-2.5 py-0.5 rounded-sm font-merriweather xl:absolute top-1.5 right-1.5 animate-slide-in-top animate-delay-200'
<div
class='flex items-center animate-slide-in-top animate-delay-200 absolute top-1 right-1'
>
<svg viewBox='0 0 512 512' class='w-2.5 h-2.5 me-1.5' fill='currentColor'
><title></title><g data-name='1' id='_1'
><path
d='M291.48,449.94A15,15,0,0,1,278,441.5L207.5,296.57,62.57,226.08a15,15,0,0,1,1-27.41L435.48,49.08A15,15,0,0,1,455,68.6L305.4,440.54A15,15,0,0,1,292,449.93Zm-185.38-236,119.18,58a15,15,0,0,1,6.93,6.93l58,119.18L414,90Z'
></path><path
d='M218.72,300.35a15,15,0,0,1-10.6-25.61L430.47,52.39a15,15,0,1,1,21.21,21.22L229.33,296A15,15,0,0,1,218.72,300.35Z'
></path></g
></svg
>
{lang === 'en' ? 'Open to work' : 'Abierto a ofertas'}
</span>
<span class='relative inline-flex overflow-hidden rounded-full p-[1px]'>
<span
class='absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#51E4B8_0%,#21554E_50%,#51E4B8_100%)]'
></span>
<div
class='inline-flex items-center justify-center w-full px-3 py-1 text-sm text-green-800 bg-green-100 rounded-full cursor-pointer dark:bg-gray-800 dark:text-white/80 backdrop-blur-3xl whitespace-nowrap'
>
<svg viewBox='0 0 512 512' class='w-2.5 h-2.5 me-1.5' fill='currentColor'
><title></title><g data-name='1' id='_1'
><path
d='M291.48,449.94A15,15,0,0,1,278,441.5L207.5,296.57,62.57,226.08a15,15,0,0,1,1-27.41L435.48,49.08A15,15,0,0,1,455,68.6L305.4,440.54A15,15,0,0,1,292,449.93Zm-185.38-236,119.18,58a15,15,0,0,1,6.93,6.93l58,119.18L414,90Z'
></path><path
d='M218.72,300.35a15,15,0,0,1-10.6-25.61L430.47,52.39a15,15,0,1,1,21.21,21.22L229.33,296A15,15,0,0,1,218.72,300.35Z'
></path></g
></svg
>
{lang === 'en' ? 'Open to work' : 'Abierto a ofertas'}
</div>
</span>
</div>
2 changes: 1 addition & 1 deletion src/components/head/seo.astro
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ import { SEO } from 'astro-seo'
sizes='512x512'
href='/img/icons/favicon-512x512.png'
/>
<link rel='shortcut icon' type='image/x-icon' href='/img/icons/favicon.ico' />
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

<!-- Sitemap -->
<meta name='msapplication-config' content='/browserconfig.xml' />
Expand Down
1 change: 1 addition & 0 deletions src/components/main/socials.astro
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
const SOCIALS_STYLES: string = [
'z-10',
'col-span-2',
'row-span-2',
// 'gap-2',
Expand Down
16 changes: 14 additions & 2 deletions src/components/main/title.astro
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ const { lang = 'en' }: Props = Astro.props
---

<div
class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900 dark:text-emerald-300 text-emerald-950 bg-emerald-400 p-2 rounded-sm w-full flex items-center flex-row animate-fade-in-up'
class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900 text-emerald-300 bg-emerald-400 p-2 rounded-sm w-full flex items-center flex-row animate-fade-in-up relative'
>
<div class='flex flex-col animate-fade-in'>
<div class='flex flex-col animate-fade-in z-10'>
<a href={lang !== 'en' ? '/' : 'es'}>
<p class='font-rubik-doodle font-semibold text-2xl xl:text-4xl'>
@jamerrq.dev
Expand All @@ -18,6 +18,18 @@ const { lang = 'en' }: Props = Astro.props
{lang === 'en' ? 'Software Developer' : 'Desarrollador de Software'}
</span>
</div>
<div
class='fixed -z-10 top-0 left-0 origin-top-left w-full flex place-content-center'
>
<canvas id='c' class='grow' style='display: flex; align-items: center;'
><svg
class='grow'
style=''
onload='setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext`2d`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)'
>
</svg></canvas
>
</div>
</div>

<style>
Expand Down
2 changes: 1 addition & 1 deletion src/data/codes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const pwaSeoConfig = `
<link rel="icon" type="image/png" sizes="256x256" href="/img/icons/favicon-256x256.png" />
<!-- 512 -->
<link rel="icon" type="image/png" sizes="512x512" href="/img/icons/favicon-512x512.png" />
<link rel="shortcut icon" type="image/x-icon" href="/img/icons/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<!-- Sitemap -->
<meta name="msapplication-config" content="/browserconfig.xml" />
Expand Down
5 changes: 4 additions & 1 deletion src/layouts/layout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import '@fontsource/rubik-doodle-shadow'
import { ViewTransitions } from 'astro:transitions'
import Background from '@components/main/background.astro'
import SEO from '@components/head/seo.astro'
import { Image } from 'astro:assets'
---

<!doctype html>
Expand Down Expand Up @@ -191,10 +192,12 @@ import SEO from '@components/head/seo.astro'
aria-label='librecounter'
class='fixed bottom-1 right-1 opacity-50 hover:opacity-100 transition-opacity duration-300'
>
<img
<Image
src='https://librecounter.org/counter.svg'
alt='librecounter logo'
width='24'
height='24'
loading='eager'
/>
</a>
</body>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/convert-astro-app-to-pwa.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ how you can include these tags in your `layout.astro` file:
<link rel="icon" type="image/png" sizes="256x256" href="/img/icons/favicon-256x256.png" />
<!-- 512 -->
<link rel="icon" type="image/png" sizes="512x512" href="/img/icons/favicon-512x512.png" />
<link rel="shortcut icon" type="image/x-icon" href="/img/icons/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

<!-- Sitemap -->
<meta name="msapplication-config" content="/browserconfig.xml" />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/es/blog/convertir-astro-app-en-pwa.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ etiquetas en tu archivo `layout.astro`:
sizes="512x512"
href="/img/icons/favicon-512x512.png"
/>
<link rel="shortcut icon" type="image/x-icon" href="/img/icons/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

<!-- Sitemap -->
<meta name="msapplication-config" content="/browserconfig.xml" />
Expand Down

0 comments on commit df851d9

Please sign in to comment.