A stunning, dark-themed portfolio website built with React, TypeScript, and Tailwind CSS. Features dynamic animations, floating icons, and a complete backend for contact form handling.
- Dark Theme Only: Permanent dark mode with neon glowing effects
- Floating Icons Animation: 10 animated icons that appear only on home screen
- Glass Morphism Cards: Consistent styling across all sections
- Responsive Design: Mobile-first approach with smooth animations
- Neon Glow Effects: Beautiful gradient text and hover effects
- Profile Layout: Vertically larger profile photo, centered on long screens
- Social Icons: GitHub, LinkedIn, and Mail with subtle glow hover effects
- Smart Floating Icons: Disappear when scrolling, never overlap with content
- Skill Cards: Glowing cards instead of progress bars
- Grid Layout: Responsive grid showing technical skills
- No Percentages: Clean design focusing on skill names only
- Graduation Status: Shows "Graduated" status
- Timeline & Location: Inline display of dates and location
- Consistent Styling: Matches other card designs
- Flexible Cards: Auto-expand based on content
- Skills Overflow: Show first 3 skills + expandable "+N" button
- No Charging Icons: Clean, minimal design
- Uniform Grid: Maintains consistent width
- Styled Cards: Consistent with education/project cards
- Backend Integration: Secure email handling
- Form Validation: Client and server-side validation
- Success Messages: Styled confirmation messages
- Updated Copyright: © 2025 Priyanshu Kumar. Built with React, Tailwind & CSS
- Inspirational Quote: "Transforming data into insight, code into impact."
- React 18 with TypeScript
- Tailwind CSS for styling
- Vite for fast development
- Lucide React for icons
- Radix UI components
- React Router for navigation
- Node.js with Express
- Nodemailer for email handling
- Rate Limiting for security
- CORS protection
- Input Validation
npm installnpm run setup-backendEdit backend/.env with your email credentials:
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your-email@gmail.com
EMAIL_PASS=your-app-password
EMAIL_TO=priyanshumails.bca2025@gmail.com# Start both frontend and backend
npm run start-full
# Or start individually
npm run dev # Frontend only
npm run start-backend # Backend onlyportfolio/
├── src/
│ ├── components/ # React components
│ ├── data/ # Centralized data configuration
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ └── assets/ # Images and static files
├── backend/
│ ├── server.js # Express server
│ ├── package.json # Backend dependencies
│ └── .env.example # Environment template
└── public/ # Static assets
- Dark Mode Only: Light/dark toggle removed, forced dark theme
- Home Screen: Name as "Priyanshu Kumar", larger profile photo, glow effects
- Floating Icons: Only on home screen, disappear when scrolling
- About Screen: Skill cards instead of bars, no percentages
- Education Screen: "Graduated" status, inline timeline & location
- Projects Screen: Flexible cards, skills overflow, no charging icons
- Contact Screen: Consistent styling, backend integration
- Footer: Updated copyright, inspirational quote
- Backend: Node.js/Express server with email handling
- Data System: Centralized configuration for easy management
All content is centralized in src/data/portfolioData.js:
- Personal information
- Skills and technologies
- Education details
- Project information
- Contact details
- Social links
- Enable 2-factor authentication
- Generate App Password in Google Account settings
- Use Gmail address as
EMAIL_USER - Use App Password as
EMAIL_PASS
npm run buildcd backend
npm startMIT License - feel free to use this project for your own portfolio!
This project is built with:
- Vite
- TypeScript
- React
- shadcn-ui
- Tailwind CSS
Simply open Lovable and click on Share -> Publish.
Yes, you can!
To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
Read more here: Setting up a custom domain