Merge branch 'master' of repo.kinesis.games:root/proximity-demo

add ci/cd
implement transition sidebar + smooth scroll + mini improvements
2021-04-04 01:57:19 +04:00 · 2021-04-04 01:56:58 +04:00 · 2021-03-05 11:19:44 +04:00 · 2021-03-05 10:35:03 +04:00 · 2021-03-05 10:21:20 +04:00 · 2021-03-04 21:15:27 +04:00
14 changed files with 97 additions and 56 deletions
--- a/.gitignore
+++ b/.gitignore
@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*

 public/styles.css
+package-lock.json
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -14,4 +14,4 @@ deploy:
    - chmod 644 ~/.ssh/known_hosts
    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
  script:
-    - ssh ubuntu@kinesis.games "cd /var/www/proximity-demo/ && sudo bash buildScript.sh"
+    - ssh edgeking810@kinesis.games "cd /var/www/proximity-demo/ && sudo bash buildScript.sh"
--- a/buildScript.sh
+++ b/buildScript.sh
@ -4,4 +4,4 @@ git pull origin master
 npm i
 npm run-script build
 chown -R root:www-data .
-systemctl reload apache2
+systemctl reload nginx
--- a/package-lock.json
+++ b/package-lock.json
@ -1,5 +1,5 @@
 {
-  "name": "@edgeking810/create-react-app",
+  "name": "proximitydemo",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
--- a/src/App.js
+++ b/src/App.js
@ -13,15 +13,27 @@ export default function App() {
  const [showCookies, setShowCookies] = useState(true);

  const { width } = useWindowSize();
+  //   console.log(width);
+
+  const scrollToElement = (e, id) => {
+    e.preventDefault();
+
+    window.scroll({
+      top: document.getElementById(id).getBoundingClientRect().top,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };

  return (
    <div className="w-full overflow-x-hidden">
-      {width > 660 ? (
+      {width > 1000 ? (
        <HeaderD
          currentLanguage={currentLanguage}
          setCurrentLanguage={setCurrentLanguage}
          showCookies={showCookies}
          setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
        />
      ) : (
        <HeaderM
@ -29,6 +41,7 @@ export default function App() {
          setCurrentLanguage={setCurrentLanguage}
          showCookies={showCookies}
          setShowCookies={setShowCookies}
+          scrollToElement={scrollToElement}
        />
      )}

--- a/src/assets/images/pencil.gif
+++ b/src/assets/images/pencil.gif
--- a/src/assets/images/pencil.png
+++ b/src/assets/images/pencil.png
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@ -14,28 +14,17 @@ export default function Footer() {
      className="w-full flex flex-col items-center sm:justify-start justify-center"
      id="footer"
    >
-      <div className="w-full sm:px-20 px-4 flex justify-end">
+      <div className="w-full sm:px-20 px-4 flex sm:justify-end justify-center">
        <button
          onClick={() => handleScroll()}
-          className="font-avenirbook text-sm underline mb-4 text-gray-900 hover:no-underline focus:no-underline"
+          className="font-avenirbook text-sm mb-4 text-gray-900 hover:text-red-400 focus:text-red-400"
        >
-          Return to top
+          &#x2191; Return to top
        </button>
      </div>

-      <div className="w-full sm:px-20 px-4 flex sm:flex-row flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
-        <div className="font-avenirbook text-gray-100 text-sm sm:w-auto w-full sm:my-0 my-2 sm:text-left text-center">
-          &copy; Proximity Worldwide 2018. All Rights Reserved.{' '}
-          <a
-            href="/"
-            className="underline hover:no-underline focus:no-underline"
-          >
-            Privacy Statement
-          </a>
-          .
-        </div>
-
-        <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:mb-0 mb-2">
+      <div className="w-full sm:px-20 px-4 flex sm:flex-row-reverse flex-col sm:justify-between justify-center sm:items-center bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 sm:h-24">
+        <div className="flex items-center h-full sm:w-auto w-full sm:justify-end justify-center sm:my-0 my-4">
          <a
            href="/"
            className="w-10 h-10 flex items-center justify-center ri-linkedin-fill rounded-full bg-white text-orange-500 text-xl ml-2"
@ -55,6 +44,17 @@ export default function Footer() {
            {' '}
          </a>
        </div>
+
+        <div className="font-avenirbook text-gray-100 text-sm sm:w-auto w-full sm:text-left text-center sm:mb-0 mb-4">
+          &copy; Proximity Worldwide 2018. All Rights Reserved.{' '}
+          <a
+            href="/"
+            className="underline hover:no-underline focus:no-underline"
+          >
+            Privacy Statement
+          </a>
+          .
+        </div>
      </div>
    </div>
  );
--- a/src/components/HeaderD.js
+++ b/src/components/HeaderD.js
@ -8,9 +8,10 @@ export default function HeaderD({
  setCurrentLanguage,
  showCookies,
  setShowCookies,
+  scrollToElement,
 }) {
  const headerLinkClasses =
-    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg';
+    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg mx-4';

  const cookies = (
    <div className="w-full h-20 bg-indigo-1000 flex items-center justify-center z-10 fixed bottom-0">
@ -44,7 +45,7 @@ export default function HeaderD({
          className="h-full object-scale-down"
        />

-        <div className="w-2/5 h-full flex items-center justify-between">
+        <div className="h-full flex items-center justify-end">
          <a className={headerLinkClasses} href="/">
            About
          </a>
@ -93,8 +94,11 @@ export default function HeaderD({
      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
        <a
          href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
-        />
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-22"
+        >
+          {' '}
+        </a>
      </div>

      {showCookies && cookies}
--- a/src/components/HeaderM.js
+++ b/src/components/HeaderM.js
@ -3,32 +3,39 @@ import React, { useState } from 'react';
 import proximity_logo from '../assets/images/proximity_logo.svg';
 import backgroundVideo from '../assets/videos/video.mp4';

+import '../styles/sidebar.css';
+
 export default function HeaderD({
  currentLanguage,
  setCurrentLanguage,
  showCookies,
  setShowCookies,
+  scrollToElement,
 }) {
  const [showSidebar, setShowSidebar] = useState(false);

  const headerLinkClasses =
-    'text-gray-100 font-avenirbook font-normal hover:underline focus:underline text-lg w-full bg-gray-900 my-1 py-2 text-center opacity-75 rounded';
+    'text-gray-900 font-avenirbook font-normal hover:underline focus:underline text-xl w-full my-1 py-2 text-center';

  const sidebar = (
-    <div className="z-30 w-5/6 h-full flex flex-col justify-start bg-gray-700 bg-opacity-75 pt-20 px-2 fixed">
-      <a className={headerLinkClasses} href="/">
+    <div
+      className={`z-20 w-full h-full flex flex-col justify-center bg-gray-100 bg-opacity-95 fixed ${
+        showSidebar ? 'sidebar-left-nav closed' : 'sidebar-left-nav'
+      }`}
+    >
+      <a className={headerLinkClasses} href="/about">
        About
      </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/work">
        Work
      </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/latest">
        Latest
      </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/people-and-careers">
        People & Careers
      </a>
-      <a className={headerLinkClasses} href="/">
+      <a className={headerLinkClasses} href="/contact">
        Contact
      </a>
    </div>
@ -60,12 +67,12 @@ export default function HeaderD({
  );

  return (
-    <div className="h-screen w-full">
-      <div className="absolute z-20 h-12 w-full flex items-center justify-between mt-4 px-4">
+    <div className="h-80 w-full">
+      <div className="absolute h-12 w-full flex items-center justify-between mt-4 px-4">
        <img
          src={proximity_logo}
          alt="Proximity Logo"
-          className="h-full object-scale-down"
+          className="h-full object-scale-down z-20"
        />

        <div className="w-2/5 h-full flex items-center justify-end">
@ -85,7 +92,7 @@ export default function HeaderD({
            Contact
          </a> */}

-          <div className="border h-10 px-2 flex justify-between items-center">
+          <div className="border h-10 px-2 flex justify-between items-center z-20">
            <button
              className={`uppercase font-avenirbook text-lg text-gray-200 mr-1 ${
                currentLanguage === 'en' ? 'font-bold' : ''
@ -107,34 +114,37 @@ export default function HeaderD({
          <button
            className={`ml-4 w-10 h-10 flex justify-center items-center ri-${
              showSidebar ? 'close' : 'menu'
-            }-fill bg-${
-              showSidebar ? 'red' : 'blue'
-            }-500 opacity-75 text-lg font-bold text-gray-100 rounded-sm`}
+            }-fill text-gray-${
+              showSidebar ? '900' : '100'
+            } opacity-75 text-3xl font-bold rounded-sm z-40`}
            onClick={() => setShowSidebar((current) => !current)}
          />
        </div>
      </div>

-      <div className="absolute z-10 w-full h-full flex items-center justify-center">
-        <p className="w-5/6 font-avenirblack text-center text-4xl font-bold text-gray-200">
+      <div className="absolute z-10 w-full h-80 flex items-center justify-center">
+        <p className="w-5/6 font-avenirblack text-center text-3xl font-bold text-gray-200">
          We make people
          <br />
          more valuable to brands
        </p>
      </div>

-      <div className="absolute z-10 w-full h-full flex flex-col items-center justify-end">
+      <div className="absolute z-10 w-full h-108 flex flex-col items-center justify-end">
        <a
          href="#part-one"
-          className="w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
-        />
+          onClick={(e) => scrollToElement(e, 'part-one')}
+          className="animate-bounce w-12 h-12 flex justify-center items-center text-4xl text-gray-200 ri-arrow-down-fill rounded-full border hover:border-white border-transparent mb-32"
+        >
+          {' '}
+        </a>
      </div>

      {showCookies && cookies}
-      {showSidebar && sidebar}
+      {sidebar}

      <video
-        className="h-full w-full bg-gray-900 z-0 object-cover absolute"
+        className="h-80 w-full bg-gray-900 z-0 object-cover absolute"
        autoPlay
        loop
        muted
--- a/src/components/PartOne.js
+++ b/src/components/PartOne.js
@ -5,14 +5,14 @@ import part1banner from '../assets/images/part-1-banner.png';
 export default function PartOne() {
  return (
    <div
-      className="w-full h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center sm:justify-start justify-center sm:py-12 sm:px-20 p-4 sm:my-0 my-8"
      id="part-one"
    >
-      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack">
+      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack tracking-wide">
        How we do it
      </div>

-      <div className="text-gray-900 sm:text-2xl text-lg font-avenirbook text-center mb-4">
+      <div className="text-gray-900 sm:text-2xl text-xl font-avenirbook text-center mb-4">
        We use data-driven creativity
        <br />
        to solve business problems
--- a/src/components/PartTwo.js
+++ b/src/components/PartTwo.js
@ -1,20 +1,16 @@
 import React from 'react';

-import pencil from '../assets/images/pencil.png';
+import pencil from '../assets/images/pencil.gif';

 export default function PartTwo() {
  return (
    <div
-      className="w-full h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4"
+      className="w-full sm:h-screen flex flex-col items-center justify-center sm:py-16 sm:px-20 p-4 my-8"
      id="part-two"
    >
-      <img
-        src={pencil}
-        alt="pencil"
-        className="object-cover sm:h-8 h-4 sm:mb-8 mb-4"
-      />
+      <img src={pencil} alt="pencil" className="object-cover sm:h-32 h-20" />

-      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4">
+      <div className="text-red-600 uppercase text-sm font-bold font-avenirblack sm:mb-8 mb-4 tracking-wide sm:w-auto w-1/2 sm:text-left text-center">
        Business Problems we've solved
      </div>

--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@ -0,0 +1,13 @@
+.sidebar-left-nav {
+  -webkit-transform: translate3d(-100%, 0px, 0px);
+  transform: translate3d(-100%, 0px, 0px);
+  visibility: visible;
+  transition: all 0.5s ease 0s;
+  -webkit-transition: all 0.5s ease 0s;
+}
+
+.closed {
+  -webkit-transform: translate3d(0px, 0px, 0px);
+  transform: translate3d(0px, 0px, 0px);
+  visibility: visible;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -439,6 +439,10 @@ module.exports = {
      25: '0.25',
      50: '0.5',
      75: '0.75',
+      80: '0.80',
+      85: '0.85',
+      90: '0.90',
+      95: '0.95',
      100: '1',
    },
    order: {
Author	SHA1	Message	Date
Kishan Takoordyal	2673b2f5d6	Merge branch 'master' of repo.kinesis.games:root/proximity-demo	2021-04-04 01:57:19 +04:00
Kishan Takoordyal	1e0f3b6061	add ci/cd	2021-04-04 01:56:58 +04:00
Kishan Takoordyal	10a99cebe6	implement transition sidebar + smooth scroll + mini improvements	2021-03-05 11:19:44 +04:00
Kishan Takoordyal	68953af395	untrack package-lock.json	2021-03-05 10:35:03 +04:00
Kishan Takoordyal	5bb976274e	improve header mobile	2021-03-05 10:21:20 +04:00
Kishan Takoordyal	6b0f047772	remove console.log	2021-03-04 21:15:27 +04:00
Kishan Takoordyal	f38203a1bd	fix header spacing	2021-03-04 20:31:46 +04:00
Kishan Takoordyal	263eb91c03	minor improvements	2021-03-04 20:09:18 +04:00
Kishan Takoordyal	1e386b093d	adjust width #2	2021-03-04 19:58:53 +04:00
Kishan Takoordyal	7c0a3c74a7	adjust width	2021-03-04 19:55:59 +04:00