Skip to content

Commit

Permalink
🔧🎨 fix: mobile views
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamerrq
jamerrq committed Jan 31, 2024
1 parent 26345c4 commit 00b275c
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 18 deletions.
4 changes: 2 additions & 2 deletions src/components/main/about-me-card.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ABOUT_ME_STYLES = [
'flex-col',
'text-base',
'p-2',
'relative'
'relative',
].join(' ')
---

Expand All @@ -40,7 +40,7 @@ const ABOUT_ME_STYLES = [
<div
class='flex items-center p-3 justify-around w-full font-merriweather xl:text-base text-sm relative'
>
<ul class='w-full text-center list-disc p-2'>
<ul class='w-full text-center list-disc p-2 gap-2 flex flex-col'>
<li>
<p class='text-balance'>
{
Expand Down
1 change: 1 addition & 0 deletions src/components/main/footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { siAstro, siPreact, siTailwindcss, siMarkdown } from 'simple-icons'
bottom: 0;
left: 0;
width: 100%;
max-width: 100dvw;
height: fit-content;
padding: 0.2rem;
padding-top: 0.5rem;
Expand Down
2 changes: 1 addition & 1 deletion src/components/main/socials.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ const { lang }: Props = Astro.props
</header>
<div class='flex h-fit w-full items-center justify-center gap-2'>
<span
class='font-merriweather font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-300 p-2 rounded-sm border-2 border-slate-900'
class='font-merriweather font-bold text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-300 p-2 rounded border-2 border-slate-900'
>
[email protected]
</span>
Expand Down
6 changes: 3 additions & 3 deletions src/components/main/working-on.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import {
} from 'simple-icons'
// {ICONS_STYLES}
const ICONS_STYLES = ['w-4', 'h-4', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
const ICONS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
' '
)
Expand All @@ -59,7 +59,7 @@ const { lang = 'en' }: Props = Astro.props

<article class={EXPERIENCE_STYLES} title="Projects I'm working on">
<div
class='text-xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
class='text-2xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
>
<p>
<!-- Working on -->
Expand Down Expand Up @@ -164,7 +164,7 @@ const { lang = 'en' }: Props = Astro.props
title='PostgreSQL'
>
<svg
class='w-3 xl:w-5 h-3 xl:h-6 hover:scale-110'
class='w-4 xl:w-5 h-4 xl:h-6 hover:scale-110'
set:html={siPostgresql.svg}
fill={`#${siPostgresql.hex}`}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/blog-layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import Buttons from '@components/main/buttons.astro'

<Layout title={frontmatter.title}>
<main
class='dark:bg-[#1b383c] bg-[#9DBC98] min-h-[95dvh] mx-auto p-4 dark:text-emerald-50 [&>*]:text-balance'
class='dark:bg-[#1b383c] bg-[#9DBC98] min-h-[95dvh] max-w-[95dvw] mx-auto p-4 dark:text-emerald-50 [&>*]:text-balance'
>
<div class='sticky top-2'>
<Buttons href={frontmatter.hrefLang} />
Expand Down
8 changes: 5 additions & 3 deletions src/pages/blog/building-this-website.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,12 +340,14 @@ In resume, I decided to include the following sections:
On January 5th, when I had only been developing this site for about 4 short
days, I was able to participate in a live portfolio review by <a
href="https://moure.dev/" target="_blank" rel="noopener noreferrer"
title="MoureDev">MoureDev</a>. In this review several portfolios were analyzed
title="MoureDev">MoureDev</a>. He is an important voice in the Spanish-speaking developer community and has
been cataloged by Microsoft and GitHub as one of the most influential developers
with categories such as `Most Valuable Professional (Microsoft)` and `GitHub Star`. In this review several portfolios were analyzed
and tips were given to improve them. In my case, I think the review was very
positive and it helped me a lot to improve the design and structure of the site.
Below is the video of the review in case anyone wants to see it.

<iframe width="560" height="315" src="https://www.youtube.com/embed/zFbTXe1yFGA?si=QFmUL3GfvU1C69aK&amp;start=818" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe class="xl:w-[560px] xl:h-[315px] self-center xl:m-2" src="https://www.youtube.com/embed/zFbTXe1yFGA?si=QFmUL3GfvU1C69aK&amp;start=818" title="YouTube video player" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## Removals

Expand Down Expand Up @@ -399,7 +401,7 @@ final result is what can be seen on the site currently. Although there are
always things that can be improved, I am very happy with the final result,
because I think it meets all the goals I had set for myself at the beginning.

![Lighthouse Preview Report](../../../lib/lighthouse/preview-report.png)
![Lighthouse Preview Report](https://raw.githubusercontent.com/jamerrq/jamerrq.dev/26345c40eb52575aaed3d94b593af4d93fe9cec5/lib/lighthouse/preview-report.png)

## Conclusion

Expand Down
12 changes: 4 additions & 8 deletions src/pages/es/blog/acerca-de-esta-web.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ información.

<a href="https://fontsource.org/" target="_blank" rel="noopener
noreferrer" title="Fontsource">Fontsource</a> es una colección de fuentes de código abierto que se
empaquetan en paquetes NPM individuales para autohospedaje en tus aplicaciones
empaquetan en paquetes NPM individuales para auto hospedaje en tus aplicaciones
web. Revisa la <a
href="https://fontsource.org/docs/getting-started/introduction" target="_blank"
rel="noopener noreferrer" title="Fontsource docs">documentación de Fontsource</a> para más información
Expand Down Expand Up @@ -285,19 +285,15 @@ El 5 de enero, cuando apenas llevaba unos 4 escasos días con el desarrollo de
este sitio, pude participar en una revisión en vivo de portafolios por parte de
<a
href="https://moure.dev/" target="_blank" rel="noopener noreferrer"
title="MoureDev">MoureDev</a>. En esta revisión se analizaron varios portafolios y se dieron
consejos para mejorarlos. En mi caso, creo que la revisión fue muy positiva y
me sirvió mucho para mejorar el diseño y la estructura del sitio. A continuación
dejo el video de la revisión por si alguien quiere verla.
title="MoureDev">MoureDev</a>. Él es una voz importante en la comunidad de desarrolladores de habla hispana y ha sido catalogado por Microsoft y GitHub como uno de los desarrolladores más influyentes con categorías como `Most Valuable Professional (Microsoft)` y `GitHub Star`. En esta revisión se analizaron varios portafolios y se dieron consejos para mejorarlos. En mi caso, creo que la revisión fue muy positiva y me ayudó mucho a mejorar el diseño y la estructura del sitio. A continuación se muestra el video de la revisión por si alguien quiere verlo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/zFbTXe1yFGA?si=QFmUL3GfvU1C69aK&amp;start=818" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<iframe class="xl:w-[560px] xl:h-[315px] self-center xl:m-2" src="https://www.youtube.com/embed/zFbTXe1yFGA?si=QFmUL3GfvU1C69aK&amp;start=818" title="YouTube video player" frameborder="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## Cosas que quedaron afuera

No todo lo que se me ocurrió incluir en el sitio terminó siendo incluido. Acá
un resumen de las cosas que decidí no incluir y porque.


### Fira Code Nerd Font

Fira Code Nerd Font es una fuente que incluye iconos de programación. De hecho es mi fuente favorita para programar. La idea
Expand Down Expand Up @@ -342,7 +338,7 @@ siempre hay cosas que se pueden mejorar, estoy muy contento con el resultado
final, ya que creo que cumple con todos los objetivos que me había propuesto
al principio.

![Lighthouse Preview Report](../../../../lib/lighthouse/preview-report.png)
![Lighthouse Preview Report](https://raw.githubusercontent.com/jamerrq/jamerrq.dev/26345c40eb52575aaed3d94b593af4d93fe9cec5/lib/lighthouse/preview-report.png)

## Conclusiones

Expand Down

0 comments on commit 00b275c

Please sign in to comment.