Modern, full-stack React portfolio website showcasing projects, skills, and professional experience with a stunning dark futuristic design.
Live Site: [Your Portfolio URL]
GitHub: widgetwalker
- Dynamic GitHub Integration - Automatically fetches and displays real GitHub repositories
- Smooth SPA Navigation - React Router with hash-based routing for seamless page transitions
- LinkedIn-Synced Timeline - Professional experience and education timeline
- Responsive Design - Mobile-first approach with modern UI/UX
- Dark Futuristic Theme - Neon violet and electric cyan accents with glassmorphism effects
- Animated Components - Intersection Observer animations and smooth transitions
- Type-Safe - Full TypeScript coverage across client and server =======
Live Demo: [portfolio-six-puce-65.vercel.app](https://widgetwalker.netlify.app/)
A modern, interactive portfolio website showcasing my work in web development, 3D graphics, and AI/ML. Built with cutting-edge technologies and featuring immersive 3D experiences.
- 🎨 Interactive 3D Graphics - Powered by Three.js and React Three Fiber
- 🌓 Dark/Light Mode - Seamless theme switching with next-themes
- 📱 Fully Responsive - Optimized for all devices and screen sizes
- ⚡ Lightning Fast - Built with Vite for optimal performance
- 🎭 Smooth Animations - Framer Motion for fluid transitions
- 🎯 Modern UI Components - Radix UI primitives with custom styling
- 📊 Data Visualization - Interactive charts with Recharts
- 🔍 SEO Optimized - Proper meta tags and semantic HTML
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD
- React 18 - Modern UI library
- TypeScript - Type-safe development
- Vite - Lightning-fast build tool with SWC
- React Router 6 - SPA routing
- TailwindCSS 3 - Utility-first styling
- Framer Motion - Smooth animations
- Radix UI - Accessible component primitives (49 components)
- Lucide React - Beautiful icons
- TanStack Query - Server state management
- Express - API server
- CORS - Cross-origin resource sharing
- Vitest - Unit testing
- Prettier - Code formatting
- npm - Package management
🔧 Fixed GitHub Projects Section
- ✅ Replaced anchor tags with React Router Links for smooth SPA navigation
- ✅ Removed hardcoded placeholder repositories
- ✅ Increased display limit from 12 to 30 repositories
- ✅ Improved error handling with helpful GitHub profile fallback
📝 Updated Timeline
- ✅ Added current internships at Blend Vidya and Hyderabad Central University
- ✅ Added past internship at Atal Incubation Centre - BIMTECH
- ✅ Added freelance work experience (Content Writer, Student projects)
- ✅ Maintained all education and achievement entries
⚙️ Configuration Fix
- ✅ Fixed Vite 403 error by updating file serving permissions
Color Palette:
- Background: Deep navy (#0a0e17)
- Primary: Neon violet (#a855f7)
- Accent: Electric cyan (#00aaff)
- Card: Dark slate with transparency
Typography:
- Primary: Space Grotesk
- Headings: GFS Decker
- Code: JetBrains Mono
Effects:
- Gradient text
- Neon borders
- Glassmorphism cards
- Smooth hover animations
- Fade-up entrance animations =======
- Framework: React 18.3 with TypeScript
- Build Tool: Vite 7.1
- Styling: Tailwind CSS 3.4 + CSS Modules
- 3D Graphics: Three.js 0.176 + React Three Fiber + Drei
- Animations: Framer Motion 12
- UI Components: Radix UI + shadcn/ui
- Routing: React Router DOM 6.30
- State Management: TanStack Query 5
- Forms: React Hook Form + Zod validation
- Runtime: Node.js with Express 5
- API: RESTful endpoints
- Deployment: Vercel (Frontend) + Netlify Functions (Serverless)
- Package Manager: pnpm
- Type Checking: TypeScript 5.9
- Code Quality: Prettier
- Testing: Vitest
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD
- Node.js 18+ and npm installed
- Git installed =======
- Node.js 18+
- pnpm (recommended) or npm
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
# Clone the repository
git clone https://github.com/widgetwalker/portfolio.git
cd portfolio
# Install dependencies
<<<<<<< HEAD
npm install
# Start development server
npm run devpnpm install
pnpm dev
The app will be available at `http://localhost:5173`
>>>>>>> 5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
### Build for Production
```bash
<<<<<<< HEAD
# Build both client and server
npm run build
# Build client only
npm run build:client
# Build server only
npm run build:server
# Start production server
npm start
=======
# Build client and server
pnpm build
# Start production server
pnpm start
>>>>>>> 5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
portfolio/
<<<<<<< HEAD
├── client/ # React frontend (SPA)
│ ├── pages/ # Route components
│ ├── components/ # Reusable components
│ │ ├── sections/ # Page sections (Hero, Projects, Timeline, etc.)
│ │ ├── layout/ # Header, Footer
│ │ └── ui/ # 49 Radix UI components
│ ├── lib/ # Utilities and config
│ └── global.css # Theme and global styles
├── server/ # Express API backend
│ ├── routes/ # API endpoints
│ └── index.ts # Server setup
├── shared/ # Shared types between client/server
└── public/ # Static assets
=======
├── client/ # Frontend React application
│ ├── components/ # Reusable UI components
│ ├── pages/ # Route pages
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── App.tsx # Main app component
├── server/ # Backend Express server
├── shared/ # Shared types and utilities
├── public/ # Static assets
├── netlify/ # Netlify serverless functions
└── dist/ # Production build output
>>>>>>> 5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD
- Rotating taglines with crossfade animation
- Profile image with neon effects
- Stats cards (Projects, Hackathons, GPA)
- Personal bio and background
- Focus areas grid (12 specialties)
- Dynamic GitHub repository integration
- Filters out forked repos
- Shows top 30 most recently updated projects
- Click through to detailed project pages
- Technical skills showcase
- Technology stack display
- Education: BSc Computer Science at Pondicherry University
- Current Internships: Blend Vidya, Hyderabad Central University
- Past Experience: BIMTECH, Freelance work
- Achievements: Awards, Hackathons, Competitions
- Contact form
- Social links =======
Interactive landing page with 3D particle effects and animated typography
Personal introduction, skills matrix, and professional journey
Showcase of featured projects with live demos and GitHub links
Visual representation of technical proficiencies across multiple domains
Get in touch form with validation and email integration
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD
npm run vercel-build
# Deploy using Vercel CLI or GitHub integrationUses netlify.toml configuration with serverless functions.
npm run build
npm start
=======
# Deploy to Vercel
vercel deploy --prod# Build and deploy
netlify deploy --prod
>>>>>>> 5fc1e9cda7d310de9ad2f12bbfb00067b8dac464<<<<<<< HEAD
Update in client/lib/config.ts:
export const GITHUB_USERNAME = "widgetwalker";Or set environment variable:
VITE_GITHUB_USERNAME=your-usernameFor higher API rate limits, set:
GITHUB_TOKEN=your-tokenCustomize in client/global.css (HSL CSS variables):
:root {
--primary: 262 83% 58%; /* Neon violet */
--accent: 200 100% 50%; /* Electric cyan */
--background: 222 47% 6%; /* Deep navy */
}# Run all tests
npm test
# Type checking
npm run typecheck
# Code formatting
npm run format.fixThis project is licensed under the GPL-3.0 License - see the LICENSE file for details.
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD This is a personal portfolio, but suggestions and improvements are welcome via issues or pull requests.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
5fc1e9cda7d310de9ad2f12bbfb00067b8dac464
<<<<<<< HEAD Dheeraj Pilli
- GitHub: @widgetwalker
- LinkedIn: pilli-dheeraj
- Portfolio: [Your Portfolio URL]
Dheeraj Pilli - @widgetwalker
- 📧 Email: dheeraj5765483@gmail.com
- 💼 LinkedIn: pillidheeraj
- 🌐 Portfolio: portfolio-six-puce-65.vercel.app
⭐ Star this repo if you find it helpful!
Built with ❤️ by Widget-Walker