Chane browser sync task to proxy in the backend from the server and also serve the local files. Fixed some styling issues with the images and buttons

2021-09-23 15:25:38 +01:00
parent c323924d77
commit 33dd85d162
10 changed files with 7375 additions and 14 deletions
@@ -79,11 +79,14 @@ gulp.task("deploy", () =>
 gulp.task("browserSync", () =>
 {
 	browserSync.init({
-		server: {
-			baseDir: "dist"
-		}
+		// server: {
+		// 	baseDir: "dist"
+		// },
+		proxy: "https://rohitpai.tech/",
+		serveStatic: ["./dist"]
+
 	});
 	gulp.watch("dist").on("change", browserSync.reload)
 });

-gulp.task("default", gulp.series(gulp.parallel("watchFiles", "deploy")));
+gulp.task("default", gulp.series(gulp.parallel("watchFiles", "browserSync")));
@@ -20,6 +20,7 @@
    "gulp-htmlmin": "^5.0.1",
    "gulp-terser": "^2.0.1",
    "gulp-uglify": "^3.0.2",
+    "jest": "^27.2.0",
    "normalize.css": "^8.0.1",
    "require": "^2.4.20",
    "vinyl-ftp": "^0.6.1"
@@ -31,6 +31,10 @@
    --headingFS: 1.5rem;
 }

+*{
+    box-sizing: border-box;
+}
+
 /**** Media Queries *****/

@media screen and (max-width: 90em) {
@@ -254,7 +258,6 @@
        flex-direction: column;
        justify-content: center;
        align-items: center;
-        padding: 0;
    }

    section#projects .mainProj {
@@ -265,12 +268,7 @@
    }

    section#projects .mainProj img {
-        padding-right: 1em;
-        gap: 1em;
-    }
-
-    section#projects .mainProj, section#projects .otherProj {
-        align-items: unset;
+        padding: 0 1em;
    }

    section#projects .mainProj .flexRow {
@@ -283,6 +281,33 @@
        justify-content: center;
        align-items: center;
    }
+
+    section#projects .otherProj {
+        width: 100%;
+    }
+
+    section#projects .otherProj .btn{
+        width: 10em;
+        text-align: center;
+    }
+
+    section#projects .otherProj > div .oProjItem, section#projects .otherProj > div .oProjItem:nth-child(2) {
+        flex-direction: column;
+    }
+
+    section#projects .oProjItem .flexCol div:nth-child(2) {
+        justify-content: center;
+        margin-left: 0;
+        margin-bottom: 1em;
+    }
+
+    section#projects .otherProj > a {
+        margin-left: 3em;
+        margin-right: 3em;
+        text-align: center;
+
+    }
+
 }

@media screen and (max-width: 55em) {
@@ -333,4 +358,16 @@
        padding: 0.1em 1em;
    }

+    /**** Projects Styles ***/
+
+    section#projects .mainProj .flexCol {
+        flex-direction: column;
+    }
+
+    section#projects .oProjItem .flexCol div:nth-child(2) {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
 }
@@ -79,7 +79,9 @@ section#projects .otherProj > div .oProjItem:nth-child(2) {
 }

 section#projects .otherProj .oProjItem img {
-    max-width: 10rem;
+    max-width: 30rem;
+    width: 100%;
+    padding: 0 1em;
 }

 section#projects .oProjItem .flexCol div:nth-child(2) {
@@ -40,6 +40,7 @@ a.btn, form input[type="submit"] {
    border-radius: 0.625em;
    border: 0.3215em solid var(--primaryDefault);
    color: #FFFFFF;
+    text-align: center;
 }

 a.btn:hover {
@@ -137,6 +137,7 @@
                <a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
            </div>
        </section>
+
        <section id="contact">
            <div id="findme">
                <h1>find me</h1>
@@ -178,6 +179,7 @@
                </form>
            </div>
        </section>
+
        <footer class="flexRow">
            <p>&copy; 2021 Rohit Pai all rights reserved</p>
            <button class="goBackToTop"></button>
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>