A modern, responsive portfolio website built with Next.js 15, TypeScript, and Tailwind CSS. Features a beautiful starry background animation, real-time Codeforces integration, and a clean, professional design.
- Starry Background Animation: Interactive starry night sky with shooting stars and click-generated stars
- Theme Toggle: Seamless dark/light mode switching with smooth transitions
- Framer Motion: Smooth animations and transitions throughout the site
- Responsive Design: Fully responsive layout that works on all devices
- Glass Morphism: Modern glassmorphism effects with backdrop blur
- Real-time Stats: Live Codeforces user statistics and ratings
- Interactive Rating Graph: Visual representation of rating progression over time
- Auto-refresh: Automatic data refresh every 5 minutes
- Manual Refresh: Manual refresh button for immediate updates
- Error Handling: Graceful error handling with user-friendly messages
- Next.js 15: Latest version with App Router
- TypeScript: Full type safety throughout the application
- Tailwind CSS: Utility-first CSS framework with custom animations
- Radix UI: Accessible and customizable UI components
- API Routes: Server-side API endpoints for external integrations
- Next.js 15.2.4: React framework with App Router
- React 19: Latest React version with concurrent features
- TypeScript 5: Static type checking
- Tailwind CSS 3.4.17: Utility-first CSS framework
- Tailwind CSS Animate: Animation utilities
- Radix UI: Headless UI components
- Accordion, Alert Dialog, Avatar, Badge, Button, Card
- Dialog, Dropdown Menu, Form, Hover Card, Input
- Navigation Menu, Popover, Progress, Select, Separator
- Slider, Switch, Tabs, Toast, Tooltip, and more
- Lucide React: Beautiful icon library
- Framer Motion: Animation library for React
- React Hook Form: Performant forms with minimal re-renders
- Zod: TypeScript-first schema validation
- Hookform Resolvers: Integration between React Hook Form and Zod
- Recharts: Composable charting library for React
- Date-fns: Modern JavaScript date utility library
- ESLint: Code linting
- PostCSS: CSS processing
- Autoprefixer: CSS vendor prefixing
The portfolio integrates with the Codeforces API through a custom Next.js API route:
API Endpoint: /api/codeforces
- user.info: Fetch user profile information
- user.rating: Get user rating history
- user.status: Retrieve user submission history
Features:
- Caching with 5-minute revalidation
- Error handling and fallbacks
- Rate limiting protection
- User-Agent headers for API compliance
// app/api/codeforces/route.ts
- Handles multiple Codeforces API endpoints
- Implements caching with Next.js revalidation
- Provides error handling and logging
- Supports query parameters for different data types├── app/
│ ├── api/
│ │ └── codeforces/
│ │ └── route.ts # Codeforces API proxy
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main portfolio page
├── components/
│ ├── ui/ # Radix UI components
│ ├── codeforces-rating-graph.tsx # Rating visualization
│ ├── codeforces-stats.tsx # Stats display
│ └── starry-background.tsx # Background animation
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
└── public/ # Static assets
- Interactive starry night sky animation
- Click-generated stars with fade effects
- Theme-aware (dark/light mode)
- Shooting stars with multiple directions
- Morning sky animation for light mode
- Real-time user statistics display
- Rating color coding based on Codeforces standards
- Auto-refresh functionality
- Manual refresh capability
- Error state handling
- Visual rating progression chart
- Interactive tooltips
- Responsive design
- Theme-aware styling
- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/chinmaydwivedi/Portfolio.git
cd Portfolio
# Install dependencies
pnpm install
# Run the development server
pnpm devNo environment variables required - the Codeforces API is public and doesn't require authentication.
# Build the application
pnpm build
# Start the production server
pnpm startUpdate the following in app/page.tsx:
- Name and title
- About section
- Skills list
- Project details
- Contact information
- Update the
handleprop in the CodeforcesStats component - Customize the refresh interval in the component
- Modify the API endpoint parameters as needed
- Modify
app/globals.cssfor global styles - Update Tailwind configuration in
tailwind.config.js - Customize component styles in individual component files
The portfolio is fully responsive with breakpoints:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
- Image Optimization: Next.js Image component for optimized loading
- Code Splitting: Automatic code splitting with Next.js
- Caching: API responses cached for 5 minutes
- Lazy Loading: Components load on demand
- Bundle Optimization: Tree shaking and minification
pnpm dev # Start development server
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint- TypeScript for type safety
- ESLint for code linting
- Prettier for code formatting
- Husky for git hooks (if configured)
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- GitHub: @chinmaydwivedi
- Portfolio: Live Demo
⭐ Star this repository if you found it helpful!