Skip to content

Commit

Permalink
feat: afor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamerrq
jamerrq committed Apr 20, 2024
1 parent 9525749 commit 99e56a2
Show file tree
Hide file tree
Showing 44 changed files with 662 additions and 281 deletions.
14 changes: 5 additions & 9 deletions astro.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,11 @@ export default defineConfig({
workbox: {
globDirectory: 'dist/client',
globPatterns: [
'**/*.{woff2}',
'img/working_on/*.webp',
'pizarra.webp',
'img/this_is_fine.webp',
'movies/bitwise_liminal_compressed_240p.webm',
'_astro/*.module.*.js',
'_astro/client.*.js',
'_astro/hoisted.*.js',
'_astro/*icons.*.js'
// '**/*.{woff2}',
// '_astro/*.module.*.js',
// '_astro/client.*.js',
// '_astro/hoisted.*.js',
// '_astro/*icons.*.js'
],
// Don't fallback on document based (e.g. `/some-page`) requests
// This removes an errant console.log message from showing up.
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@
},
"type": "module",
"devDependencies": {
"@fontsource/calistoga": "^5.0.19",
"@fontsource/fira-sans": "^5.0.19",
"@midudev/tailwind-animations": "^0.0.7",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
Expand Down
Binary file added public/img/desktop.webp
View file
Binary file not shown.
Binary file added public/songs/strad.mp3
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions src/components/blog/blog-about.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ const ABOUT_STYLES = [
'bg-slate-300/70',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-sm',
'rounded-[10px]',
'flex',
'items-center',
'justify-center',
'font-bold',
'text-black',
'font-rubik-doodle',
'font-primary',
'w-full',
'xl:h-full',
'transition-all',
Expand Down
18 changes: 11 additions & 7 deletions src/components/blog/last-entries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ const LAST_ENTRIES_STYLES = [
'bg-slate-300/80',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-sm',
'rounded-[10px]',
'flex',
'flex-col',
'p-2',
'font-bold',
'font-rubik-doodle',
'font-primary',
'w-full',
'h-full',
'transition-all',
Expand All @@ -19,7 +19,8 @@ const LAST_ENTRIES_STYLES = [
'text-slate-900',
'dark:text-slate-300',
'py-4',
'px-2'
'px-2',
'min-h-[25rem]'
].join(' ')

import { entries } from '@data/blog.json'
Expand Down Expand Up @@ -85,7 +86,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
<h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-4xl text-center'>
- {lang === 'en' ? 'Last Entries' : 'Últimas Entradas'} -
</h1>
<ul class='xl:grid xl:grid-cols-[1fr_5fr] flex flex-col gap-5 w-full h-full p-2'>
<ul class='flex flex-col gap-5 w-full h-full p-2'>
{entries
.filter(
(entry) => entry.active !== 'false' && entry.date !== 'Coming soon'
Expand All @@ -100,12 +101,12 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
.map((entry, index) => {
return (
<Fragment key={index}>
<li class='font-averia uppercase text-sm xl:text-base text-center rounded-sm xl:h-full dark:text-emerald-100 text-emerald-950 items-center flex w-full'>
{/* <li class='font-secondary uppercase text-sm xl:text-base text-center rounded-[10px] xl:h-full dark:text-emerald-100 text-emerald-950 items-center flex w-full'>
<span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded'>
{entry.date}
</span>
</li>
<li class='font-averia uppercase text-sm xl:text-base py-2 px-2 rounded-sm cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
</li> */}
<li class='font-secondary uppercase text-sm xl:text-base py-2 px-2 rounded-[10px] cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
<a
href={`${lang === 'en' ? entry.href : entry.hrefEs}`}
class='h-full'
Expand All @@ -121,6 +122,9 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
</div>
<Badges badges={entry.tags} />
</a>
<span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded'>
{entry.date}
</span>
</li>
</Fragment>
)
Expand Down
2 changes: 1 addition & 1 deletion src/components/boxes/box.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const { props }: { props: Props } = Astro

<article
data-animated={props.animated}
class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
class=`bg-slate-400/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
>
<slot />
</article>
3 changes: 2 additions & 1 deletion src/components/boxes/hbox.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const { href, title } = props
href={href}
title={title}
data-animated={props.animated}
class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
id='card'
class=`card bg-slate-400/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary w-full h-full text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
>
<slot />
</a>
4 changes: 2 additions & 2 deletions src/components/featured-and-projects/about.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ const ABOUT_STYLES = [
'bg-slate-300/70',
'dark:bg-slate-900/90',
'dark:text-slate-300',
'rounded-sm',
'rounded-[10px]',
'flex',
'items-center',
'justify-center',
'font-bold',
'text-black',
'font-rubik-doodle',
'font-primary',
'w-full',
'xl:h-full',
'transition-all',
Expand Down
19 changes: 19 additions & 0 deletions src/components/featured-and-projects/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,3 +261,22 @@ export function DiscordColorLogo() {
</svg>
)
}

export function SimpleLeft({ extraClasses = '' }: { extraClasses?: string }) {
return (
<svg
viewBox='0 0 512 512'
xmlns='http://www.w3.org/2000/svg'
class={`w-4 h-4 ${extraClasses}`}
>
<title />
<g data-name='1' id='_1'>
<path d='M353,450a15,15,0,0,1-10.61-4.39L157.5,260.71a15,15,0,0,1,0-21.21L342.39,54.6a15,15,0,1,1,21.22,21.21L189.32,250.1,363.61,424.39A15,15,0,0,1,353,450Z' />
</g>
</svg>
)
}

export function SimpleRight() {
return <SimpleLeft extraClasses='rotate-180' />
}
123 changes: 60 additions & 63 deletions src/components/featured-and-projects/projects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ const PROJECT_STYLES: string = [
'col-span-6',
'row-span-4',
'bg-emerald-300/80',
'rounded-sm',
'rounded-[10px]',
'flex',
'xl:flex-row ',
'gap-3',
'items-center',
'justify-center',
'font-bold',
'font-rubik-doodle',
'font-primary',
'w-full',
'h-72',
'xl:h-full',
Expand All @@ -48,7 +48,7 @@ type ResourcesProps = {
lang?: string
}

import { DoubleLeft, DoubleRight } from './icons'
// import { SimpleLeft, SimpleRight } from './icons'

import simpleIcons, { type toExportType } from '@components/icons/simple-icon'

Expand All @@ -64,7 +64,7 @@ function SimpleIcon(key: string) {
return (
<div className='flex flex-col items-center gap-1 mx-2'>
<Icon />
<span className='text-xs font-averia font-bold lowercase'>
<span className='text-xs font-secondary font-bold lowercase'>
{key.split(' ').at(0)}
</span>
</div>
Expand All @@ -73,15 +73,16 @@ function SimpleIcon(key: string) {
return h('fragment', {})
}

const BUTTONS_STYLES = [
'absolute',
'bg-cyan-300',
'rounded-md',
'hidden xl:flex',
'items-center',
'p-1',
'shadow-md shadow-black/90'
].join(' ')
// const BUTTONS_STYLES = [
// 'absolute',
// 'bg-cyan-300',
// 'rounded-full',
// 'hidden xl:flex',
// 'items-center',
// 'px-2',
// 'py-1',
// 'shadow-md shadow-black/90'
// ].join(' ')

function IndexPicker({ n, reference }: { n: number; reference: any }) {
function goToIndex(i: number) {
Expand Down Expand Up @@ -124,60 +125,58 @@ function ImageCarousel({ images }: { images: string[] }) {
)
}

const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
<div className={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
<button onClick={_f} title={'iterate over'}>
<DoubleLeft />
</button>
</div>
)
// const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
// <div className={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
// <button onClick={_f} title={'iterate over'}>
// <SimpleLeft />
// </button>
// </div>
// )

const DoubleRightButton = ({ _f }: { _f: () => void }) => (
<div className={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
<button onClick={_f} title={'iterate over'}>
<DoubleRight />
</button>
</div>
)
// const DoubleRightButton = ({ _f }: { _f: () => void }) => (
// <div className={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
// <button onClick={_f} title={'iterate over'}>
// <SimpleRight />
// </button>
// </div>
// )

function ResourceCard({
project,
lang,
i,
n
i
}: {
project: (typeof data)[number] | undefined
lang: string
i: number
n: number
}) {
const goRight = () => {
index.value++
if (index.value > data.length - 1) index.value = 0
// insert the 'xl:animate-fade-in-left' class
const el = document.querySelector('#project-card')
el?.classList.add('xl:animate-fade-in-left')
el?.addEventListener('animationend', () => {
el?.classList.remove('xl:animate-fade-in-left')
})
imagesIndex.value = 0
cooldown.value = COOLDOWN_TIME
}
const goLeft = () => {
index.value--
if (index.value < 0) index.value = data.length - 1
// insert the 'xl:animate-fade-in-left' class
const el = document.querySelector('#project-card')
el?.classList.add('xl:animate-fade-in-left')
el?.addEventListener('animationend', () => {
el?.classList.remove('xl:animate-fade-in-left')
})
imagesIndex.value = 0
cooldown.value = COOLDOWN_TIME
}
// const goRight = () => {
// index.value++
// if (index.value > data.length - 1) index.value = 0
// // insert the 'xl:animate-fade-in-left' class
// const el = document.querySelector('#project-card')
// el?.classList.add('xl:animate-fade-in-left')
// el?.addEventListener('animationend', () => {
// el?.classList.remove('xl:animate-fade-in-left')
// })
// imagesIndex.value = 0
// cooldown.value = COOLDOWN_TIME
// }
// const goLeft = () => {
// index.value--
// if (index.value < 0) index.value = data.length - 1
// // insert the 'xl:animate-fade-in-left' class
// const el = document.querySelector('#project-card')
// el?.classList.add('xl:animate-fade-in-left')
// el?.addEventListener('animationend', () => {
// el?.classList.remove('xl:animate-fade-in-left')
// })
// imagesIndex.value = 0
// cooldown.value = COOLDOWN_TIME
// }
return (
<article className={PROJECT_STYLES} key={i} id='project-card'>
{i === 0 && <DoubleLeftButton _f={goLeft} />}
{/* {i === 0 && <DoubleLeftButton _f={goLeft} />} */}
<div className='lg:w-1/2 xl:w-1/2 h-full grid place-content-center justify-items-center gap-4'>
<div
className='absolute top-2 left-2'
Expand All @@ -194,10 +193,10 @@ function ResourceCard({
{lang === 'es' ? 'Destacado' : 'Featured'}
</span>
)}
<p className='font-bold font-averia dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
<p className='font-bold font-secondary dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
{project?.description[lang as 'es' | 'en']}
</p>
<ul className='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-sm flex-wrap'>
<ul className='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-[10px] flex-wrap'>
{project?.stack?.map((tech, index) => (
<li key={index}>{SimpleIcon(tech)}</li>
))}
Expand All @@ -206,7 +205,7 @@ function ResourceCard({
{project?.repository && (
<a
href={project.repository}
className='border-b-2 font-averia text-sm xl:text-base'
className='border-b-2 font-secondary text-sm xl:text-base'
target='_blank'
rel='noopener noreferrer'
>
Expand All @@ -216,7 +215,7 @@ function ResourceCard({
{project?.demo && (
<a
href={project.demo}
className='border-b-2 font-averia text-sm xl:text-base'
className='border-b-2 font-secondary text-sm xl:text-base'
target='_blank'
rel='noopener noreferrer'
>
Expand All @@ -231,7 +230,7 @@ function ResourceCard({
{project?.images && <ImageCarousel images={project.images} />}
</div>
)}
{i === n - 1 && <DoubleRightButton _f={goRight} />}
{/* {i === n - 1 && <DoubleRightButton _f={goRight} />} */}
<IndexPicker n={concatedData.length} reference={index} />
</article>
)
Expand Down Expand Up @@ -300,9 +299,7 @@ export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
<>
{Array.from(Array(n).keys()).map((i) => {
const project = concatedData.at((i + index.value) % data.length)
return (
<ResourceCard project={project} lang={lang} i={i} n={n} key={i} />
)
return <ResourceCard project={project} lang={lang} i={i} key={i} />
})}
</>
)
Expand Down
Loading

0 comments on commit 99e56a2

Please sign in to comment.