国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Wie der Titel schon sagt, habe ich immer noch Probleme damit, dass einige Texte auf meiner nextjs-Seite auf einigen Mobilger?ten verschwommen aussehen, aber online sind. Das ist mir bei einigen iPhones am deutlichsten aufgefallen. Dies gilt für mobile Ger?te, wenn ich die Konsole zum Testen des mobilen Layouts verwende. Dies ist nur ein Problem mit zwei Komponenten auf meiner Seite. Beide Karten k?nnen umgedreht werden, um die Rückseite zu betrachten. Sie werden auch mit Framermotion animiert. Das Styling erfolgte mit Tailwind. Regul?rer Text aus anderen Teilen der Seite wird normal angezeigt.

Hier ist ein Beispielbild, damit Sie sehen k?nnen, was ich meine. Gr??erer Text scheint in Ordnung zu sein, kleinerer Text ist jedoch verschwommen. Ich habe nur Screenshots von der Vorderseite eingefügt. Die Rückseite hat das gleiche Problem.

Der dieser Komponente entsprechende Code ist hier:

'use client';
import Link from "next/link";
import Image from "next/image";
import { motion } from 'framer-motion';
import { fadeIn } from '../../../utils/motion';

function ProjectCard({ index, id, title, icons, description, ghlink, pagelink }: any) {
    return (
        <motion.div
            variants={fadeIn('right', 'spring', index * 0.1, 1.75)}
            initial="hidden"
            whileInView="show"
            key={id}
            className="w-[280px] md:w-[300px] h-[440px] cursor-pointer group perspective my-4 md:m-6"
        >
            <div className="w-full h-full absolute border-2 rounded-[15px] preserve-3d group-hover:flip-cardY duration-500">
                {/* FRONT FACE */}
                <div className="absolute w-full h-full glassmorphism rounded-[15px] backface-hidden text-center flex flex-col items-center justify-between z-50">
                    <h3 className="pt-8 font-bold text-[26px] gap-4 text-[#18BC9C]">{title}</h3>
                    <div className="flex flex-row flex-wrap items-center justify-center md:m-1 z-50">
                        {icons.map(
                            (icon: any, id: any) => (
                                <p key={id} className="rounded-[25px] text-[10px] bg-[#34acc7] py-1 px-2 m-1 tracking-wide">#{icon}</p>
                            ))
                        }
                    </div>
                    <p className="text-[12px] font-bold text-[#18BC9C] p-3">Hover for more Info!</p>
                </div>
                {/* BACK FACE */}
                <div className="absolute w-full h-full bg-[#2E3A59] rounded-[15px] backface-hidden flip-cardY text-center flex flex-col p-2 items-center justify-between z-50">
                    <h3 className="p-4 font-bold text-[22px] gap-4 text-[#18BC9C]">ABOUT THIS PROJECT</h3>
                    <p className="text-[15px] text-justify">
                        {description}
                    </p>
                    <div className="flex flex-row gap-6 m-4 bottom-0">
                        {ghlink &&
                            <>
                                <Link href={ghlink} target="_blank">
                                    <Image alt="github" src="github.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                        {pagelink &&
                            <>
                                <Link href={pagelink} target="_blank">
                                    <Image alt="homepage" src="link.svg" width={25} height={25} className='py-2 md:w-[40px] md:h-[40px] object-contain hover:scale-150 duration-200' />
                                </Link>
                            </>
                        }
                    </div>
                </div>
            </div>
        </motion.div>
    )
};

export default ProjectCard;

Ich habe versucht, den Stil und die Framer-Bewegungsanimation zu entfernen und habe versucht, eine L?sung zu finden, indem ich eine andere Komponente von Grund auf erstellt und versucht habe, den Fehler herauszufinden. Beides scheint keine L?sung zu sein. Vielen Dank für Ihre Hilfe!