main: vibe coded app to feel like paper
Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
+14
-14
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user