onurhan1337 / my-website

✨ My personal website built with Next.js, Tailwind, TypeScript, Upstash and Vercel.

Hey, I'm Onurhan 👋

I'm a Front-end Engineer. I'm currently developing things independently.

My personal website →
@onurhan1337 on Twitter →

my-website's Issues

modal content can't seen when dark mode on

When dark mode is on, the content of the modal structure that comes with the @upstash/claps package causes problems as shown in the image below.

Dynamic code block theme bug

The code for dynamically changing the code block theme works as follows. I follow the data-theme content and make the relevant part hide or block.

function togglePreStyles(theme: string) {
  document.querySelectorAll("pre")?.forEach((el) => {
    switch (el.getAttribute("data-theme")) {
      case "light":
        theme === "dark"
          ? el.classList.add("hidden")
          : el.classList.remove("hidden");
        break;
      case "dark":
        theme === "dark"
          ? el.classList.remove("hidden")
          : el.classList.add("hidden");
        break;
      default:
        el.setAttribute("data-theme", "dark");
    }
  });
}

However, there is a point I missed here. If the user does not change a theme when he first enters the site, both are visible because that change is undetected. Whatever happens here, a piece of code must be added to hide the theme feature that was not selected in the first step.

Header position shifts on about page in Brave browser

@karimzade who uses brave browser with 15.6 inch screen and 1920x1080 size sent me the video below.

I did not encounter a similar problem when I tested it on Safari or other browsers at the same screen sizes. It is probably a problem with brave or another extension.

lv_0_20230614113305.mp4