From 9413e9fccf9ad885282435489c8daa6d3c4b97a1 Mon Sep 17 00:00:00 2001 From: jamerrq Date: Wed, 10 Jan 2024 17:42:06 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=AD=20feat:=20responsive=20design,=20m?= =?UTF-8?q?ore=20peeps,=20fix=20at=20view=20transitions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/about-me-card.astro | 2 +- src/components/bento.astro | 3 +- src/components/blog.astro | 4 +- src/components/buttons.astro | 1 + src/components/css-peeps/404-peep.astro | 22 ++++++++ src/components/css-peeps/calm-laptop.astro | 4 +- .../css-peeps/responsive-peep.astro | 23 ++++++++ .../css-peeps/striped-pocket-tee-light.astro | 22 ++++++++ .../css-peeps/striped-pocket-tee.astro | 6 +- .../css-peeps/tech-peep-light.astro | 23 ++++++++ src/components/css-peeps/tech-peep.astro | 23 ++++++++ src/components/featured.astro | 3 +- src/components/responsive-container.astro | 50 +++++++++++++++++ src/components/socials.astro | 4 +- src/components/tech-stack.astro | 5 +- src/components/tech-stack/bento.astro | 3 +- src/components/tech-stack/title.astro | 12 ++-- src/components/tech-stack/web-dev.astro | 10 ++-- src/components/title.astro | 7 +-- src/layouts/layout.astro | 56 ++++++++++--------- src/pages/404.astro | 24 ++++++-- src/pages/index.astro | 2 +- tailwind.config.mjs | 1 + 24 files changed, 249 insertions(+), 63 deletions(-) create mode 100644 src/components/css-peeps/404-peep.astro create mode 100644 src/components/css-peeps/responsive-peep.astro create mode 100644 src/components/css-peeps/striped-pocket-tee-light.astro create mode 100644 src/components/css-peeps/tech-peep-light.astro create mode 100644 src/components/css-peeps/tech-peep.astro create mode 100644 src/components/responsive-container.astro diff --git a/package.json b/package.json index 1468f8c..af5a310 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "dev": "astro dev", "start": "astro dev", - "build": "astro check && astro build", + "build": "bun run lint && astro check && astro build", "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs", "astro": "astro", "lint": "prettier --write \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\" && eslint --fix \"src/**/*.{js,ts,jsx,tsx,astro}\"" diff --git a/src/components/about-me-card.astro b/src/components/about-me-card.astro index 66dfbc0..06505bb 100644 --- a/src/components/about-me-card.astro +++ b/src/components/about-me-card.astro @@ -75,7 +75,7 @@ const ABOUT_ME_STYLES = [

󰛓

- The best way to get something done is to begin. + I strongly believe that the best way to achieve something is to start it

Contact

-

+

󰶈

diff --git a/src/components/tech-stack.astro b/src/components/tech-stack.astro index 1653fdc..52af336 100644 --- a/src/components/tech-stack.astro +++ b/src/components/tech-stack.astro @@ -1,11 +1,12 @@ --- -const TECH_STACK_STYLES = [ +const TECH_STACK_STYLES: string = [ 'col-span-2', 'row-span-3', 'bg-slate-300', 'rounded-sm', // 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', - 'shadow-[0_0_0.5rem_rgb(0_0_0)]', + 'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3) + 'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]', // rgb(253, 230, 138) 'flex', 'flex-col', 'gap-2', diff --git a/src/components/tech-stack/bento.astro b/src/components/tech-stack/bento.astro index e2419dd..5c7f020 100644 --- a/src/components/tech-stack/bento.astro +++ b/src/components/tech-stack/bento.astro @@ -10,7 +10,8 @@ import Languages from './languages.astro' const BENTO_STYLES = [ 'bg-[#1b383c]', - 'grid', + 'hidden', + 'xl:grid', 'items-center', 'justify-center', 'w-[95dvw]', diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro index 6e2b96c..4a3e55e 100644 --- a/src/components/tech-stack/title.astro +++ b/src/components/tech-stack/title.astro @@ -1,5 +1,6 @@ --- -import CalmPeep from '../css-peeps/calm-laptop.astro' +import TechPeep from '../css-peeps/tech-peep.astro' +import TechPeepLight from '../css-peeps/tech-peep-light.astro' const TITLE_STYLES: string = [ 'row-span-2', 'col-span-2', @@ -16,14 +17,17 @@ const TITLE_STYLES: string = [ 'justify-center', 'flex-row', 'font-rubik-doodle', - 'shadow-[0_0_0.5rem_rgba(0_0_0)]' + // 'shadow-[0_0_0.5rem_rgba(0_0_0)]' + 'shadow-[0_0_0.3rem_rgb(69_26_3)]', // rgb(69, 26, 3) + 'dark:shadow-[0_0_0.3rem_rgb(253_230_138)]' // rgb(253, 230, 138) ].join(' ') ---

Tech Stack 

-

Artists have brushes,
I got these.

+

Painters have brushes,
I got these.

- + + diff --git a/src/components/tech-stack/web-dev.astro b/src/components/tech-stack/web-dev.astro index 9650ad3..cbb6c8d 100644 --- a/src/components/tech-stack/web-dev.astro +++ b/src/components/tech-stack/web-dev.astro @@ -2,7 +2,7 @@ const WEB_DEV_STYLES = [ 'col-span-2', 'row-span-4', - 'gap-2', + 'gap-1', 'bg-slate-300', 'rounded-sm', 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]', @@ -43,7 +43,7 @@ const WEB_DEV_STYLES = [

Web Development

󰜫

-
- + diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro index 8e69e1c..a63635a 100644 --- a/src/layouts/layout.astro +++ b/src/layouts/layout.astro @@ -6,6 +6,7 @@ interface Props { const { title } = Astro.props import '@fontsource/merriweather' import { ViewTransitions } from 'astro:transitions' +import ResponsiveContainer from '../components/responsive-container.astro' const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : '' --- @@ -28,37 +29,40 @@ const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : '' + - + main#background { + background-image: url('/pizarra.webp'); + background-size: fill; + } + + diff --git a/src/pages/404.astro b/src/pages/404.astro index 8e43de9..54a11d2 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -1,5 +1,6 @@ --- import Layout from '../layouts/layout.astro' +import Peep from '../components/css-peeps/404-peep.astro' ---