skills.rest
fateemaazaahraae
fateemaazaahraaeCOMMUNITY
Explore all skills by this author →
GitHub

magic-portfolio-builder

Create a personal portfolio website with Next.js, TypeScript, Tailwind CSS, and GSAP animations.

1|Updated Feb 11, 2026
Search Tags:#web development#ui/ux#next.js#tailwind css#portfolio#animation#gsap
One-click install
npx skills add https://github.com/fateemaazaahraae/Portfolio_v0 --skill magic-portfolio-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magic-portfolio-builder
Source: https://github.com/fateemaazaahraae/Portfolio_v0/tree/main
Command: npx skills add https://github.com/fateemaazaahraae/Portfolio_v0 --skill magic-portfolio-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and architectural blueprints for building a unique, visually stunning, and highly interactive personal portfolio website.

Core Features & Use Cases

  • Aesthetic Direction: Defines a "Magic/Epic" visual language with specific color palettes, typography, and design motifs like glassmorphism and aura effects.
  • Technical Stack: Mandates a modern stack including Next.js, TypeScript, Tailwind CSS, and GSAP for animations.
  • Component Implementation: Provides code patterns and guidance for key components like a glassmorphic navbar, animated hero section, 3D project cards, and a custom magnetic cursor.
  • Use Case: Use this Skill when starting the development of Fatima-Zahrae Bazaz's personal portfolio to ensure all design and technical requirements are met for a professional and memorable online presence.

Quick Start

Implement the glassmorphic navbar component using the provided Next.js and Tailwind CSS code pattern.

Frequently Asked Questions about magic-portfolio-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a portfolio website with GSAP animations and Next.js?▼

Building a GSAP-animated portfolio with Next.js involves using TypeScript and Tailwind CSS to implement specific component patterns like a glassmorphic navbar, animated hero section, and custom magnetic cursor for a striking visual aesthetic.

How does glassmorphism work in Tailwind CSS for web development?▼

Glassmorphism in Tailwind CSS utilizes specific color palettes and design motifs to create a translucent, layered visual effect, which when combined with aura effects, defines a unique Magic/Epic visual language for interactive web components.

Can I use GSAP for kinetic typography and 3D project cards in a Next.js application?▼

Yes, you can use GSAP for kinetic typography and 3D project cards in Next.js by following detailed technical architecture and component implementation patterns that ensure complex animations render correctly within the React component lifecycle.

What is the best way to optimize performance for a portfolio website using GSAP animations?▼

The best way to optimize performance for a GSAP-powered portfolio is to follow specific performance optimization strategies during component implementation, ensuring that heavy visual effects like aura effects and kinetic typography do not degrade the Next.js application's load times.

Do I need TypeScript to implement a custom magnetic cursor and animated hero section?▼

TypeScript is mandated for the technical stack to implement components like a custom magnetic cursor and animated hero section, ensuring type safety and architectural consistency across the Next.js and Tailwind CSS portfolio codebase.

Related Skills

Explore More Software Engineering Skills→
LogicPyLogicPy
8

fullstack-dev

Set up a fullstack development environment with Next.js 16, TypeScript, and Tailwind CSS.

Community
Advanced
wredziowredzio

nextjs-on-vercel

Launch a Next.js app on Bun and deploy to Vercel with git-triggered automation.

Community
Advanced
HouseGarofaloHouseGarofalo
3

tailwind-ui

Guide Tailwind CSS utility-first styling for responsive web UI development.

Official
Intermediate
Eng0AIEng0AI
15

gsap-awwwards-website

Build a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.

Official
Advanced