Merge pull request #104 from Web-Dev-Path/fix/cards-columns-slider-mo…

…bile

Adjust swipeable CardsColumns.js on mobile

CHANGELOG.md

@@ -25,7 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Header.js component
 - reCAPTCHA
 - useIntersect Hook, Reveal container for scrolling using intersection API
-- A new swipable feature on CardColumns.js
+- swipeable feature on CardsColumns.js
 
 ### Fixed
 
@@ -38,5 +38,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - installed yarn
 - normalized buttons' and links' styling
 - updated `package.json` commands for macOs
-
-
+- swipeable CardsColumns.js on mobile

README.md

@@ -4,7 +4,7 @@
 
 # Web Developer Path
 
-The **Web Dev Path** project is an attempt to offer mentoring on how to work with a version-controlled project in a team environment.
+The **Web Dev Path** project is an attempt to offer mentoring on how to work with a version-controlled project in a team environment. You can learn more about the project purpose and goals [here](https://github.com/Web-Dev-Path/web-dev-path/wiki).
 
 Currently, we're developing [a platform](https://webdevpath.co/) in [Next.js](https://nextjs.org/). The platform will be a place where to share ideas about web development and where Non-Profit Organizations can get some help for their websites by sharing their project and needs and getting connected to volunteer junior web developers. This is [how](https://github.com/MarianaSouza/web-dev-path/projects/1) things are going on so far.
 
@@ -16,8 +16,7 @@ If you are an experienced and a patient-lovely developer, a true rockstar who wa
 
 ## How to get started?
 
-Just reach out on [slack](https://join.slack.com/t/webdevpath/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw)!
-There is where we get together and learn from each other. Once on our `#general` channel, you'll see a pinned message with some guidelines.
+Please start watching carefully [our guideline tutorials](https://github.com/Web-Dev-Path/web-dev-path/wiki/Getting-Started), then, reach out on [Slack](https://join.slack.com/t/webdevpath/shared_invite/zt-xqqgwwo5-a09BSVWC9ZrHmS6RaMBzVw). There, is where we get together and learn from each other. Once on our `#general` channel, you'll see a pinned message with some guidelines.
 
 <br />
 
@@ -35,87 +34,3 @@ This is how to get started locally:
 - [Branch out](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging) by following the structure `feature/add-your-branch-name` or `chore/add-your-branch-name` or `fix/add-your-branch-name` and submit your [PR](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests)
 
 <br />
-
-## Resources
-
-Here you will find content and resources related to courses and practical steps to land your first job as a web developer.
-
-## Courses and Certifications
-
-- **Git and GitHub**
-
-  - [Git Official Basics](https://git-scm.com/book/en/v2)
-  - [Git Basis by Colt Steele](https://www.youtube.com/watch?v=USjZcfj8yxE&t=14s)
-  - [Git and GitHub for Beginners - Crash Course by freeCodeCAmp](https://www.youtube.com/watch?v=RGOj5yH7evk)
-  - [GitHub Tutorial 2020 - Beginner's Training Guide](https://www.youtube.com/watch?v=iv8rSLsi1xo)
-  - [GitHub Markdown](https://guides.github.com/features/mastering-markdown/)
-  - [How to review a PR](https://www.youtube.com/watch?v=lSnbOtw4izI&t=187s)
-
-* **Harvard**
-
-  - [CS50x - Introduction to Computer Science](https://cs50.harvard.edu/x/2020/)
-  - [CS50 Beyond - design and implementations of web apps](https://cs50.harvard.edu/beyond/2019/)
-
-* **JavaScript**
-
-  - [Learn JavaScript by Codecademy](https://www.codecademy.com/learn/introduction-to-javascript)
-
-  **JS Libraries and Frameworks**
-  <br />
-
-  - _**React**_
-    - [React Handbook for Beginners](https://www.freecodecamp.org/news/react-beginner-handbook/)
-    - [React Functional Components, Props, and JSX – React.js Tutorial for Beginners](https://www.freecodecamp.org/news/react-components-jsx-props-for-beginners/)
-    - [Next.js crash course series](https://www.youtube.com/watch?v=A63UxsQsEbU)
-
-* **PHP**
-
-  - [PHP Tutorial](https://www.w3schools.com/php/DEFAULT.asp)
-
-* **Python**
-  - [Best Python Tutorials](https://www.freecodecamp.org/news/best-python-tutorial/)
-
-- **WordPress**
-
-  - [How to Make a Custom Website from Scratch using WordPress (Theme Development) by freeCodeCamp ](https://youtu.be/KibbYf9avko)
-  - [Professional WordPress Theme & Plugin Development](https://www.udemy.com/course/photoshop-psd-to-wordpress-theme-development-from-scratch/)
-  - [WordPress Plugin Development](https://youtu.be/mm9aQiLEa10)
-
-  <br />
-  <br />
-
-## Books
-
-- **Command Line**
-
-  - [Learn Enough Command Line to Be Dangerous - Michael Hartl](https://www.learnenough.com/command-line-tutorial/basics)
-
-- **JavaScript (JS)**
-
-  - [JavaScript for Impatient Programmers - Dr. Axel Raushmayer](https://exploringjs.com/impatient-js/index.html)
-
-- **Programming**
-  - [How to Design a Program - Matthias Felleisen, Robert Bruce Findler, Matthew Flatt, Shriram Krishnamurthi](https://htdp.org/2020-5-6/Book/index.html)
-
-<br />
-<br />
-
-## Publishing a Web Product
-
-- **Launching A Website**
-  - [How to Put a Website Online: Template, Coding, Domain, Hosting, and DNS](https://youtu.be/NQP89ish9t8)
-
-<br />
-<br />
-
-## Presentation
-
-- **A Junior Web Developer Resume**
-
-  - [How to write an awesome junior developer résumé in a few simple steps, by freeCodeCamp](https://www.freecodecamp.org/news/how-to-write-an-awesome-junior-developer-resume-in-a-few-simple-steps-316010db80ec/)
-
-- **Your LinkedIn**
-  - [Tips to Optimize your LinkedIn Profile for Developers](https://www.samanthaming.com/blog/tips-to-optimize-your-linkedin-profile-for-developers/)
-
-<br />
-<br />

components/CardsColumns.js

@@ -1,9 +1,8 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination, Navigation } from 'swiper';
 import 'swiper/css';
-import "swiper/css/pagination";
-import "swiper/css/navigation";
-
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
 import Card from './Card';
 import Container from './Container';
 import styles from '../styles/CardsColumns.module.scss';
@@ -17,42 +16,42 @@ export default function CardsColumns({
   linkText,
 }) {
   return (
-      <Container>
-        <Swiper className={styles.swiper}
-          mousewheel={true}
-          grabCursor={true}
-          modules={[Pagination]}
-          pagination
-          centerInsufficientSlides={true}
-          slidesPerView={1.09}
-          breakpoints={{
-            769: {
-              slidesPerView: 2,
-              spaceBetween: 50,
-            },
-            1334: {
-              slidesPerView: 3,
-              spaceBetween: 50,
-            }
-          }}
-        >
-          {titles.map((title, index) =>
-            <SwiperSlide key={index} className={styles.swiperSlide}>
-              <div className={styles.inner__content}>
-                <Card
-                  title={title}
-                  image={images[index]}
-                  altTag={altTags[index]}
-                  content={content[index]}
-                  link={links[index]}
-                  linkText={linkText[index]}
-                  key={index}
-                />
-              </div>
-            </SwiperSlide>
-          )}
-
-        </Swiper>
-      </Container>
+    <Container>
+      <Swiper
+        className={styles.swiper}
+        mousewheel={true}
+        grabCursor={true}
+        modules={[Pagination]}
+        pagination
+        centerInsufficientSlides={true}
+        slidesPerView={1}
+        breakpoints={{
+          768: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          1334: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+          },
+        }}
+      >
+        {titles.map((title, index) => (
+          <SwiperSlide key={index} className={styles.swiperSlide}>
+            <div className={styles.inner__content}>
+              <Card
+                title={title}
+                image={images[index]}
+                altTag={altTags[index]}
+                content={content[index]}
+                link={links[index]}
+                linkText={linkText[index]}
+                key={index}
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </Container>
   );
 }

components/Hero.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 import Nav from './Nav';
 import Container from './Container';
@@ -18,16 +18,7 @@ export default function Hero({
     setTitleIndex(titleIndex >= dynamicTitles.length - 1 ? 0 : titleIndex + 1);
   };
 
-  useEffect(() => {
-    const dynamicTitleEl = document.getElementById('dynamicTitle');
-    if (dynamicTitleEl.style.opacity === '1') {
-      dynamicTitleEl.style.opacity = '0';
-    } else {
-      dynamicTitleEl.style.opacity = '1';
-    }
-  }, [titleIndex]);
-
-  setTimeout(handleTitleIndex, 1350);
+  setTimeout(handleTitleIndex, 1550);
 
   return (
     <div
@@ -47,9 +38,7 @@ export default function Hero({
         <div className={styles.header__content__upper}>
           <h1 className={titleClass ? `${styles[titleClass]}` : ''}>
             {title}
-            {dynamicTitles && (
-              <span id="dynamicTitle"> {dynamicTitles[titleIndex]}</span>
-            )}
+            {dynamicTitles && <span> {dynamicTitles[titleIndex]}</span>}
           </h1>
         </div>
         <div className={styles.header__content__bottom}>

styles/Card.module.scss

@@ -2,20 +2,18 @@
 @use './mixins' as *;
 
 .card {
-  margin: 1.5rem 0;
+  margin: 1rem 1rem 0 .5rem;
   padding: 1.5rem;
   border-radius: 1.5rem;
   box-shadow: $box-shadow;
   min-width: 32%;
   height: 37rem;
 
   @include desktop {
-
     margin: 1.5rem 1.5rem 0 1.5rem;
-
     &:first-child,
     &:last-child {
-      margin: 1.5rem 0 0 0;
+      margin: 1.5rem .5rem 0 .5rem;
     }
   }
 

styles/CardsColumns.module.scss

@@ -9,12 +9,15 @@
   @include desktop-breakpoint-plus {
     display: flex;
   }
+}
+
+.swiper {
+  margin-bottom: 5rem;
 
-  @include desktop-breakpoint-minus {
-    padding-bottom: 1rem;
+  :global(.swiper-pagination-bullet-active) {
+    background-color: $dark-bg-color;
   }
+
 }
 
-.swiper{
-  margin-bottom: 6rem;
-}
+

styles/Hero.module.scss

@@ -27,8 +27,6 @@
         font-style: italic;
         font-weight: bold;
         line-height: 3.5rem;
-        opacity: 0;
-        @include transition(opacity 1.55s ease-in-out);
         @include desktop {
           font-size: 4.5rem;
           line-height: 5rem;