diff --git a/src/components/data.pug b/src/components/data.pug
new file mode 100644
index 0000000..0d53338
--- /dev/null
+++ 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 regular segfaults with CDC"
+ ],
+ 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 see 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 ArucoNGP-MapCreator.
The idea was to create a relative map of Aruco markers just from photos of pairs (or more) of them.
It can also estimate the camera's position in the world relative to a specific marker, using only images containing any marker.
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' }
+ ];
diff --git a/src/components/template.pug b/src/components/template.pug
new file mode 100644
index 0000000..c13b71f
--- /dev/null
+++ 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