7 files changed, 292 insertions, 0 deletions
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..fa230ed
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,286 @@
+body,html {
+    padding: 0;
+    margin: 0;
+    background-color: #eee;
+    font-family: Arial, Helvetica, sans-serif;
+    overflow-x: hidden;
+}
+
+#Main {
+    max-width: 1000px;
+    width: 100%;
+    background-color: white;
+    margin: 0 auto;
+}
+
+.navBar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.navBar li {
+    margin: 0;
+    padding: 0;
+}
+
+img.logo {
+    width: 178px;
+    height: 60px;
+}
+
+.navBar ul li {
+    display: inline-block;
+}
+
+
+.navBar ul li a {
+    text-decoration: none;
+    padding: 10px 15px;
+    color: gray;
+}
+
+.navBar ul li a:hover {
+    text-decoration: underline;
+}
+
+#heroImage {
+    background-image: url('/assets/images/code-ga774fc2f1_1920.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 100px 20px;
+    color: white;
+    text-align: center;
+    
+}
+
+#heroImage h1 {
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+}
+
+#heroImage p {
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
+}
+
+#heroImage a {
+    color: white;
+    padding: 10px 15px;
+    border: 1px solid;
+    background-color: rgba(16, 16, 232, 0.722);
+    display: inline-block;
+    border-radius: 4px;
+}
+
+#mainContent {
+    margin: 10px 20px;
+}
+
+#mainContent h2 {
+    text-align: center;
+}
+
+#blog ul {
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+#blog ul li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 320px;
+}
+
+#blog img {
+    width: 100%;
+    height: auto;
+    border-radius: 1em;
+}
+
+#our-work ul {
+    padding: 0;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+}
+
+#our-work ul li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 320px;
+}
+
+#our-work ul li img {
+    width: 100%;
+    height: auto;
+    border-radius: 1em;
+}
+
+/* Blog post container links */
+#blog ul li a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
+    background-color: #fff;
+}
+
+/* Hover effect for card lift */
+#blog ul li a:hover {
+    /* transform: translateY(-5px); */
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* Blog post title */
+#blog ul li h3 {
+    font-size: 1.25em;
+    margin: 10px 15px 5px 15px;
+    color: #333;
+    /* transition: color 0.2s ease; */
+}
+
+/* Blog post date */
+.post-date {
+    font-size: 0.9em;
+    color: #888;
+    margin-bottom: 10px;
+  }
+
+/* Change title color on hover for visual feedback */
+#blog ul li a:hover h3 {
+    color: #0d47a1; /* deep brand blue, adjust as needed */
+}
+
+/* Blog description */
+#blog ul li p {
+    font-size: 0.95em;
+    margin: 0 15px 15px 15px;
+    color: #666;
+    line-height: 1.4;
+}
+
+#solutions p { text-align: center; }
+
+/* Blog Article Page */
+
+#Blog {
+    max-width: 800px;
+    width: 100%;
+    margin: 30px auto;
+    padding: 0 20px;
+}
+
+#Blog .featured-image {
+    width: 100%;
+    height: auto;
+    border-radius: 8px 8px;
+}
+
+/* Article title */
+#Blog h1 {
+    font-size: 2em;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #333;
+}
+
+/* Article text */
+#Blog p {
+    line-height: 1.7;
+    font-size: 1.05em;
+    color: #444;
+    text-align: justify;
+}
+
+footer {
+    width: 100%;
+    background-color: #fff;
+    text-align: center;
+    color: #9f9f9f;
+}
+
+footer a {
+    color: #444;
+    text-decoration: none;
+}
+
+footer a:hover {
+    color: #666;
+    text-decoration: underline;
+}
+
+/* Mobile Styles */
+
+.hamburger {
+    display: none; /* hidden by default */
+    font-size: 30px;
+    cursor: pointer;
+    padding: 10px 20px;
+}
+
+@media (max-width: 768px) {
+    .hamburger {
+        display: block;
+    }
+    
+    .navBar ul {
+        display: none; /* hide nav links initially on mobile */
+        flex-direction: column;
+        background-color: white;
+        width: 100%;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+    .navBar ul.show {
+        display: flex; /* show when toggled */
+    }
+
+    .navBar ul li {
+        display: block;
+    }
+}
+
+@media (max-width: 600px) {
+    #heroImage {
+        padding: 50px 10px;
+    }
+    .navBar ul {
+        flex-direction: column;
+    }
+    .navBar ul li {
+        display: block;
+        text-align: center;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    #Blog {
+        margin: 20px auto;
+        padding: 0 10px;
+    }
+
+    #Blog h1 {
+        font-size: 1.5em;
+    }
+
+    #Blog p {
+        font-size: 1em;
+    }
+}
diff --git a/assets/images/STG-logo-v1.png b/assets/images/STG-logo-v1.png
new file mode 100644
index 0000000..eac4f7d
--- /dev/null
+++ b/assets/images/STG-logo-v1.png
diff --git a/assets/images/cbc-screenshot-2025-07-03.png b/assets/images/cbc-screenshot-2025-07-03.png
new file mode 100644
index 0000000..252e1dd
--- /dev/null
+++ b/assets/images/cbc-screenshot-2025-07-03.png
diff --git a/assets/images/code-ga774fc2f1_1920.jpg b/assets/images/code-ga774fc2f1_1920.jpg
new file mode 100644
index 0000000..bd71d91
--- /dev/null
+++ b/assets/images/code-ga774fc2f1_1920.jpg
diff --git a/assets/images/pexels-designecologist-2526105.jpg b/assets/images/pexels-designecologist-2526105.jpg
new file mode 100644
index 0000000..08be36f
--- /dev/null
+++ b/assets/images/pexels-designecologist-2526105.jpg
diff --git a/assets/images/pexels-markus-spiske-2004161.jpg b/assets/images/pexels-markus-spiske-2004161.jpg
new file mode 100644
index 0000000..315e7c4
--- /dev/null
+++ b/assets/images/pexels-markus-spiske-2004161.jpg
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..c8741b0
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,6 @@
+    const hamburger = document.querySelector(".hamburger");
+    const navLinks = document.querySelector(".navBar ul");
+
+    hamburger.addEventListener("click", () => {
+        navLinks.classList.toggle("show");
+    });