Skip to content

Instantly share code, notes, and snippets.

View Ebrahim-Ramadan's full-sized avatar

Ebrahim Ramadan Ebrahim-Ramadan

28 followers · 86 following
View GitHub Profile
@Ebrahim-Ramadan
Ebrahim-Ramadan / getCookie.js
Created August 9, 2024 19:11
just a simple implementation for js-cookie alternative
// Function to get a cookie
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return JSON.parse(c.substring(nameEQ.length, c.length));
}
return null;
@Ebrahim-Ramadan
Ebrahim-Ramadan / sentry-feedback.tsx
Created July 4, 2024 20:23 — forked from t3dotgg/sentry-feedback.tsx
"use client";
import { useAuth } from "@clerk/nextjs";
import * as Sentry from "@sentry/nextjs";
import { useEffect, useState } from "react";
function createWidget() {
return Sentry.getFeedback()?.createWidget();
}
@Ebrahim-Ramadan
Ebrahim-Ramadan / ThreeDPhotoCarousel.jsx
Created June 19, 2024 19:17
3d carousel (local pics) react component
'use client'
import React, { useState, useEffect } from "react";
import { motion, useAnimation, useMotionValue, useTransform } from "framer-motion";
import Image from "next/image";
import { RightArrow } from "../globals/Icons";
const images = [];
for (let i = 1; i <= 14; i++) {
images.push(import(`@/assets/quick-carousel/${i}.webp`).then(module => module.default));
}
@Ebrahim-Ramadan
Ebrahim-Ramadan / Header.jsx
Created June 19, 2024 19:16
floating header react component
'use client';
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import { HomeIcon , ProjectsIcon, ExperienceIcon, BehanceIcon, Behance} from './Icons';
import { MagneticBackgroundTab } from './MagneticBackgroundTab';
export const Header = () => {
const [isSticky, setIsSticky] = useState(false);
useEffect(() => {
@Ebrahim-Ramadan
Ebrahim-Ramadan / Subtle3DCarousel.jsx
Created June 19, 2024 19:15
Subtle3DCarousel
'use client';
import { useRotateYValues } from "@/utils/customHooks";
import { motion, useMotionValue } from "framer-motion";
import { useState } from "react";
import { AI, Motion, Gears, Code, Cube } from "../globals/Icons";
const ITEMS = [
{
@Ebrahim-Ramadan
Ebrahim-Ramadan / Fixed Drawer.jsx
Created June 19, 2024 19:14
drawer fixed as menu react component
'use client'
import { AnimatePresence, motion } from "framer-motion";
import Image from "next/image";
import React, { useState, useEffect, useRef } from "react";
import { copyToClipboard } from "@/utils/Copy";
import { DockDemo } from "../ContactMe/DockDemo";
export default function FixedDrawer() {
const refMenu = useRef(null);
const [openMenu, setOpenMenu] = useState(false);
const [Copied, setCopied] = useState(false);
@Ebrahim-Ramadan
Ebrahim-Ramadan / DrawerComponent.jsx
Created June 19, 2024 19:10
Drawer Component
'use client';
import Image from 'next/image';
import { Drawer } from 'vaul';
import { RightArrow } from '../Icons';
export function DrawerComponent() {
return (
<Drawer.Root shouldScaleBackground>
@Ebrahim-Ramadan
Ebrahim-Ramadan / index.htm
Created June 19, 2024 16:22
blur bg animating
<body>
<div style="filter: blur(1px);pointer-events:none;position:fixed;min-width:100%;margin-top:0;height:180%;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:0;opacity:0.3">
<div style="border-radius:99999px;position:absolute;top:50%;left:50%;width:100vw;min-width:1000px;height:100vh;transform:translate(-50%, -50%) scale(0.6);overflow:hidden">
<div class="ColorBlobs_SpinningGradient__DpGtx" style="position:absolute;top:50%;left:50%;width:100vw;height:100vw;transform:translate(-50%, -50%)"
animation: ColorBlobs_spin__CbrXa 8s linear infinite;
background: conic-gradient(from 0deg, #08f, #f60, #bbffa1, #4c00ff, #ab2666, #09f);
></div>
</div></div>
@Ebrahim-Ramadan
Ebrahim-Ramadan / LazyLoad.jsx
Created June 12, 2024 11:50
Nextjs component handling the visibility detection using the Intersection Observer js web standard API. This cuold help reduce the initial amount of bytes sent thru the first glance to the browser.
'use client';
import { useEffect, useRef, useState } from 'react';
export const LazyLoad = ({ children }) => {
const [isVisible, setIsVisible] = useState(false);
const ref = useRef();
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
@Ebrahim-Ramadan
Ebrahim-Ramadan / ass.py
Last active December 21, 2023 07:32
paper-citation-project
import time
from collections import defaultdict
# readign nodes data from nodes.csv
def read_nodes(file):
with open(file, 'r', encoding='utf-8') as f:
lines = f.readlines()[1:] # Skip header
nodes = {}