From b34fc3fbd32a69074893b71d90c0d2b0b1baa753 Mon Sep 17 00:00:00 2001 From: jamerrq Date: Fri, 5 Jan 2024 14:48:56 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20v3=20ready?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 9 +- src/components/about-me-card.astro | 44 +- src/components/blog.astro | 12 +- src/components/buttons.astro | 22 +- src/components/experience.astro | 28 +- src/components/featured.astro | 13 +- src/components/socials.astro | 42 +- src/components/tech-stack.astro | 18 +- src/components/tech-stack/about.astro | 8 +- src/components/tech-stack/backend.astro | 12 +- src/components/tech-stack/dev-tools.astro | 14 +- src/components/tech-stack/languages.astro | 24 +- src/components/tech-stack/os.astro | 12 +- src/components/tech-stack/testing.astro | 12 +- src/components/tech-stack/title.astro | 10 +- src/components/typed.astro | 4596 ++++++++++----------- src/index.css | 28 - src/layouts/layout.astro | 62 +- src/pages/404.astro | 15 +- 19 files changed, 2494 insertions(+), 2487 deletions(-) delete mode 100644 src/index.css diff --git a/README.md b/README.md index a0060e2..dab840a 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,15 @@ Source code for my personal website, [jamerrq.dev](https://jamerrq.dev). ### Dark Mode -![v2_dark](./lib/v2_dark.png) +![v3_dark](./lib/v3_dark.png) ### Light Mode -![v2_light](./lib/v2_light.png) +![v3_light](./lib/v3_light.png) + +### LightHouse Report + +![LightHouse Score](./lib/lighthouse.png) ## Stack ๐Ÿฅž @@ -21,6 +25,7 @@ CSS](https://img.shields.io/badge/-Tailwind%20CSS-38B2AC?style=flat-square&logo= ![Bun](https://img.shields.io/badge/-Bun-FF3E00?style=flat-square&logo=bun&logoColor=white) ![Prettier](https://img.shields.io/badge/-Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=white) +![ESLint](https://img.shields.io/badge/-ESLint-4B32C3?style=flat-square&logo=eslint&logoColor=white) ### CI/CD & Deployment ๐Ÿš€ diff --git a/src/components/about-me-card.astro b/src/components/about-me-card.astro index 11c9989..c3819cf 100644 --- a/src/components/about-me-card.astro +++ b/src/components/about-me-card.astro @@ -2,7 +2,7 @@ const ABOUT_ME_STYLES = [ 'col-span-4', 'row-span-2', - 'bg-slate-400', + 'bg-slate-300', 'dark:bg-slate-900', 'dark:text-slate-300', 'rounded-sm', @@ -27,8 +27,8 @@ const ABOUT_ME_STYLES = [ 'flex-col', '[&>p]:font-fira', '[&>p]:text-base', - 'text-slate-900', - 'dark:text-slate-300' + 'text-black', + 'dark:text-white' ].join(' ') --- @@ -41,26 +41,30 @@ const ABOUT_ME_STYLES = [

๏•

My name is Jamer Josรฉ, I'm a Math Engineer from - - EAFIT University - . +
+ + EAFIT University + +

๓ฐœ

Currently working as part time Backend Developer at - - Dium - . +
+ + Dium + +

๓ฐฎฎ

@@ -75,7 +79,7 @@ const ABOUT_ME_STYLES = [ diff --git a/src/components/blog.astro b/src/components/blog.astro index 27765aa..d6f9af1 100644 --- a/src/components/blog.astro +++ b/src/components/blog.astro @@ -3,7 +3,7 @@ const BLOG_STYLES = [ 'col-span-1', 'row-span-2', 'gap-2', - 'bg-teal-500', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -11,18 +11,18 @@ const BLOG_STYLES = [ 'justify-center', 'responsive-text', 'font-bold', - 'text-teal-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'duration-200', 'dark: transition-all', - 'dark:border-teal-300', + 'dark:border-slate-300', 'border-2', - 'border-teal-950', - 'dark:bg-teal-900', - 'dark:text-teal-300', + 'border-slate-950', + 'dark:bg-slate-900', + 'dark:text-slate-300', 'hover:scale-[1.02]', 'hover:duration-200', 'hover:ease-in-out' diff --git a/src/components/buttons.astro b/src/components/buttons.astro index 9d85cf2..b07c2c6 100644 --- a/src/components/buttons.astro +++ b/src/components/buttons.astro @@ -10,25 +10,25 @@ const BUTTONS_STYLES = [ 'justify-around', 'responsive-text', 'border-2', - 'border-teal-950', - 'dark:border-teal-300', + 'border-slate-950', + 'dark:border-slate-300', // 'bg-[#1b383c]', - 'text-teal-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'duration-200', - 'dark:bg-teal-900', - 'dark:text-teal-100', - 'bg-teal-400', + 'dark:bg-slate-900', + 'dark:text-slate-100', + 'bg-slate-300', '[&>*]:font-fira' - // '[&>*]:hover:text-teal-300', + // '[&>*]:hover:text-slate-300', ].join(' ') const BUTTON_STYLES = [ - 'dark:hover:text-teal-300', - 'hover:text-teal-100' + 'dark:hover:text-slate-300', + 'hover:text-slate-100' // 'hover:scale-110', ].join(' ') --- @@ -58,7 +58,7 @@ const BUTTON_STYLES = [ id='theme-toggle' type='button' title='switch dark/light theme' - class='dark:hover:text-teal-300 hover:text-teal-100' + class='dark:hover:text-slate-300 hover:text-slate-100' > @@ -68,7 +68,7 @@ const BUTTON_STYLES = [ href='https://github.com/jamerrq/jamerrq.dev' target='_blank' rel='noopener noreferrer' - class='dark:hover:text-teal-300 hover:text-teal-100' + class='dark:hover:text-slate-300 hover:text-slate-100' title='Source Code. Leave a star ๐ŸŒŸ if you like!' > ๎œ‰ diff --git a/src/components/experience.astro b/src/components/experience.astro index ac054cf..3db5c46 100644 --- a/src/components/experience.astro +++ b/src/components/experience.astro @@ -3,7 +3,7 @@ const EXPERIENCE_STYLES = [ 'col-span-2', 'row-span-4', 'gap-2', - 'bg-red-300', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -12,26 +12,28 @@ const EXPERIENCE_STYLES = [ 'align-center', // 'text-2xl', 'font-bold', - 'text-red-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'border-2', - 'dark:border-red-300', - 'border-red-950', - 'dark:bg-red-800', - 'dark:text-red-200', + 'dark:border-slate-300', + 'border-slate-950', + 'dark:bg-slate-800', + 'dark:text-slate-200', 'hover:scale-[1.02]', 'hover:transition-all', 'flex', 'flex-col', 'p-1', - '[&>div>ul>li]:bg-red-200', - '[&>div>ul>li]:dark:bg-red-900', - '[&>div>ul>li]:dark:text-red-200', - '[&>div>ul>li>a]:bg-amber-700', - '[&>div>ul>li>a]:dark:bg-amber-700' + '[&>div>ul>li]:bg-emerald-200', + '[&>div>ul>li]:dark:bg-slate-900', + '[&>div>ul>li]:dark:text-slate-200', + '[&>div>ul>li>a]:bg-emerald-400', + '[&>div>ul>li>a]:dark:bg-emerald-400', + '[&>div>ul>li>a]:dark:text-emerald-950', + '[&>div>ul>li>a]:text-slate-950', ].join(' ') --- @@ -45,7 +47,7 @@ const EXPERIENCE_STYLES = [
-

Among others...

+

+ -- Tap to see more -- +

diff --git a/src/components/tech-stack/about.astro b/src/components/tech-stack/about.astro index 06b7d1c..d1dabe3 100644 --- a/src/components/tech-stack/about.astro +++ b/src/components/tech-stack/about.astro @@ -2,7 +2,7 @@ const ABOUT_ME_STYLES = [ 'col-span-4', 'row-span-2', - 'bg-slate-400', + 'bg-slate-300', 'dark:bg-slate-900', 'dark:text-slate-300', 'rounded-sm', @@ -19,10 +19,6 @@ const ABOUT_ME_STYLES = [ 'border-2', 'dark:border-slate-300', 'border-slate-950', - // 'hover:bg-slate-900', - // 'hover:text-slate-300', - // 'hover:scale-[1.02]', - // 'hover:transition-all', 'responsive-text-xs', 'flex-col', '[&>p]:font-fira', @@ -43,7 +39,7 @@ const ABOUT_ME_STYLES = [

- Isaac Newton

- These are the tools I (love to) am familiar with in my day-to-day work: + These are the tools I (love) am familiar with in my day-to-day work:

diff --git a/src/components/tech-stack/backend.astro b/src/components/tech-stack/backend.astro index ac9e763..ef37e71 100644 --- a/src/components/tech-stack/backend.astro +++ b/src/components/tech-stack/backend.astro @@ -3,7 +3,7 @@ const BACKEND_STYLES = [ 'col-span-2', 'row-span-4', 'gap-2', - 'bg-teal-300', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -12,16 +12,16 @@ const BACKEND_STYLES = [ 'align-center', // 'text-2xl', 'font-bold', - 'text-teal-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'border-2', - 'dark:border-teal-300', - 'border-teal-950', - 'dark:bg-teal-800', - 'dark:text-teal-200', + 'dark:border-slate-300', + 'border-slate-950', + 'dark:bg-slate-900', + 'dark:text-slate-300', // 'hover:scale-[1.02]', // 'hover:transition-all', 'flex', diff --git a/src/components/tech-stack/dev-tools.astro b/src/components/tech-stack/dev-tools.astro index cfe5051..2d31274 100644 --- a/src/components/tech-stack/dev-tools.astro +++ b/src/components/tech-stack/dev-tools.astro @@ -2,7 +2,7 @@ const DEV_TOOLS_STYLES = [ 'col-span-2', 'row-span-3', - 'bg-emerald-400', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -12,17 +12,17 @@ const DEV_TOOLS_STYLES = [ 'justify-center', // 'text-2xl', // 'font-bold', - // 'text-emerald-950', + // 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'border-2', - 'border-emerald-950', - 'dark:border-emerald-300', - 'text-emerald-950', - 'dark:bg-emerald-900', - 'dark:text-emerald-300', + 'border-slate-950', + 'dark:border-slate-300', + 'text-slate-950', + 'dark:bg-slate-900', + 'dark:text-slate-300', // 'hover:scale-[1.02]', // 'hover:transition-all', 'responsive-text-xs', diff --git a/src/components/tech-stack/languages.astro b/src/components/tech-stack/languages.astro index 584dd10..06fe3ac 100644 --- a/src/components/tech-stack/languages.astro +++ b/src/components/tech-stack/languages.astro @@ -3,7 +3,7 @@ const SOCIALS_STYLES: string = [ 'col-span-2', 'row-span-2', 'gap-2', - 'bg-indigo-400', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -11,19 +11,19 @@ const SOCIALS_STYLES: string = [ 'justify-center', 'responsive-text', // 'font-bold', - 'text-indigo-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'duration-200', 'dark:transition-all', - 'dark:border-indigo-300', - 'border-indigo-950', - // 'hover:border-indigo-100', + 'dark:border-slate-300', + 'border-slate-950', + // 'hover:border-slate-100', 'border-2', - 'dark:bg-indigo-900', - 'dark:text-indigo-300', + 'dark:bg-slate-900', + 'dark:text-slate-300', // 'hover:scale-[1.02]', // 'hover:duration-200', // 'hover:ease-in-out', @@ -44,7 +44,7 @@ const SOCIALS_STYLES: string = [ href='https://www.python.org/' target='_blank' rel='noopener noreferrer' - class='font-fira hover:scale-110 hover:text-indigo-300' + class='font-fira hover:scale-110 hover:text-slate-300' title='Python' > ๓ฐŒ  @@ -54,7 +54,7 @@ const SOCIALS_STYLES: string = [ href='https://developer.mozilla.org/en-US/docs/Web/JavaScript' target='_blank' rel='noopener noreferrer' - class='font-fira hover:scale-110 hover:text-indigo-300' + class='font-fira hover:scale-110 hover:text-slate-300' title='JavaScript' > ๓ฐŒž @@ -64,7 +64,7 @@ const SOCIALS_STYLES: string = [ href='https://www.typescriptlang.org/' target='_blank' rel='noopener noreferrer' - class='font-fira hover:scale-110 hover:text-indigo-300' + class='font-fira hover:scale-110 hover:text-slate-300' title='TypeScript' > ๓ฐ›ฆ @@ -74,7 +74,7 @@ const SOCIALS_STYLES: string = [ href='https://www.gnu.org/software/bash/' target='_blank' rel='noopener noreferrer' - class='font-fira hover:scale-110 hover:text-indigo-300' + class='font-fira hover:scale-110 hover:text-slate-300' title='Bash' > ๎ฏŠ @@ -84,7 +84,7 @@ const SOCIALS_STYLES: string = [ href='https://docs.microsoft.com/en-us/dotnet/csharp/' target='_blank' rel='noopener noreferrer' - class='font-fira hover:scale-110 hover:text-indigo-300' + class='font-fira hover:scale-110 hover:text-slate-300' title='C#' > ๓ฐŒ› diff --git a/src/components/tech-stack/os.astro b/src/components/tech-stack/os.astro index e0d3a53..f11648a 100644 --- a/src/components/tech-stack/os.astro +++ b/src/components/tech-stack/os.astro @@ -3,7 +3,7 @@ const OS_STYLES = [ 'col-span-1', 'row-span-2', 'gap-2', - 'bg-blue-400', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -12,17 +12,17 @@ const OS_STYLES = [ 'justify-center', 'responsive-text-xs', 'font-bold', - 'text-blue-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'duration-200', - 'border-blue-950', - 'dark:border-blue-300', + 'border-slate-950', + 'dark:border-slate-300', 'border-2', - 'dark:bg-blue-900', - 'dark:text-blue-400' + 'dark:bg-slate-900', + 'dark:text-slate-300' // 'hover:scale-[1.02]', // 'hover:duration-200', // 'hover:ease-in-out', diff --git a/src/components/tech-stack/testing.astro b/src/components/tech-stack/testing.astro index a142dfc..9b457a0 100644 --- a/src/components/tech-stack/testing.astro +++ b/src/components/tech-stack/testing.astro @@ -3,7 +3,7 @@ const OS_STYLES = [ 'col-span-1', 'row-span-2', 'gap-2', - 'bg-red-400', + 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', 'flex', @@ -12,17 +12,17 @@ const OS_STYLES = [ 'justify-center', 'responsive-text-xs', 'font-bold', - 'text-red-950', + 'text-slate-950', 'font-rubik-doodle', 'w-full', 'h-full', 'transition-all', 'duration-200', - 'border-red-950', - 'dark:border-red-300', + 'border-slate-950', + 'dark:border-slate-300', 'border-2', - 'dark:bg-red-900', - 'dark:text-red-400' + 'dark:bg-slate-900', + 'dark:text-slate-300' // 'hover:scale-[1.02]', // 'hover:duration-200', // 'hover:ease-in-out', diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro index 14af88c..e63c650 100644 --- a/src/components/tech-stack/title.astro +++ b/src/components/tech-stack/title.astro @@ -2,10 +2,10 @@ const TITLE_STYLES: string = [ 'row-span-2', 'col-span-2', - 'dark:bg-red-900', - 'dark:text-red-300', - 'text-red-950', - 'bg-red-400', + 'dark:bg-slate-900', + 'dark:text-slate-300', + 'text-slate-950', + 'bg-slate-300', 'p-2', 'rounded-sm', 'w-full', @@ -21,5 +21,5 @@ const TITLE_STYLES: string = [

Tech Stack ๎ฏŠ

-

Artists have brushes. I have these.

+

Artists have brushes. I got these.

 diff --git a/src/components/typed.astro b/src/components/typed.astro index 40b5e9a..cdb8ae1 100644 --- a/src/components/typed.astro +++ b/src/components/typed.astro @@ -3,2306 +3,2306 @@ diff --git a/src/index.css b/src/index.css deleted file mode 100644 index f87e5a7..0000000 --- a/src/index.css +++ /dev/null @@ -1,28 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); - -@font-face{ - src: url('/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.otf') format('opentype'); - font-family: 'Fira'; -} - -.responsive-text{ - font-size: clamp(1.5rem, 8vw - 2rem, 3rem); -} - -.responsive-text-xs{ - font-size: clamp(1rem, 8vw - 2rem, 2rem); -} - -.responsive-text-sm{ - font-size: clamp(0.75rem, 8vw - 2rem, 1.5rem); -} - -.responsive-text-xxs{ - font-size: clamp(0.5rem, 8vw - 2rem, 1rem); -} - -main#background{ - background-image: url('/pizarra.webp'); -} diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro index c25fecf..1594f49 100644 --- a/src/layouts/layout.astro +++ b/src/layouts/layout.astro @@ -5,8 +5,8 @@ interface Props { const { title } = Astro.props import '@fontsource/merriweather' -import '../index.css' // import { ViewTransitions } from 'astro:transitions' +const MODE = import.meta.env.MODE --- @@ -15,42 +15,50 @@ import '../index.css' - + + + + + + + {title} - + diff --git a/src/pages/404.astro b/src/pages/404.astro index a7e078b..7df9808 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -38,13 +38,20 @@ import Layout from '../layouts/layout.astro' transform: scale(1.02); transition: all 0.2s ease-in-out; } + + #_404_background { + filter: blur(2px); + z-index: -1; + width: 100vw; + height: 100vh; + position: fixed; + background-image: url('/pizarra.webp'); + } -
+
+

Page Not Found!