roycwilliams Posts - Answer Overflow

roycwilliams

Posts Comments

KPCKevin Powell - Community

•Created by roycwilliams on 11/19/2023 in #front-end

Images not displaying in React production build

4 replies

KPCKevin Powell - Community

•Created by roycwilliams on 11/11/2023 in #front-end

Adjusting iframe size for mobile responsiveness in Tailwind CSS

2 replies

KPCKevin Powell - Community

•Created by roycwilliams on 10/17/2023 in #front-end

Carousel not working even though Javascript is Correct:

I am creating a portfolio and one of the features I've provided is a carousel where you can scroll through my monthly music rotation. I have defined the function for the forward and prev buttons the result is I'm not getting a response but the console is reading it. Here's my code below:

          
                  <div className='w-full h-auto flex gap-72 justify-center'>
                        <button onClick={handlePrev} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-left'><FontAwesomeIcon icon={faChevronLeft} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                        <button onClick={handleForward} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-right'><FontAwesomeIcon icon={faChevronRight} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                  </div>

          
                  <div className='w-full h-auto flex gap-72 justify-center'>
                        <button onClick={handlePrev} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-left'><FontAwesomeIcon icon={faChevronLeft} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                        <button onClick={handleForward} className='w-8 h-8 hover:bg-white/20 rounded-full flex items-center justify-center transition ease-in duration-800 animate-carousel-right'><FontAwesomeIcon icon={faChevronRight} style={{color: "#ffffff", fontSize: '16px'}} /></button>
                  </div>

Function for animation

const [currentIndex, setCurrentIndex] = useState(0);

  const sounds = [
    "https://embed.music.apple.com/us/album/in-between-and-overseas/1607100188?i=1607101242",
    "https://embed.music.apple.com/us/album/orange-village/1677236538?i=1677236904",
    "https://embed.music.apple.com/us/album/dreams-money-can-buy/1475177816?i=1475177817",
    "https://embed.music.apple.com/us/album/goyard-umbrella/1677198478?i=1677198491",
    "https://embed.music.apple.com/us/album/louis-baggage-feat-babyface-ray/1609125563?i=1609126175",
    "https://embed.music.apple.com/us/album/east-liberty/1662164512?i=1662164513",
    "https://embed.music.apple.com/us/album/ive-been-daydreaming-my-entire-life/1243853548?i=1243853559",
  ];

  // Defining Back and Forth Functions

  const handlePrev = () => {
    setCurrentIndex((currentIndex - 1 + sounds.length) % sounds.length);
  }

  

  
  const handleForward = () => {
    setCurrentIndex((currentIndex + 1) % sounds.length);
  }

const [currentIndex, setCurrentIndex] = useState(0);

  const sounds = [
    "https://embed.music.apple.com/us/album/in-between-and-overseas/1607100188?i=1607101242",
    "https://embed.music.apple.com/us/album/orange-village/1677236538?i=1677236904",
    "https://embed.music.apple.com/us/album/dreams-money-can-buy/1475177816?i=1475177817",
    "https://embed.music.apple.com/us/album/goyard-umbrella/1677198478?i=1677198491",
    "https://embed.music.apple.com/us/album/louis-baggage-feat-babyface-ray/1609125563?i=1609126175",
    "https://embed.music.apple.com/us/album/east-liberty/1662164512?i=1662164513",
    "https://embed.music.apple.com/us/album/ive-been-daydreaming-my-entire-life/1243853548?i=1243853559",
  ];

  // Defining Back and Forth Functions

  const handlePrev = () => {
    setCurrentIndex((currentIndex - 1 + sounds.length) % sounds.length);
  }

  

  
  const handleForward = () => {
    setCurrentIndex((currentIndex + 1) % sounds.length);
  }

2 replies

KPCKevin Powell - Community

•Created by roycwilliams on 10/7/2023 in #front-end

How can I replicate this grid layout?

5 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/30/2023 in #front-end

Creating an Infinite Vertical Carousel with Framer Motion

I'm working on building a vertical carousel using Framer Motion in my React application. The carousel moves downwards, but I'm facing an issue where it stops at the end and doesn't loop continuously. What I want to achieve is an infinite loop where the bottom-most picture smoothly transitions back to the top. Is there a way to achieve this, possibly with CSS or through a different approach in Framer Motion? https://github.com/roycejwilliams/royce-portfolio-react/blob/main/royce-portfolio/src/components/Carousel.jsx

6 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/16/2023 in #front-end

How can I center the second row to the middle

1 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/12/2023 in #front-end

Trouble Navigating to Another Page in React Using a Button

I'm working on a React project and I'm having trouble implementing a button that navigates to another page when clicked. Additionally, I'd like to know how I can view the target page without having to press a button each time. Here's my current code for the button in React:

import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';

const Button = () => {
  return (
    <Link to="/portfolio" className="w-96 h-32 flex justify-center items-center absolute">
      <motion.button
        animate={{ opacity: 1 }}
        transition={{ type: "tween", duration: 1.5, delay: 3 }}
        initial={{ y: 75, opacity: 0 }}
        className="before:inline-block before:content-['\2014'] before:absolute before:-left-3.5 relative w-28 h-22 text-xl tracking-widest font-libre after:inline-block after:content-['\2014'] after:absolute"
      >
        ENTER
      </motion.button>
    </Link>
  );
};
export default Button;

import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';

const Button = () => {
  return (
    <Link to="/portfolio" className="w-96 h-32 flex justify-center items-center absolute">
      <motion.button
        animate={{ opacity: 1 }}
        transition={{ type: "tween", duration: 1.5, delay: 3 }}
        initial={{ y: 75, opacity: 0 }}
        className="before:inline-block before:content-['\2014'] before:absolute before:-left-3.5 relative w-28 h-22 text-xl tracking-widest font-libre after:inline-block after:content-['\2014'] after:absolute"
      >
        ENTER
      </motion.button>
    </Link>
  );
};
export default Button;

And my React Router configuration:

import React from 'react'
import Home from "./components/pages/Home"
import Portfolio from './components/pages/Portfolio';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import "./index.css"


function App() {
  return (
    <>
    <Router>
      <Switch>
        <Route index path="/" element= {<Home />} />
        <Route path="/portfolio" component={Portfolio} />
      </Switch>
    </Router>
    </>
  )
}

export default App

import React from 'react'
import Home from "./components/pages/Home"
import Portfolio from './components/pages/Portfolio';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import "./index.css"


function App() {
  return (
    <>
    <Router>
      <Switch>
        <Route index path="/" element= {<Home />} />
        <Route path="/portfolio" component={Portfolio} />
      </Switch>
    </Router>
    </>
  )
}

export default App

1 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/10/2023 in #front-end

How can I implement the lines shown around the "enter" button

4 replies

KPCKevin Powell - Community

•Created by roycwilliams on 9/8/2023 in #front-end

tailwind CSS not responding in the browser despite correct installation and import

30 replies

KPCKevin Powell - Community

•Created by roycwilliams on 8/5/2023 in #front-end

How can I adjust the video to fit the height of parent div?

I'm working on fitting the background video to fit the parent div but it is not adjust to the height within the media query. Any ideas on how I can fix this?

.hero{
    position: relative;
    z-index: 1;
    height: 90vh;
    width: 100%;
}


#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1; 
     filter: brightness(65%);
     height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

.hero{
    position: relative;
    z-index: 1;
    height: 90vh;
    width: 100%;
}


#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1; 
     filter: brightness(65%);
     height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #myVideo {
        width: 100%;
        height: auto;
    }
}

5 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/30/2023 in #front-end

How to trigger animations on visibility and scroll

Hey everyone, it's a simple fade in animation but it's not triggering the elements with their own animation. Can someone explain to me how I may fix this? I've provided examples of my issue as well: HTML

<div class="project">
        <div class="goals animate-on-scroll">
            <div class="goals-contain">
                <h1>Projected Goals</h1>
                <div class="stats">
                    <div class="numbers">
                        <h3> <span class="million"></span> million</h3>
                        <p>in assets managed</p>
                    </div>
                    <div class="numbers">
                        <h3 class="managed"></h3>
                        <p>properties managed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="project">
        <div class="goals animate-on-scroll">
            <div class="goals-contain">
                <h1>Projected Goals</h1>
                <div class="stats">
                    <div class="numbers">
                        <h3> <span class="million"></span> million</h3>
                        <p>in assets managed</p>
                    </div>
                    <div class="numbers">
                        <h3 class="managed"></h3>
                        <p>properties managed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.active {
    animation: counter 3s forwards alternate ease;
    counter-reset: num var(--num);
}

.active::after {
    content: counter(num);
}

@keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 20;
    }
  }

  .million {
    animation: next 3s forwards alternate ease;
    counter-reset: num var(--num);
  }

  .million::after {
    content: counter(num);
  }

  @keyframes next {
    from {
      --num: 0;
    }
    to {
      --num: 5;
    }
  }

.active {
    animation: counter 3s forwards alternate ease;
    counter-reset: num var(--num);
}

.active::after {
    content: counter(num);
}

@keyframes counter {
    from {
      --num: 0;
    }
    to {
      --num: 20;
    }
  }

  .million {
    animation: next 3s forwards alternate ease;
    counter-reset: num var(--num);
  }

  .million::after {
    content: counter(num);
  }

  @keyframes next {
    from {
      --num: 0;
    }
    to {
      --num: 5;
    }
  }

const animateElement = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
        } else {
            entry.target.classList.remove('animate');
        }
    })
}, {
    threshold: 0.5
});

for (let i = 0; i < animateElement.length; i++) {
    const el = animateElement[i];

    observer.observe(el);
}

const animateElement = document.querySelectorAll('.animate-on-scroll');
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate');
        } else {
            entry.target.classList.remove('animate');
        }
    })
}, {
    threshold: 0.5
});

for (let i = 0; i < animateElement.length; i++) {
    const el = animateElement[i];

    observer.observe(el);
}

1 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/18/2023 in #front-end

responsive issue/bug

3 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/13/2023 in #front-end

Social Media Link in Bio Causes Glitches on Website, but Works Perfectly on Chrome and Safari

I’m facing a strange issue with my website when I paste a social media link in the bio section. The website starts glitching, but interestingly, when I open the website in chrome or safari, everything appears to work fine. I’m unable to pinpoint the root cause of this problem. Can someone please help me understand why this discrepancy exist and provide any suggestions for resolving it?

3 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/13/2023 in #front-end

Element for iPad mobile responsive is different from the rest of the orientations.

So I have launched my digital agency's website and for some reason when looking at the iPad version the letters appear like they're in a box when it's not supposed to. I need help figuring out this problem HTML

 <span style="font-size: 100px;" class="fast-flick">U</span><span style="font-size: 100px;" class="flicker">S.</span>

 <span style="font-size: 100px;" class="fast-flick">U</span><span style="font-size: 100px;" class="flicker">S.</span>

CSS including animation

.sign {
  letter-spacing: 2;
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  animation: glow 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
    22%,
    36%,
    75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }

  28%,
    33% {
    color: #EB8771;
    text-shadow: none;
  }

  82%,
    97% {
    color: #EB8771;
    text-shadow: none;
  }
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

.flicker {
  animation: glow 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: glow 2s forwards, blink 10s 1s infinite;
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

.sign {
  letter-spacing: 2;
  font-family: 'Epilogue', sans-serif;
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  animation: glow 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
    22%,
    36%,
    75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }

  28%,
    33% {
    color: #EB8771;
    text-shadow: none;
  }

  82%,
    97% {
    color: #EB8771;
    text-shadow: none;
  }
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

.flicker {
  animation: glow 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: glow 2s forwards, blink 10s 1s infinite;
}

@keyframes glow {
  0% {
    color: #000000;
    text-shadow: none;
  }

  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #EB8771,
      -0.2rem 0.1rem 1rem #6a3d33, 0.2rem 0.1rem 1rem #EB8771,
      0 -0.5rem 2rem #af796d, 0 0.5rem 3rem #c0644f;
  }
}

2 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/7/2023 in #front-end

Positioning elements not responding as expected in Tailwind CSS

2 replies

KPCKevin Powell - Community

•Created by roycwilliams on 7/4/2023 in #front-end

Mobile responsive site in inspection tab doesn't match live website appearance

I am developing my digital agencies website and for some reason a lot of the svg i have in the files have altered some of the logo and text when starting from mobile responsive 1024 width. I also have a line that appears in each section on the live website and want to get rid of it. It looks clean on the initial inspection page but when pushed the live mode it doesn't look the same at all Please if you have any insight on how to fix this I have attached my github repository below:
https://github.com/roycejwilliams/REVITAL

3 replies

KPCKevin Powell - Community

•Created by roycwilliams on 12/22/2022 in #back-end

Can strips pre-built checkout only be used surrounded by a form attribute?

1 replies

KPCKevin Powell - Community

•Created by roycwilliams on 12/1/2022 in #back-end

Stripe checkout using Netlify - Receiving Error of bad request, missing form.

This is my first time using Netlify with an E-commerce site using Stripe. For some reason every time I click my checkout-button I received a message of "Bad Request, Missing Form". If anyone has experience using Netlify please help. I have provided my server code and checkout code as well.

1 replies

KPCKevin Powell - Community

•Created by roycwilliams on 11/22/2022 in #back-end

issue installing netlify-cli with resulting EACCES permission denied error

18 replies

Gaming

Programming