diff --git a/majortom/misc/jquery.mosaic.css b/majortom/misc/jquery.mosaic.css
new file mode 100644
index 00000000..3cf697cd
--- /dev/null
+++ b/majortom/misc/jquery.mosaic.css
@@ -0,0 +1,63 @@
+/*
+	 jQuery Mosaic v0.15.3
+	 https://github.com/tin-cat/jquery-mosaic
+ */
+
+ .jQueryMosaic {
+	width: 100%;
+	float: left;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.jQueryMosaic > div,
+.jQueryMosaic > a,
+.jQueryMosaic > img,
+.jQueryMosaic > video {
+	float: left;
+}
+
+.jQueryMosaic > .item {
+	position: relative;
+}
+
+.jQueryMosaic > .item.withImage {
+	background-size: cover;
+}
+
+.jQueryMosaic > .item > .overlay {
+	opacity: 0;
+	position: absolute;
+	left: 0px; right: 0px; top: 0px; bottom: 0px;
+	transition: opacity .2s ease-in-out;
+	-moz-transition: opacity .2s ease-in-out;
+	-webkit-transition: opacity .2s ease-in-out;
+}
+
+.jQueryMosaic > .item:hover > .overlay {
+	opacity: 1;
+}
+
+.jQueryMosaic > .item > .overlay > .texts {
+	position: absolute;
+	left: 0px; right: 0px; bottom: 0px;
+	padding: 15pt;
+	background: rgba(0, 0, 0, 0.2);
+	color: #fff;
+}
+
+.jQueryMosaic > .item > .overlay > .texts h1,
+.jQueryMosaic > .item > .overlay > .texts h2 {
+	margin: 0;
+	line-height: 1.3em;
+}
+
+.jQueryMosaic > .item > .overlay > .texts h1 {
+	font-size: 17pt;
+}
+
+.jQueryMosaic > .item > .overlay > .texts h2 {
+	font-size: 13pt;
+}
diff --git a/majortom/misc/jquery.mosaic.js b/majortom/misc/jquery.mosaic.js
new file mode 100644
index 00000000..19fcdfce
--- /dev/null
+++ b/majortom/misc/jquery.mosaic.js
@@ -0,0 +1,328 @@
+/*
+	 jQuery Mosaic v0.15.3
+	 https://github.com/tin-cat/jquery-mosaic
+	 A jquery plugin by Tin.cat to build beautifully arranged and responsive mosaics of html elements maintaining their original aspect ratio. Works wonderfully with images by creating a visually ordered and pleasant mosaic (much like mosaics on Flickr, 500px and Google+) without gaps between elements, but at the same time respecting aspect ratios. Reacts to window resizes and adapts responsively to any screen size. See it working on https://skinography.net
+ */
+
+(function($){
+
+	$.Mosaic = function(el, options) {
+		var base = this, o;
+			
+		base.el = el;
+		base.$el = $(el);
+
+		base.$el.data('Mosaic', base);
+
+		var baseWidth;
+		var refitTimeout = false;
+
+		base.init = function() {
+			// Priority of parameters : JS options > HTML data options > DEFAULT options
+			base.options = o = $.extend({}, $.Mosaic.defaults, base.$el.data(), options);
+			
+			$(base.el).addClass("jQueryMosaic");
+
+			if (o.outerMargin)
+				$(base.el).css('padding', o.outerMargin);
+
+			if (o.innerGap)
+				$(base.el).css('margin-bottom', o.innerGap * -1);
+
+			// If width and height are specified via attribute, set width and height as css properties to solve weird IE problem.
+			base.getItems().each(function(idx, item) {
+				if ($(item).attr('width'))
+					$(item).width($(item).attr('width'));
+				if ($(item).attr('height'))
+					$(item).height($(item).attr('height'));
+			});
+			
+			base.fit();
+
+			if (o.refitOnResize)
+				$(window).on('resize', null, null, function() {
+					if ($(base.el).is(':hidden'))
+						return;
+					if (o.refitOnResizeDelay) {
+						if (refitTimeout)
+							clearTimeout(refitTimeout);
+						refitTimeout = setTimeout(function() {
+							base.fit()
+						}, o.refitOnResizeDelay);
+					}
+					else
+						base.fit()
+				});
+		}
+
+		base.getItems = function() {
+			return $('> div:not([data-no-mosaic=true]), > a:not([data-no-mosaic=true]), > img:not([data-no-mosaic=true]), > video:not([data-no-mosaic=true])', base.el);
+		}
+
+		base.getItemAtIndex = function(index) {
+			if (!base.getItems()[index])
+				return false;
+			return $(base.getItems()[index]);
+		}
+
+		base.getItemsSubset = function(start, numberOf) {
+			var items = base.getItems();
+			if (!numberOf)
+				numberOf = items.length - start;
+			if (start > items.length)
+				return false;
+			if (start + numberOf > items.length)
+				numberOf = items.length - start;
+			return items.slice(start, start + numberOf);
+		}
+
+		base.isLastItemsSubset = function(start, numberOf) {
+			var items = base.getItems();
+			if (start > items.length)
+				return true;
+			if (start + numberOf > items.length)
+				return true;
+			return false;
+		}
+
+		base.getItemWidth = function(item) {
+			if ($(item).outerWidth())
+				return $(item).outerWidth();
+			if ($(item).attr('width'))
+				return $(item).attr('width');
+		}
+
+		base.getItemHeight = function(item) {
+			if ($(item).outerHeight())
+				return $(item).outerHeight();
+			if ($(item).attr('height'))
+				return $(item).attr('height');
+		}
+
+		base.getItemAspectRatio = function(item) {
+			if ($(item).data('aspect-ratio'))
+				return $(item).data('aspect-ratio');
+			if (base.getItemWidth(item) && base.getItemHeight(item)) {
+				var aspectRatio = base.getItemWidth(item) / base.getItemHeight(item);
+				$(item).data('aspect-ratio', aspectRatio);
+				return aspectRatio;
+			}
+			return o.defaultAspectRatio;
+		}
+
+		base.getItemWidthForGivenHeight = function(item, height) {
+			return height * base.getItemAspectRatio(item);
+		}
+
+		base.getItemHeightForGivenWidth = function(item, width) {
+			return width / base.getItemAspectRatio(item);
+		}
+
+		base.setItemSizeByGivenHeight = function(item, height, isDoNotSetHeight) {
+			var width = Math.floor(base.getItemWidthForGivenHeight(item, height));
+
+			$(item).width(width + 'px');
+			if (isDoNotSetHeight)
+				$(item).height('auto');
+			else
+				$(item).height(Math.floor(height));
+
+			base.handleHighResForItem(item);
+
+			return width;
+		}
+
+		base.handleHighResForItem = function(item) {
+			if (!o.highResImagesWidthThreshold)
+				return;
+
+			var width = $(item).width();
+
+			if (width > o.highResImagesWidthThreshold) {
+				// Set high res version images where needed
+
+				// Get all elements inside this item having a high-res-background-image-url data, including the item itself, if it has it also
+				var itemsWithHighResData = $('[data-high-res-background-image-url]', item);
+
+				if ($(item).data('high-res-background-image-url'))
+					itemsWithHighResData = $(itemsWithHighResData).add(item);
+
+				$(itemsWithHighResData).each(function() {
+					$(this).css('background-image', 'url("' + $(this).data('high-res-background-image-url') + '"');
+					$(this).addClass('highRes');
+				});
+
+
+				// Get all images inside this item having a high-res-image-url data, including the item itself, if it has it also
+				var itemsWithHighResData = $('[data-high-res-image-src]', item);
+
+				if ($(item).data('high-res-image-src'))
+					itemsWithHighResData = $(itemsWithHighResData).add(item);
+
+				$(itemsWithHighResData).each(function() {
+					$(this).attr('src', $(this).data('high-res-image-src'));
+					$(this).addClass('highRes');
+				});
+
+			}
+		}
+
+		base.calculateHeightToFit = function(items) {
+			var sumAspectRatios = 0;
+			items.each(function() {
+				sumAspectRatios += parseFloat(base.getItemAspectRatio(this));
+			});
+			return (baseWidth - (o.innerGap * (items.length - 1))) / sumAspectRatios;
+		}
+
+		// Based on the method by glen.codes to get subpixel attributes of elements: https://glen.codes/getting-the-subpixel-width-of-an-element/, to try and solve the bug in jQuery versions < 3: https://github.com/jquery/jquery/issues/1724
+		base.retrieveBaseWidth = function() {
+			var value = parseFloat($(base.el).width());
+			baseWidth = $.isNumeric(value) ? value : 0;
+		}
+
+		base.isBelowResponsiveWidthThreshold = function() {
+			return o.responsiveWidthThreshold && baseWidth < o.responsiveWidthThreshold;
+		}
+
+		base.fit = function() {
+			base.retrieveBaseWidth();
+
+			if (base.isBelowResponsiveWidthThreshold()) {
+
+				var items = base.getItems();
+
+				if (o.maxItemsToShowWhenResponsiveThresholdSurpassed) {
+					$(items).slice(o.maxItemsToShowWhenResponsiveThresholdSurpassed).remove();
+					items = $(items).slice(0, o.maxItemsToShowWhenResponsiveThresholdSurpassed);
+				}
+
+				items.each(function() {
+					var height = base.getItemHeightForGivenWidth(this, baseWidth);
+
+					$(this).width(baseWidth)
+
+					if ($(this).data('only-force-height-when-necessary'))
+						$(this).height('auto');
+					else
+						$(this).height(height);
+
+					if (o.innerGap)
+						$(this).css('margin-bottom', o.innerGap);
+				});
+
+				return;
+			}
+
+			var items, height;
+			var itemsToUse = 1;
+			var startIndex = 0;
+			var isAnyFitted = false;
+			var row = 1;
+			while (true) {
+
+				items = base.getItemsSubset(startIndex, itemsToUse);
+
+				if (base.isLastItemsSubset(startIndex, itemsToUse)) {
+					if (items.length) {
+						base.fitItems(items);
+					}
+					break;
+				}
+
+				height = base.calculateHeightToFit(items);
+
+				if (height > o.maxRowHeight) {
+					itemsToUse ++;
+					continue;
+				}
+
+				base.fitItems(items);
+				startIndex += itemsToUse;
+				itemsToUse = 1;
+				isAnyFitted = true;
+
+				if (!base.isBelowResponsiveWidthThreshold() && o.maxRows && row == o.maxRows) {
+					base.getItemsSubset(startIndex).each(function() { $(this).hide(); });
+					return;
+				}
+
+				row ++;
+			}
+
+			// If maxRowHeight has not been met at any point (might happen when specifying short maxRowHeights)
+			if (!isAnyFitted) {
+				if (o.showTailWhenNotEnoughItemsForEvenOneRow)
+					o.maxRowHeightPolicy = 'tail';
+				base.fitItems(base.getItems());
+			}
+		}
+
+		base.fitItems = function(items) {
+			var isDoNothing = false;
+			var height = base.calculateHeightToFit(items);
+			if (height > o.maxRowHeight) {
+				switch (o.maxRowHeightPolicy) {
+					case 'skip':
+						items.each(function() { $(this).hide(); });
+						return;
+						break;
+					case 'crop':
+						height = o.maxRowHeight;
+						break;
+					case 'oversize':
+						// Do nothing
+						var isDoNothing = true;
+						break;
+					case 'tail':
+						height = o.maxRowHeight;
+						var isTail = true;
+						break;
+				}
+			}
+			items.each(function() { $(this).show(); });
+			var accumulatedWidth = 0;
+			items.each(function(idx) {
+				accumulatedWidth += base.setItemSizeByGivenHeight(this, height, isDoNothing && $(this).data('only-force-height-when-necessary')); 
+				if (o.innerGap) {
+					$(this).css('margin-right', idx < items.length - 1 ? o.innerGap : 0);
+					$(this).css('margin-bottom', o.innerGap);
+				}
+			});
+			// Compensate the last element for accumulated floored decimal widths leaving a gap at the end
+			if (!isTail && accumulatedWidth != (baseWidth - ((items.length - 1) * o.innerGap))) {
+				difference = (baseWidth - ((items.length - 1) * o.innerGap)) - accumulatedWidth;
+				var width = items.last().width();
+				items.last().width(width + difference);
+			}
+		}
+
+		base.init();
+	}
+
+	$.Mosaic.defaults = {
+		maxRowHeight: 400, // The maximum desired height of rows
+		refitOnResize: true, // Whether to rebuild the mosaic when the window is resized or not
+		refitOnResizeDelay: false, // Milliseconds to wait after a resize event to refit the mosaic. Useful when creating huge mosaics that can take some CPU time on the user's browser. Leave it to false to refit the mosaic in realtime.
+		defaultAspectRatio: 1, // The aspect ratio to use when none has been specified, or can't be calculated
+		maxRowHeightPolicy: 'skip', // Sometimes some of the remaining items cannot be fitted on a row without surpassing the maxRowHeight. For those cases, choose one of the available settings for maxRowHeightPolicy: "skip": Does not renders the unfitting items. "crop": caps the desired height to the specified maxRowHeight, resulting in those items not keeping their aspect ratios. "oversize": Renders the items respecting their aspect ratio but surpassing the specified maxRowHeight
+		maxRows: false, // In some scenarios you might need fine control about the maximum number of rows of the mosaic. If specified, the mosaic won't have more than this number of rows. If responsiveWidthThreshold is specified, maxRows are not considered when the threshold has been reached.
+		highResImagesWidthThreshold: 350, // The item width on which to start using the the provided high resolution image instead of the normal one. High resolution images are specified via the "data-high-res-image-src" or "data-high-res-background-image-url" html element properties of each item.
+		outerMargin: 0, // A margin size in pixels for the outher edge of the whole mosaic
+		innerGap: 0, // A gap size in pixels to leave a space between elements
+		responsiveWidthThreshold: false, // The minimum width for which to keep building the mosaic. If specified, when the width is less than this, the mosaic building logic is not applied, and one item per row is always shown. This might help you avoid resulting item sizes that are too small and might break complex html/css inside them, specially when aiming for great responsive mosaics.
+		maxItemsToShowWhenResponsiveThresholdSurpassed: false, // If set (and also responsiveWidthThreshold is set), only this amount of items will be shown when the responsiveWidthThreshold is met
+		showTailWhenNotEnoughItemsForEvenOneRow: false, // If this is set to true, when there are not enough items to fill even a single row, they will be shown anyway even if they do not complete the row horizontally. If left to false, no mosaic will be shown in such occasions.
+	};
+
+	$.fn.Mosaic = function(options, params) {
+		return this.each(function(){
+			var me = $(this).data('Mosaic');
+			if ((typeof(options)).match('object|undefined'))
+				new $.Mosaic(this, options);
+			else
+				eval('me.'+options)(params);
+		});
+	}
+
+})(jQuery);
diff --git a/majortom/misc/pictures/lixo.txt b/majortom/misc/pictures/lixo.txt
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/majortom/misc/pictures/lixo.txt
@@ -0,0 +1 @@
+
diff --git a/majortom/misc/scripts.js b/majortom/misc/scripts.js
new file mode 100644
index 00000000..40a1f512
--- /dev/null
+++ b/majortom/misc/scripts.js
@@ -0,0 +1,31 @@
+$(document).ready(function() {
+    const gallery = $('#gallery');
+
+    // List of images, add your image filenames here
+    const images = [
+        // Add more images with their correct paths
+    ];
+
+    // Function to load images into the gallery
+    function loadImages() {
+        images.forEach(image => {
+            const imgElement = $('<img/>', {
+                src: image,
+                alt: "Gallery Image",
+                css: {
+                    display: 'inline-block',
+                    width: '100%',
+                    height: 'auto',
+                    objectFit: 'cover'
+                }
+            });
+            gallery.append(imgElement);
+        });
+
+        // Initialize the Mosaic layout
+        gallery.mosaic();
+    }
+
+    // Call the function to load images
+    loadImages();
+});
diff --git a/majortom/misc/styles.css b/majortom/misc/styles.css
new file mode 100644
index 00000000..c3d97674
--- /dev/null
+++ b/majortom/misc/styles.css
@@ -0,0 +1,62 @@
+
+
+body {
+  margin: 0;
+  font-family: 'Public Pixel', sans-serif;                                                
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #333;
+  position: fixed; /* Set the navbar to fixed position */
+  top: 0; /* Position the navbar at the top of the page */
+  width: 100%; /* Full width */
+}
+
+.topnav a {
+  float: right;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 4px 12px;
+  text-decoration: none;
+  font-size: 8px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #d7fc05;
+  color: black;
+}
+
+.topnav .icon {
+  display: none;
+}
+
+@media screen and (max-width: 600px) {
+  .topnav a:not(:first-child) {display: none;}
+  .topnav a.icon {
+    float: right;
+    display: block;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .topnav.responsive {position: relative;}
+  .topnav.responsive .icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: left;
+  }
+}
+
+