add content for home and about pages

Author: nemanjam

docs/working-notes/todo2.md

@@ -192,6 +192,10 @@ https://github.com/markhorn-dev/astro-nano
 // no images, astro db
 https://github.com/flavienbonvin/flavien-bonvin
 
+// excellent css, wide column
+https://lea.verou.me/
+https://lea.verou.me/blog/2023/going-lean/#public-or-private-repo%3F
+
 -----------
 za local state mora react ili solid
 for state between pages nanostore with localStorage

docs/working-notes/todo3.md

@@ -453,6 +453,7 @@ tree diagram for layouts hierarchy
 analytics
 shaped text around images, home and about pages
 better roadmap
+add youtube, twitter in footer
 ----
 // 4.10
 in BaseHead.astro

src/components/Share.astro

@@ -21,10 +21,10 @@ export interface Props extends SocialShareProps {
 const { class: className, ...shareProps } = Astro.props;
 
 const { title, description } = DEFAULT_METADATA;
-const { SITE_URL } = CONFIG;
+const { AUTHOR_TWITTER } = CONFIG;
 
 // via is only for twitter
-const defaultProps = { description, title, via: SITE_URL };
+const defaultProps = { description, title, via: AUTHOR_TWITTER };
 
 // dont change order because of colors
 const buttons = [

src/config.ts

@@ -39,6 +39,8 @@ const configData: ConfigType = {
   AUTHOR_EMAIL: '[email protected]',
   AUTHOR_GITHUB: 'https://github.com/nemanjam',
   AUTHOR_LINKEDIN: 'https://www.linkedin.com/in/nemanja-mitic',
+  AUTHOR_TWITTER: 'https://x.com/nemanja_codes',
+  AUTHOR_YOUTUBE: 'https://www.youtube.com/@nemanja_codes',
   REPO_URL: 'https://github.com/nemanjam/nemanjam.github.io',
 };
 

src/constants/image.ts

@@ -37,12 +37,14 @@ export const IMAGE_SIZES = {
       width: TW_SCREENS.MD,
       height: TW_SCREENS.HEIGHTS.MD,
     },
+    MDX_XXS: { width: TW_SCREENS.XXS },
     MDX_XS: { width: TW_SCREENS.XS },
     MDX_SM: { width: TW_SCREENS.SM },
     MDX_MD: { width: TW_SCREENS.MD },
     MDX_LG: { width: TW_SCREENS.LG },
     MDX_XL: { width: TW_SCREENS.XL },
     /** width and height required for remote images */
+    MDX_XXS_16_9: { width: TW_SCREENS.XXS, height: TW_SCREENS.HEIGHTS.XXS },
     MDX_XS_16_9: { width: TW_SCREENS.XS, height: TW_SCREENS.HEIGHTS.XS },
     MDX_SM_16_9: { width: TW_SCREENS.SM, height: TW_SCREENS.HEIGHTS.SM },
     MDX_MD_16_9: { width: TW_SCREENS.MD, height: TW_SCREENS.HEIGHTS.MD },

src/pages/about.mdx

@@ -6,13 +6,38 @@ description: 'Lorem ipsum dolor sit amet'
 
 import { Image } from 'astro:assets';
 
+import { CONFIG } from '../config';
 import { IMAGE_SIZES } from '../constants/image';
+import Link from '../components/Link.astro';
 import Electronics1Image from '../assets/images/all-images/electronics1.jpg';
 
+
+export const { SITE_URL, AUTHOR_GITHUB, AUTHOR_LINKEDIN, AUTHOR_TWITTER, AUTHOR_YOUTUBE, REPO_URL } = CONFIG;
+
 # About
 
-<Image {...IMAGE_SIZES.FIXED.MDX_SM} src={Electronics1Image} alt="Veronica transmitter board" />
+<Image {...IMAGE_SIZES.FIXED.MDX_SM} src={Electronics1Image} alt="Veronica transmitter board" /> 
+
+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.
+
+My hobbies are fishing, lure building, bicycling, playing guitar, composing in FL Studio, and DIY electronics.
 
-Aliquip quis commodo proident et dolor irure irure tempor voluptate. Exercitation pariatur ipsum nulla nulla laboris velit cupidatat amet adipisicing consectetur quis quis irure. Quis ullamco sint cupidatat reprehenderit deserunt. Et sunt anim ex ipsum sit quis dolor excepteur mollit aute commodo veniam velit. 
+If you want to contact me about coding, or if you need a companion for fishing or jamming, use the links below.
 
+<p class="my-2">
+  <label class="font-bold">GitHub:</label>
+  <Link href={AUTHOR_GITHUB} target="_blank">{AUTHOR_GITHUB}</Link>
+</p>
+<p class="my-2">
+  <label class="font-bold">LinkedIn:</label>
+  <Link href={AUTHOR_LINKEDIN} target="_blank">{AUTHOR_LINKEDIN}</Link>
+</p>
+<p class="my-2">
+  <label class="font-bold">Twitter:</label>
+  <Link href={AUTHOR_TWITTER} target="_blank">{AUTHOR_TWITTER}</Link>
+</p>
+<p class="my-2">
+  <label class="font-bold">YouTube:</label>
+  <Link href={AUTHOR_YOUTUBE} target="_blank">{AUTHOR_YOUTUBE}</Link>
+</p>
 

src/pages/index.mdx

@@ -9,8 +9,9 @@ import { Image } from 'astro:assets';
 import { IMAGE_SIZES } from '../constants/image';
 import River10Image from '../assets/images/all-images/river10.jpg';
 
-# Hello visitor
+# Hello and welcome
 
 <Image {...IMAGE_SIZES.FIXED.MDX_MD} src={River10Image} alt="Fishing spot" />
 
-Irure non reprehenderit aute velit proident ad reprehenderit. Laborum quis ea tempor ullamco aute qui ad et qui ipsum est mollit eu. Aliquip non officia amet reprehenderit irure. Et voluptate ea veniam cillum dolor labore commodo culpa. Culpa eiusmod mollit sunt nisi dolor ullamco velit in aliquip et ea duis eu.
+Welcome to my coding blog. Here, I will share my coding experiments and thoughts on React.js, Next.js, Node.js, Astro, Python, DevOps, and more. Feel free to read, explore, and comment. If you are feeling overwhelmed by coding, you can take a break and enjoy some random landscape photos from the articles. Maybe in the future, we will create a separate gallery for them. We will see.
+

src/schemas/config.ts

@@ -20,5 +20,7 @@ export const configSchema = z.object({
   AUTHOR_EMAIL: z.string().email(),
   AUTHOR_GITHUB: z.string().url(),
   AUTHOR_LINKEDIN: z.string().url(),
+  AUTHOR_TWITTER: z.string().url(),
+  AUTHOR_YOUTUBE: z.string().url(),
   REPO_URL: z.string().url(),
 });