You are a senior front-end engineer and UI/UX designer. Generate a **responsive**, **dark-mode**, **neumorphic** developer-portfolio dashboard in React + Tailwind CSS (with optional Shadcn/ui components and Framer Motion for subtle animations).
The page layout is a grid of cards on a charcoal background (#111). Each card has:
- soft, rounded corners (2xl) and an inset/convex “neumorphic” shadow
- backgrounds in very dark grey (#1c1c1e)
- neon-green accent color (#A0FF3E) for buttons, links, highlights, and small status pills
- text in off-white (#EEE) with secondary text in muted grey (#888)
Include these modules:
1. **Profile header** (top-center):
- circular avatar with thin neon-green border
- user name (“Shawn.”) in large bold font, neon-green
- sub-heading (“Software Developer”) in smaller muted grey
- “Resume” button with download icon, neon-green outline, hover glow
2. **About box** (center):
- a speech-bubble or card with introduction text: “Hello, I’m Shawn, a 22 year-old software developer based in Goa – India.”
- a small “Available for work” neon pill
3. **Tech-stack panel** (left):
- two sections “Frontend:” and “Backend:” and “DB & Services:”
- each section contains pill-shaped tags (React, Next.js, Node.js, Prisma, Docker, etc.) with subtle inner shadow and light grey text
4. **Experience list** (right):
- vertical list of cards, each with:
- small avatar thumbnail
- organisation name, role (“Frontend Intern”), and a neon-green “Location” link
5. **Contribution heatmap** (bottom-right):
- GitHub-style calendar grid with months labeled and green intensity squares, plus total contributions text
6. **Social & tools bar** (bottom):
- row of square icon-buttons for GitHub, X, Gmail, Discord, ProtonMail, LinkedIn, VS Code, Vercel, Figma, Framer, Chrome, ChatGPT
- use official logos in white on dark backgrounds, neon-green hover glow
7. **Stats cards** (adjacent to heatmap):
- “68 Repos”, “34 Stars”, “1096 Commits” in large white numbers with neon-green highlights
Make sure the entire layout is a CSS grid with consistent gutter spacing (p-4), and each card uses Tailwind’s `shadow-neu` (custom inset + outset) effect. Add subtle Framer Motion hover animations on cards and buttons. Output both the full React component tree and the Tailwind CSS configuration needed.
| Property | Value / Technique | Why it matters |
| ------------------- | ----------------------------------------------------------------- | ---------------------------------------------------- |
| Base background | #111
| Deep charcoal to reduce eye-strain & make neons pop |
| Card bg | #1c1c1e
| Slightly lighter than base for gentle contrast |
| Corners | rounded-2xl
| Soft, friendly, modern |
| Neumorphism | inset & outset shadows (shadow-[inset_5px_5px_10px_#0a0a0a]
etc.) | Gives that “pillowy” 3D effect |
| Accent color | #A0FF3E
(neon green) | High-visibility calls to action |
| Primary text | text-gray-100
(#EEE) | Gentle on dark background |
| Secondary text | text-gray-500
(#888) | De-emphasized details |
| Font scale | Headline: text-xl font-bold
; subtitles: text-sm
; body: text-base
| Clear visual hierarchy |
| Buttons & pills | px-3 py-1 rounded-full border border-green-400
+ hover glow | Distinct, clickable |
| Grid layout | grid grid-cols-12 gap-4
| Flexible placement of sidebar, main, right panels |
| Icons | monochrome SVG or FontAwesome, white fill, neon hover | Consistent, minimal, interactive |
| Animations | Framer Motion: whileHover={{ scale: 1.02 }}
| Subtle feedback on hover |
#A0FF3E
for any other neon (pink, blue).shadow-lg
) or remove inset for flat design.grid-cols-12
to grid-cols-8
or grid-cols-6
to reorder panels.I'll create a responsive, dark-mode, neumorphic developer portfolio dashboard using React, Tailwind CSS, shadcn/ui components, and Framer Motion for subtle animations.
#1c1c1e
).#A0FF3E
for buttons, links, and highlights to create visual interest.The implementation closely matches the design in the screenshot, with the dark neumorphic style, neon green accents, and the same layout of components including the profile header, tech stack, experience list, contribution heatmap, and stats cards.
please take the contribution grapgh to the right column right under the experience card.
please fetch my details from the username sogeking-nul. so all data about the contribution grapgh should be fetched from my username. also update my repos and commits from the same username. remove the stars.
inplace of the contribution grapgh please add a projects section, where I'll showcase all my projects.
I'll make those changes for you, moving the contribution graph to the right column, fetching your GitHub data, and adding a projects section.
I've made all the requested changes to your portfolio dashboard:
Designed a clean layout for showcasing your projects with:
The dashboard now has a better organization with your GitHub data integrated and a dedicated section to showcase your projects. The contribution graph is now in a more appropriate location in the right column.
The code returns the following error:
Error fetching GitHub stats: Failed to fetch user data
at fetchGitHubStats (/components/stats-cards)
Revise the code to address the error.
I was previewing: /