about page wrap text float, add breakpoints utils component

Author: nemanjam

docker/Dockerfile

@@ -34,7 +34,7 @@ RUN if [ "$TARGETARCH" = "arm64" ]; then \
   fi && \
   echo "SITE_URL=$SITE_URL" && \
   # must set SITE_URL via .env.production file for yarn build, important
-  # must use .env.production, .env doesn't work
+  # must use .env.production, .env doesn't work, my logic with dotenv in src/config/process-env.ts
   echo SITE_URL=$SITE_URL > .env.production;
 
 RUN echo "ls -la=" && ls -la

docs/working-notes/todo3.md

@@ -535,7 +535,7 @@ moze samo za 1 url data-domain="nemanjamitic.com", to je ok, tako i treba
 
     paralelizuj docker arm x86 build, reuse cache, test
 accessibility
-    image sizes
+    image sizes, poenta je i koliku sirinu u contentu zauzima slika, ne samo sirina ekrana, to
 astro gallery, blur onload, infinite scroll
 define real color themes
 IPv6 Traefik

src/components/utils/breakpoints.astro

@@ -0,0 +1,21 @@
+---
+import { CONFIG_SERVER } from '@/config/server';
+
+const isProd = CONFIG_SERVER.NODE_ENV === 'production';
+
+// component just for debuggng responsive styles
+---
+
+{
+  !isProd && (
+    <div class="fixed top-24 right-4 z-50 flex size-8 p-3 items-center justify-center rounded-full text-base-100 bg-content text-sm font-mono">
+      <div class="block xs:hidden">2xs</div>
+      <div class="hidden xs:block sm:hidden">xs</div>
+      <div class="hidden sm:block md:hidden">sm</div>
+      <div class="hidden md:block lg:hidden">md</div>
+      <div class="hidden lg:block xl:hidden">lg</div>
+      <div class="hidden xl:block 2xl:hidden">xl</div>
+      <div class="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}

src/config/process-env.ts

@@ -37,7 +37,7 @@ const processEnvData: ProcessEnvType = {
   PLAUSIBLE_DOMAIN: process.env.PLAUSIBLE_DOMAIN,
 };
 
-prettyPrintObject(processEnvData, 'processEnvData');
+prettyPrintObject(processEnvData, 'received PROCESS_ENV');
 
 export const PROCESS_ENV = validateData(processEnvData, processEnvSchema);
 

src/layouts/Base.astro

@@ -5,6 +5,7 @@ import BaseHead from '@/components/BaseHead.astro';
 import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
 import ScrollToTop from '@/components/react/ScrollToTop';
+import Breakpoints from '@/components/utils/breakpoints.astro';
 
 import type { BaseHeadProps } from '@/components/BaseHead.astro';
 
@@ -23,5 +24,7 @@ const { metadata } = Astro.props as BaseProps;
     <ScrollToTop client:only="react">
       <Icon name="mdi:arrow-up-thin" class="h-10 w-10 text-content hover:text-links-hover" />
     </ScrollToTop>
+
+    <Breakpoints />
   </body>
 </html>

src/pages/about.mdx

@@ -7,16 +7,22 @@ description: 'About me page'
 import { Image } from 'astro:assets';
 
 import { CONFIG_CLIENT } from '../config/client';
-import { IMAGE_SIZES } from '../constants/image';
+import { IMAGE_SIZES, TW_SCREENS } from '../constants/image';
 import Link from '../components/Link.astro';
 import Electronics1Image from '../assets/images/all-images/electronics1.jpg';
 
 
 export const { AUTHOR_GITHUB, AUTHOR_LINKEDIN, AUTHOR_TWITTER, AUTHOR_YOUTUBE } = CONFIG_CLIENT;
 
+{/* bellow SM image is full width of content so higher resolution image */}
+export const imageSizes = {
+  widths: [TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.SM],
+  sizes: `(max-width: ${TW_SCREENS.SM}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.MD}px, ${TW_SCREENS.SM}px`,
+};
+
 # About
 
-<Image {...IMAGE_SIZES.FIXED.MDX_SM} src={Electronics1Image} alt="Veronica transmitter board" /> 
+<Image {...imageSizes} src={Electronics1Image} alt="Veronica transmitter board" class="md:max-w-sm lg:max-w-md md:float-right md:mt-2 md:ml-8" /> 
 
 My name is Nemanja, I am a full-stack developer with experience in React.js, Next.js, and Node.js. In the past, I have worked with C# and ASP.NET, and lately, I have developed an interest in Python and FastAPI. I also like to experiment with DevOps and homelab self-hosting.