Skip to content

Instantly share code, notes, and snippets.

View Catevika's full-sized avatar
🏠
Working from home

Dominique BELLO Catevika

🏠
Working from home
10 followers · 8 following
View GitHub Profile
@Catevika
Catevika / Slider trick clean rotation
Last active October 23, 2025 17:23
Slider trick - Clean rotation - React / Typescript
import {useState} from 'react';
import {allCocktails} from '../constants';
const Menu = () => {
const [currentIndex, setCurrentIndex] = useState(0);
const totalCocktails = allCocktails.length;
const goToSlide = (index: number) => {
const newIndex = (index + totalCocktails) % totalCocktails;
setCurrentIndex(newIndex);
};
@Catevika
Catevika / H1-component.txt
Created January 9, 2025 16:38
Custom component with additional Tailwind classname
// @/components/H1
import { cn } from "@/lib/utils";
type HIProps = {
children: React. ReactNode;
className?: string;
}
export default function H1({ className, children }: HIProps) {
return (
@Catevika
Catevika / Fade up React + Motion UI free Component by Sam Selikoff
Last active October 12, 2024 07:36
Reusable React components
function FadeUp({
children,
delay = 0,
duration = 0.5,
}) {
return (
<motion.div
variants={{ hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0 } }}
initial="hidden"
whileInView="visible"
@Catevika
Catevika / Nextjs14_Allow_External_Source_Pexels_images.md
Created April 5, 2024 13:52
NEXT.JS 14 - Add config to allow external source for Pexels images

Add in 'next.config.mjs' file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images:{
    remotePatterns:[
      {
        protocol: 'https',
 hostname: "images.pexels.com"
@Catevika
Catevika / NEXTJS14 - Connect MongoDB with Mongoose avoiding multiple connections.md
Last active April 4, 2024 16:34
NEXTJS14 - Connect MongoDB with Mongoose avoiding multiple connections because of Hot Module Replacement 
import mongoose from 'mongoose';

if (!process.env.MONGODB_URI) {
  throw new Error('Invalid environment variable: "MONGODB_URI"');
}

const uri = process.env.MONGODB_URI;

export const connectDB = () =&gt; {
@Catevika
Catevika / JS Active class on scroll
Last active March 16, 2023 13:02
JS: add active class to a nav item on scroll
/*=============================================
= Active class on Scroll =
=============================================*/
const sections = document.querySelectorAll('section');
const navLinks = document.querySelectorAll('nav ul li a');
window.addEventListener('scroll', function () {
let currentPos = window.scrollY;
sections.forEach(section => {
@Catevika
Catevika / Navbar: Hide on Scroll and Show at Scroll position
Last active March 16, 2023 11:17
Javascript snippet to hide navigation bar on scroll and show it again at scroll position
/*=====================================================
= Navbar: Hide on Scroll and Show at Scroll position =
=====================================================*/
const navbar = document.querySelector('nav');
let lastScrollTop;
window.addEventListener('scroll', function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
@Catevika
Catevika / jwtRS256.sh
Created March 10, 2023 14:09 — forked from ygotthilf/jwtRS256.sh
How to generate JWT RS256 key
ssh-keygen -t rsa -b 4096 -m PEM -f jwtRS256.key
# Don't add passphrase
openssl rsa -in jwtRS256.key -pubout -outform PEM -out jwtRS256.key.pub
cat jwtRS256.key
cat jwtRS256.key.pub
@Catevika
Catevika / glassmorphism-login-form-tutorial-in-html-css.markdown
Created March 15, 2022 09:12
Glassmorphism login Form Tutorial in html css
@Catevika
Catevika / Scrimba-JavaScript-Challenge_candies
Last active December 1, 2020 10:29
December 2020 - 24 days JavaScriptmas_challenge#1_candies
const candies = (children, candy) => children > 0 && candy > 0 ? Math.floor(candy / children) * children : console.log('For Christmas, number of children and candies must be greater than 0 to spread joy and happiness');
const result = candies(3, 10);
console.log('result: ', result)