adding pages

2025-11-28 01:31:50 +10:00
parent 726b6e7adb
commit 6720bfd450
2 changed files with 150 additions and 0 deletions
--- a/src/components/data.pug
+++ b/src/components/data.pug
@@ -0,0 +1,81 @@
+-
+  const pages = {
+    embedded: {
+      title: 'Embedded Details',
+      slug: 'embedded',
+      menuTitle: 'Embeded Details',
+      images: [
+        { src: './images/esp32.png', alt: 'ESP32', height: 150 },
+        { src: './images/arduino.png', alt: 'Arduino', height: 150 },
+        { src: './images/stm32.png', alt: 'STM32', height: 150 }
+      ],
+      paragraphs: [
+        "My programming path started with embeded systems, i love all the low level things that Mcu could do with just a little bit of code, sometimes build or flashing progress could take some time to get a hand of , but after that everething usualy goes smooth",
+        "The first MCU i tried was a ATmega328P, after some time i was surprised with the debug capabilities on the Stm32 and now i'm working with esp32-s3 , that's a good chip, has internal JTAG and all the shiny wireless interfaces but feels faulty for some reason <i>regular segfaults with CDC</i>"
+      ],
+      table: {
+        title: 'Microcontroller Comparison Table',
+        headers: ['Board/MCU', 'UART Count', 'Dynamic UART Assignment', 'ADC Channels', 'Debug Support', 'Flash Size', 'Wireless Connectivity'],
+        rows: [
+          ['ESP32', '3', 'Yes (via IO MUX)', '18', 'JTAG, Serial', '4MB (typical)', 'Wi-Fi, Bluetooth'],
+          ['ESP32-S3', '3', 'Yes (via IO MUX)', '20', 'JTAG, Serial', '8MB (typical)', 'Wi-Fi, Bluetooth LE'],
+          ['ESP-01', '1', 'No', '1', 'Serial only', '512KB/1MB', 'Wi-Fi'],
+          ['Arduino Uno (ATmega328P)', '1', 'No', '6', 'Serial, DebugWire', '32KB', 'None'],
+          ['Blue Pill (STM32F103C8T6)', '3', 'Yes (remappable)', '10', 'SWD, Serial', '64KB/128KB', 'None']
+        ]
+      },
+      footer: "no rpi pico here , the build system has won over my temper"
+    },
+
+    opencv: {
+      title: 'OpenCV Details',
+      slug: 'opencv',
+      menuTitle: 'OpenCV Details',
+      images: [
+        { src: './images/opencv.png', alt: 'OpenCV', height: 150 }
+      ],
+      paragraphs: [
+        "as mentioned before i love when programs are able to <i>see</i> things",
+        "my experience with opencv started with simple hight level functions like detectCircle or findContours and etc...",
+        "Right now i'm crawling deeper into the library , and the idea of standartisation of parameters between different cameras is appealig to me",
+        "so i'm trying to understand how all that works from the math side",
+        "Additionally, I'm exploring Re-Identification (ReId) techniques, they are used for recognizing and tracking objects across different camera views or consecutive frames."
+      ],
+      content: {
+        type: 'text',
+        text: "One of many projects I've worked on is <a href=\"https://github.com/OkunElya/ArucoNGP-MapCreator\" target=\"_blank\">ArucoNGP-MapCreator</a>.<br>The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.<br>It can also estimate the camera's position in the world relative to a specific marker, using only images containing any marker.<br>It was also my first deep dive into linear algebra."
+      }
+    },
+
+    photography: {
+      title: 'Photography Details',
+      slug: 'photography',
+      menuTitle: 'Photography Details',
+      images: [],
+      paragraphs: [
+        "Usually i capture landcape scenes with SLR camera, the main workhorse is Nikon D3100 with kit and 70-210mm"
+      ],
+      gallery: [
+        [
+          { src: 'images/photos/image0.png', alt: 'Photo 0', width: 200 },
+          { src: 'images/photos/image1.png', alt: 'Photo 1', width: 200 },
+          { src: 'images/photos/image2.png', alt: 'Photo 2', width: 200 }
+        ],
+        [
+          { src: 'images/photos/image3.png', alt: 'Photo 3', width: 200 },
+          { src: 'images/photos/image4.png', alt: 'Photo 4', width: 200 },
+          { src: 'images/photos/image5.png', alt: 'Photo 5', width: 200 }
+        ]
+      ]
+    }
+  };
+
+-
+  const menu = [
+    { href: './index.html', title: 'Home' },
+    { href: './embeded_details.html', title: 'Embeded Details' },
+    { href: './opencv_details.html', title: 'OpenCV Details' },
+    { href: './photography_details.html', title: 'Photography Details' },
+    { href: './table.html', title: 'Table with filters (not working yet)' },
+    { href: './images/institute.png', title: 'Institute' }
+  ];
--- a/src/components/template.pug
+++ b/src/components/template.pug
@@ -0,0 +1,69 @@
+include data.pug
+
+mixin detailsPage(pageData)
+  doctype html
+  html(lang="en")
+    head
+      meta(charset="UTF-8")
+      title= pageData.title
+    
+    body(bgcolor="#F0F8FF")
+      //- Menu
+      details
+        summary Menu
+        ul
+          each item in menu
+            li
+              if item.title === pageData.menuTitle
+                a(href=item.href)
+                  h4= item.title
+              else
+                a(href=item.href)= item.title
+      
+      //- Page Title
+      h2(align="center")= pageData.title
+      hr(width="800" align="center")
+      
+      //- Header Images
+      if pageData.images && pageData.images.length > 0
+        p(align="center")
+          each img in pageData.images
+            if img.height
+              img(src=img.src alt=img.alt height=img.height)
+            else if img.width
+              img(src=img.src alt=img.alt width=img.width)
+            else
+              img(src=img.src alt=img.alt)
+      
+      //- Paragraphs
+      if pageData.paragraphs
+        each para in pageData.paragraphs
+          p(align="justify")!= para
+      
+      //- Table (for embedded page)
+      if pageData.table
+        h3(align="center")= pageData.table.title
+        table(border="1" align="center" cellpadding="6" cellspacing="0")
+          tr
+            each header in pageData.table.headers
+              th= header
+          each row in pageData.table.rows
+            tr
+              each cell in row
+                td= cell
+      
+      //- Content (for opencv page)
+      if pageData.content
+        hr(width="500" align="center")
+        p!= pageData.content.text
+      
+      //- Gallery (for photography page)
+      if pageData.gallery
+        each row in pageData.gallery
+          p(align="center")
+            each img in row
+              img(src=img.src alt=img.alt width=img.width)
+      
+      //- Footer
+      if pageData.footer
+        p(align="right")= pageData.footer