Update page layout

grzpiotrowski · Mar 26, 2024 · 9d2410d · 9d2410d
1 parent 850d441
commit 9d2410d
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 44 deletions.
diff --git a/project-page/index.html b/project-page/index.html
@@ -7,57 +7,98 @@
   <link href="./style.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100 font-sans leading-normal tracking-normal">
-  <div class="container mx-auto p-8">
-
+  <div class="container mx-auto p-2">
     <div class="flex">
-      <div class="w-1/3 flex flex-col justify-between bg-blue-100">
-          <div class="flex items-center p-8 space-x-4">
-              <img src="./assets/images/author-image.jpeg" alt="Author Image" class="h-auto w-48 rounded-lg shadow-lg">
-              <div>
-                  <h2 class="text-2xl text-gray-800 font-semibold">Grzegorz Piotrowski</h2>
-                  <p class="text-md text-gray-800">Student Number: 20099926</p>
-              </div>
-          </div>
-          <div class="p-8">
-            <p class="text-xl text-gray-700">Project Type: Web App, IoT</p>
-          </div>
+      <div class="container flex-col w-full md:w-1/3 justify-between bg-blue-100">
+        <div class="flex items-center p-8 space-x-4">
+            <img src="./assets/images/author-image.jpeg" alt="Author Image" class="h-auto w-48 rounded-lg shadow-lg">
+            <div class="container">
+                <h2 class="text-2xl text-gray-800 font-semibold">Grzegorz Piotrowski</h2>
+                <p class="text-md text-gray-800">Student Number: 20099926</p>
+            </div>
+        </div>
+        <div class="container p-2">
+          <p>
+            SiteVisor is a Digital Twin based web app for environmental monitoring of buildings, with elements of asset management. 
+            At the core of the user interface is an interactive 3D viewer, rendering a building and the IoT sensors. 
+            With only a few clicks we can set up our 3D environment from scratch, by simply sketching out rooms and creating virtual 
+            sensors and configuring the data connection from their physical counterparts.
+            The application is deployed on Kubernetes and uses Strimzi operator to run Apache Kafka cluster, 
+            which is the heart and arteries of the whole system.
+          </p>
         </div>
+        <div class="p-2">
+          <p class="text-lg text-gray-700">Project Type: Web App, IoT</p>
+        </div>
+      </div>
         <!-- Landscape Image for md screens and up -->
         <div class="hidden md:block w-full md:w-2/3">
-          <img src="./assets/images/sitevisor_1920x1080.png" alt="Project image" class="w-full h-full object-cover">
+          <div class="container mx-auto items-center justify-center h-full px-4">
+            <img src="./assets/images/sitevisor_1920x1080.png" alt="Project image">
+            <div class="flex justify-center space-x-4 mt-8">
+              <a href="https://github.com/grzpiotrowski/sitevisor-project" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/github-mark.svg" class="h-6" />
+                GitHub
+              </a>
+              <a href="" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/yt_icon.svg" class="h-6" />
+                Video
+              </a>
+              <a href="" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/document-icon.png" class="h-6" />
+                Report
+              </a>
+              <a href="" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/document-icon.png" class="h-6" />
+                Proposal
+              </a>
+              <a href="" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/slides-icon.svg" class="h-6" />
+                Slides
+              </a>
+              <a href="https://linkedin.com/in/g-piotrowski" class="btn btn-primary font-bold">
+                <img src="./assets/images/icons/linkedin-icon.svg" class="h-6" />
+                LinkedIn
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
     <!-- Portrait Image for sm screens and smaller -->
-    <div class="block md:hidden w-full">
-      <img src="./assets/images/sitevisor_1920x1080_portrait.png" alt="Project image" class="w-full h-full object-cover">
-    </div>
-
-    <div class="flex justify-center space-x-4 mt-8">
-      <a href="https://github.com/grzpiotrowski/sitevisor-project" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/github-mark.svg" class="h-6" />
-        GitHub
-      </a>
-      <a href="" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/yt_icon.svg" class="h-6" />
-        Video
-      </a>
-      <a href="" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/document-icon.png" class="h-6" />
-        Report
-      </a>
-      <a href="" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/document-icon.png" class="h-6" />
-        Proposal
-      </a>
-      <a href="" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/slides-icon.svg" class="h-6" />
-        Slides
-      </a>
-      <a href="https://linkedin.com/in/g-piotrowski" class="btn btn-primary font-bold">
-        <img src="./assets/images/icons/linkedin-icon.svg" class="h-6" />
-        LinkedIn
-      </a>
+    <div class="container mx-auto items-center justify-center">
+      <div class="block md:hidden w-full">
+        <img src="./assets/images/sitevisor_1920x1080_portrait.png" alt="Project image" class="w-full h-full object-cover">
+        <div class="flex justify-center space-x-4 mt-2">
+          <a href="https://github.com/grzpiotrowski/sitevisor-project" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/github-mark.svg" class="h-6" />
+            GitHub
+          </a>
+          <a href="" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/yt_icon.svg" class="h-6" />
+            Video
+          </a>
+          <a href="" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/document-icon.png" class="h-6" />
+            Report
+          </a>
+        </div>
+        <div class="flex justify-center space-x-4 mt-2 mb-2">
+          <a href="" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/document-icon.png" class="h-6" />
+            Proposal
+          </a>
+          <a href="" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/slides-icon.svg" class="h-6" />
+            Slides
+          </a>
+          <a href="https://linkedin.com/in/g-piotrowski" class="btn btn-primary font-bold">
+            <img src="./assets/images/icons/linkedin-icon.svg" class="h-6" />
+            LinkedIn
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </body>

diff --git a/project-page/package.json b/project-page/package.json
@@ -9,7 +9,7 @@
     "build:html": "eleventy ",
     "build:css": "tailwindcss -i ./style.css -o ./_site/style.css",
     "dev:css": "tailwindcss -i ./style.css -o ./_site/style.css --watch",
-    "dev:html": "eleventy --serve"
+    "dev:html": "eleventy --serve --port=4000"
   },
   "keywords": [],
   "author": "",