main: vibe coded app to feel like paper

Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
2025-12-30 00:00:16 +03:30
parent acbaebb947
commit 91c149e92e
27 changed files with 901 additions and 8696 deletions
+14 -14
View File
@@ -14,7 +14,7 @@ export default function Biography() {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
viewport={{ once: true }}
className="glass-effect rounded-2xl p-8 md:p-12"
className="paper-card p-8 md:p-12 cardboard-texture"
>
<div className="grid md:grid-cols-2 gap-12 items-center">
{/* Image Section */}
@@ -25,8 +25,8 @@ export default function Biography() {
viewport={{ once: true }}
className="relative"
>
<div className="aspect-square rounded-xl overflow-hidden bg-gradient-to-br from-accent-orange/20 to-accent-cyan/20 flex items-center justify-center border-2 border-accent-cyan/50 glow-cyan">
<div className="text-6xl md:text-8xl font-bold text-accent-cyan/30">
<div className="aspect-square bg-paper-brown flex items-center justify-center border-4 border-paper-dark shadow-paper-lg">
<div className="text-6xl md:text-8xl font-bold text-paper-dark/20">
{artistBio.name}
</div>
</div>
@@ -40,10 +40,10 @@ export default function Biography() {
transition={{ duration: 0.6, delay: 0.3 }}
viewport={{ once: true }}
>
<h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-2">
<h1 className="text-4xl md:text-5xl font-bold text-paper-dark mb-2 tracking-tight border-b-4 border-paper-dark inline-block pb-1">
{artistBio.name}
</h1>
<p className="text-xl text-accent-cyan/80 mb-6">{artistBio.title}</p>
<p className="text-xl text-paper-brown mb-6 font-medium mt-4">{artistBio.title}</p>
</motion.div>
<motion.div
@@ -51,7 +51,7 @@ export default function Biography() {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
viewport={{ once: true }}
className="space-y-4 text-gray-300 leading-relaxed"
className="space-y-4 text-paper-dark leading-relaxed"
>
{artistBio.bio.split('\n\n').map((paragraph, idx) => (
<p key={idx}>{paragraph}</p>
@@ -68,31 +68,31 @@ export default function Biography() {
>
<a
href={artistBio.socialLinks.spotify}
className="p-3 glass-effect rounded-lg hover:bg-accent-cyan/20 transition-all hover:glow-cyan"
className="p-3 bg-paper-light border-2 border-paper-brown hover:bg-paper-brown hover:border-paper-dark transition-all shadow-paper"
aria-label="Spotify"
>
<FaSpotify className="text-2xl text-accent-cyan" />
<FaSpotify className="text-2xl text-paper-dark" />
</a>
<a
href={artistBio.socialLinks.youtube}
className="p-3 glass-effect rounded-lg hover:bg-accent-orange/20 transition-all hover:glow-orange"
className="p-3 bg-paper-light border-2 border-paper-brown hover:bg-paper-brown hover:border-paper-dark transition-all shadow-paper"
aria-label="YouTube"
>
<FaYoutube className="text-2xl text-accent-orange" />
<FaYoutube className="text-2xl text-paper-dark" />
</a>
<a
href={artistBio.socialLinks.instagram}
className="p-3 glass-effect rounded-lg hover:bg-accent-cyan/20 transition-all hover:glow-cyan"
className="p-3 bg-paper-light border-2 border-paper-brown hover:bg-paper-brown hover:border-paper-dark transition-all shadow-paper"
aria-label="Instagram"
>
<FaInstagram className="text-2xl text-accent-cyan" />
<FaInstagram className="text-2xl text-paper-dark" />
</a>
<a
href="#"
className="p-3 glass-effect rounded-lg hover:bg-accent-orange/20 transition-all hover:glow-orange"
className="p-3 bg-paper-light border-2 border-paper-brown hover:bg-paper-brown hover:border-paper-dark transition-all shadow-paper"
aria-label="Apple Music"
>
<SiApplemusic className="text-2xl text-accent-orange" />
<SiApplemusic className="text-2xl text-paper-dark" />
</a>
</motion.div>
</div>