22 days ago

Create a full modern React portfolio website using Vite + React + TailwindCSS + Framer Motion. The design must be clean, minimal, cinematic, and smooth — absolutely NO neon effects. ======================================== 🌌 MAIN THEME & STYLE Black background Soft shadows, soft highlights, gentle motion Premium, elegant, modern design Smooth animations everywhere (no extreme glow) Rounded shapes, subtle reflections, minimalism ======================================== 🎨 BACKGROUND ANIMATION (IMPORTANT) Create a component called MouseTrackLines.jsx Requirements: Background consists of multiple smooth lines or trails. Lines react to mouse movement (mouse tracking parallax effect). Lines gently drift when mouse is still. Lines extend outward off-screen for a cinematic look. GPU-friendly using Canvas or performant SVG. No neon – use soft thin grey/white lines with opacity variations. ======================================== 🟡 HERO SECTION Component: Hero.jsx Include: Centered rounded profile picture: https://i.pinimg.com/736x/78/09/35/7809357a1be1410f5414f57815c1efef.jpg Add soft yellow ambient shadow (very subtle) Big name: "sg0hann" using a futuristic clean font Underneath: • “Twitch Streamer” (light purple) • “Content Creator” (red) Smooth fade-in + slide-up animations using Framer Motion ======================================== 📊 STATS SECTION (WITH COUNTING ANIMATION) Component: StatsSection.jsx Include 3 statistic blocks: YouTube subscribers: Icon: FaYoutube Number: 2500+ (animated counting) Label: “Subscribers on YouTube” Twitch followers: Icon: FaTwitch Number: 2500+ (animated counting) Label: “Followers on Twitch” Discord members: Icon: FaDiscord Number: 300+ (animated counting) Label: “Discord Members” Animations: Use Framer Motion for fade-up + slight scale animation Use react-countup or a custom number animation Soft shadow and hover-lift effect Modern clean layout, responsive stacking on small screens Each social/platform block icon default at 50% opacity, hover to 100% with the number animating to full color ======================================== 🚀 PROJECTS SECTION Component: ProjectCard.jsx and a main ProjectsSection.jsx Projects: ON-RELEASE SCRIPT – Project ERA Hidden link (use <a href=""> but do not show raw URL): https://direct-link.net/1370689/wcwfukDNkUuB POTATO GRAPHICS – Project ERA Hidden link: https://link-hub.net/1370689/0cNA1jo4xo71 Requirements: “Project ERA” must be bold and light-blue. Use a clean glass-like panel style (frosted blur + soft borders). Download button with a download icon (react-icons). Hover lifting animation with soft shadow. Clean typography, no neon. ======================================== 📌 FLOATING SOCIAL ICONS (RIGHT SIDE) Component: FloatingSocials.jsx Social URLs: YouTube: https://www.youtube.com/@sg0hann Twitch: https://www.youtube.com/@sg0hann Discord: https://discord.gg/7RFTUW9Azq Requirements: Vertical floating bar on the right side Centered vertically Icons: FaYoutube, FaTwitch, FaDiscord Hover scale + soft blur highlight Tooltip on hover Gentle floating idle animation (up/down) Subtle continuous pulsating/shimmering effect when idle Slightly more pronounced smooth scale and color shift on hover Add ARIA labels for accessibility ======================================== LOGO ANIMATION Make the website logo have an animated border effect: Transparent yellow (#ffeb3b, opacity 0.4–0.6) Border slowly moves/shifts around the logo (“breathing” effect) Soft glowing pulse synchronized with border movement Smooth Framer Motion animation Loop infinitely, premium and modern ======================================== Contact Me Section Create a 'ContactMe.jsx' component for the portfolio website. This component should include a simple form with fields for Name, Email, and Message. Add a submit button and implement basic client-side validation. The form should fit the clean, minimal, and modern aesthetic of the rest of the site, with smooth transitions for focus states and submission feedback. Ensure it's responsive. ======================================== 📁 REQUIRED FILES package.json (with react, react-dom, framer-motion, react-icons, tailwind, vite) tailwind.config.js postcss.config.js index.html src/main.jsx src/App.jsx src/index.css src/components/MouseTrackLines.jsx src/components/Hero.jsx src/components/StatsSection.jsx src/components/ProjectCard.jsx src/components/ProjectsSection.jsx src/components/FloatingSocials.jsx ======================================== 📦 DELIVERABLES Full code for every file listed above Smooth animations included Fully responsive layout Instructions to install & run (npm install, npm run dev) ======================================== Now generate the FULL React project with all code.

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates