Add overwrite to cli command

.github/workflows/deploy.yml

@@ -79,7 +79,7 @@ jobs:
         uses: azure/CLI@v1
         with:
           inlineScript: |
-            az storage blob upload-batch --account-name ${{ secrets.AZURE_APP_NAME }}storage -d '$web' -s .
+            az storage blob upload-batch --overwrite --account-name ${{ secrets.AZURE_APP_NAME }}storage -d '$web' -s .
 
       # Log out when finished
       - name: logout

gatsby-config.js

@@ -23,7 +23,26 @@ module.exports = {
         patterns: ["**/*.mdx", "**/*.png", "**/*.jpeg"],
       },
     },
-    "gatsby-plugin-mdx",
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        gatsbyRemarkPlugins: [
+          {
+            resolve: "gatsby-remark-embed-video",
+            options: {
+              width: 800,
+              ratio: 1.77, // Optional: Defaults to 16/9 = 1.77
+              height: 400, // Optional: Overrides optional.ratio
+              related: false, //Optional: Will remove related videos from the end of an embedded YouTube video.
+              noIframeBorder: true, //Optional: Disable insertion of <style> border: 0
+              loadingStrategy: 'lazy', //Optional: Enable support for lazy-load offscreen iframes. Default is disabled.
+              containerClass: "videoContainer", //Optional: Custom CSS class for iframe container, for multiple classes separate them by space
+              iframeId: false, //Optional: if true, iframe's id will be set to what is provided after 'video:' (YouTube IFrame player API requires iframe id)
+            },
+          },
+        ],
+      }
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
-    "build": "gatsby build",
+    "build": "gatsby clean && gatsby build",
     "serve": "gatsby serve",
     "clean": "gatsby clean"
   },
@@ -35,6 +35,7 @@
     "gatsby-plugin-sharp": "^4.8.1",
     "gatsby-plugin-sitemap": "^5.8.0",
     "gatsby-plugin-zendesk-chat": "^1.1.4",
+    "gatsby-remark-embed-video": "^3.1.1",
     "gatsby-source-filesystem": "^4.8.1",
     "gatsby-source-git": "^1.1.0",
     "gatsby-transformer-sharp": "^4.8.0",

src/components/technologies/angular/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/angular/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const AngularTech = () => {
+  // TODO: Replace link
+  const link = "https://www.ssw.com.au/ssw/Consulting/Angular.aspx"
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/angular-logo.png"
+                    alt="Angular"
+                />
+        </figure>
+        <p>
+        Angular is a Google-built and maintained Javascript framework allows us to develop fast, responsive, and interaction-rich applications. It has the abilities to build apps for any deployment target - web, mobile web, native mobile and native desktop.
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default AngularTech;

src/components/technologies/azure/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/azure/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const AzureTech = () => {
+  // TODO: Replace link
+  const link = "https://www.ssw.com.au/ssw/Consulting/Azure.aspx"
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/ms-azure-logo.png"
+                    alt="azure"
+                />
+        </figure>
+        <p>
+          Microsoft Azure provides on-demand infrastructure that scales and adapts to your changing business needs. Whether you are creating new applications or running existing applications we provide the best price-performance and end-to-end support.
+          <a href={link}>Read more</a>
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default AzureTech;

src/components/technologies/jquery/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/jquery/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const JQueryTech = () => {
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/jquery-logo.png"
+                    alt="JQuery"
+                />
+        </figure>
+        <p>
+        JQuery is a new cross-platform front-end DOM manipulation JavaScript library that helps developers use JavaScript on websites. It is designed to make it easier to maintain the HTML script at client sides. JQuery is one of the most widely used JavaScript libraries in the world.
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default JQueryTech;

src/components/technologies/net/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/net/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const DotnetTech = () => {
+  // TODO: Replace link
+  const link = "https://www.ssw.com.au/ssw/Consulting/DatabaseDevelopment.aspx"
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/net-logo.png"
+                    alt=".NET"
+                />
+        </figure>
+        <p>
+        .NET 5 (was .NET Core) is a free, cross-platform, open source developer platform for building many different types of applications. With .NET, you can use multiple languages, editors, and libraries to build for web, mobile, desktop, games, and IoT.
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default DotnetTech;

src/components/technologies/node-js/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/node-js/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const NodeJsTech = () => {
+    return (
+        <div className={'col-md-6'}>
+            <article className={skill} data-aos="flip-left">
+                <figure>
+                    <StaticImage
+                        src="../../../assets/images/consulting/js-logo.png"
+                        alt="Node JS"
+                    />
+                </figure>
+                <p>
+                    Powered by JavaScript, Node.js works as a cross-platform run-time environment. It has an event-driven architecture capable of asynchronous I/O which helps developers build effective real-time web applications. As one of the biggest open-source platforms, Node.js is light and powerful.
+                </p>
+            </article>
+        </div>
+    );
+};
+
+export default NodeJsTech;

src/components/technologies/react/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/react/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const ReactTech = () => {
+  // TODO: Replace link
+  const link = "https://www.ssw.com.au/ssw/Consulting/React.aspx"
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/react-icon.png"
+                    alt="React"
+                />
+        </figure>
+        <p>
+          Build native mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
+          <a href={link}>Read more</a>
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default ReactTech;

src/components/technologies/sql-server/index.module.css

@@ -0,0 +1,20 @@
+.skill {
+    background-color: #f5f5f5;
+    margin: 20px 15px 60px 15px;
+    min-height: 410px;
+    padding: 41px;
+    border-bottom: 2px solid #cc4141;
+}
+
+.skill p {
+    font-size: 1.2rem;
+    text-align: justify;
+    margin-top: 14px;
+    padding: 0 20px;
+    font-weight: 300;
+    color: #000;
+}
+
+.skill p a {
+    margin-left: 1rem;
+}

src/components/technologies/sql-server/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+import { skill } from './index.module.css';
+
+const SqlServerTech = () => {
+  // TODO: Replace link
+  const link = "https://www.ssw.com.au/ssw/Consulting/DatabaseDevelopment.aspx"
+  return (
+    <div className={'col-md-6'}>
+      <article className={skill} data-aos="flip-left">
+        <figure>
+        <StaticImage
+                    src="../../../assets/images/consulting/sql-server-logo.png"
+                    alt="SQL Server"
+                />
+        </figure>
+        <p>
+          Whether on Azure or on premises, SQL Server is Microsoft's enterprise level database platform, in which SSW has a lot of expertise. Being used as the backend database for the majority of Microsoft based IT solutions, it has numerous features to ensure high availability, scalability, data integrity & performance.
+          <a href={link}>Read more</a>
+        </p>
+      </article>
+    </div>
+  );
+};
+
+export default SqlServerTech;