A modern, responsive, and feature-rich portfolio website showcasing full-stack development expertise with cutting-edge technologies and optimal performance.
- ✨ Features
- 🛠️ Tech Stack
- 🏗️ Architecture
- ⚡ Performance
- 🚀 Getting Started
- 📁 Project Structure
- 🔧 Development
- 🌐 Deployment
- 📱 Responsive Design
- 🎨 Theme & Styling
- 📧 Contact Integration
- 🔍 SEO & Analytics
- 👨💻 About the Developer
- 📄 License
- Interactive Portfolio Sections: Intro, About, Projects, Skills, Experience, Contact
- Dynamic Project Showcase: 3 featured projects with live demos and source code
- Professional Experience Timeline: Detailed work history with animations
- Skills Visualization: Comprehensive technical skills display
- Contact Form: Integrated email functionality with React Email and Resend
- Dark/Light Theme Toggle: Persistent theme switching with smooth transitions
- Smooth Animations: Framer Motion powered interactions and page transitions
- Responsive Design: Mobile-first approach with optimal viewing on all devices
- Interactive Elements: Hover effects, scroll animations, and dynamic content
- Performance Optimized: Image optimization, lazy loading, and code splitting
- Server-Side Rendering: Next.js 14 with App Router for optimal SEO
- TypeScript Integration: Type-safe development with comprehensive type definitions
- Modern React Patterns: Custom hooks, context providers, and functional components
- Code Quality: ESLint configuration with Next.js best practices
- Analytics Integration: Vercel Analytics and Speed Insights
- Accessibility: WCAG compliant with semantic HTML and ARIA labels
- Next.js 14.0.4 // React framework with App Router
- React 18 // UI library with latest features
- TypeScript 5 // Type-safe JavaScript
- Tailwind CSS 3.3 // Utility-first CSS framework- Framer Motion 10.16.16 // Advanced animations and gestures
- React Intersection Observer // Scroll-based animations
- React Vertical Timeline // Experience timeline component- React Email 0.0.12 // Email template components
- Resend 2.1.0 // Email delivery service
- React Hot Toast 2.4.1 // Toast notifications- React Icons 4.12.0 // Comprehensive icon library
- Next.js Image // Optimized image loading
- Custom SVG assets // Performance-optimized graphics- Vercel Analytics 1.3.1 // User analytics and insights
- Vercel Speed Insights 1.0.14 // Performance monitoring
- Microsoft Clarity // User behavior analytics- ESLint 8 // Code linting and quality
- PostCSS 8 // CSS processing
- Autoprefixer 10 // CSS vendor prefixing├── 📱 App Router (Next.js 14)
│ ├── 🎨 Layout Components
│ │ ├── Header (Navigation)
│ │ ├── Footer (Links & Info)
│ │ └── ThemeSwitch (Dark/Light)
│ ├── 📄 Page Sections
│ │ ├── Intro (Hero Section)
│ │ ├── About (Personal Info)
│ │ ├── Projects (Portfolio)
│ │ ├── Skills (Technical Stack)
│ │ ├── Experience (Timeline)
│ │ └── Contact (Form & Links)
│ └── 🔧 Utility Components
│ ├── SectionHeading
│ ├── SectionDivider
│ └── SubmitBtn
├── 🔄 Context Providers
│ ├── ActiveSectionContext
│ └── ThemeContext
├── 🎯 Custom Hooks
│ ├── useSectionInView
│ └── useActiveSectionContext
└── 📊 Data Layer
├── Static Content (lib/data.tsx)
├── Type Definitions (lib/types.ts)
└── Utility Functions (lib/utils.ts)
- Context API: Global state for theme and active section tracking
- React Hooks: Local component state and side effects
- Custom Hooks: Reusable stateful logic for section visibility
- TypeScript: Compile-time type safety and IntelliSense
- Static Generation: Pre-rendered pages for instant loading
- Image Optimization: Next.js Image component with lazy loading
- Code Splitting: Dynamic imports for non-critical components
- Bundle Analysis: Optimized bundle size (149kB total)
- Caching: Aggressive caching strategies for static assets
# Build Output
Route (app) Size First Load JS
┌ ○ / 18.6 kB 149 kB
└ ○ /_not-found 869 B 82.8 kB
+ First Load JS shared by all 82 kB- Structured Data: JSON-LD schema for rich snippets
- Open Graph: Social media preview optimization
- Twitter Cards: Enhanced Twitter sharing experience
- Meta Tags: Comprehensive SEO meta information
- Sitemap: Automatic sitemap generation
Node.js 18+ and npm or yarn package manager- Clone the repository
git clone https://github.com/selvin-paul-raj/dev_portfolio.git
cd dev_portfolio- Install dependencies
npm install
# or
yarn install- Set up environment variables
cp .env.example .env.localRequired environment variables:
# Email Service (Resend)
RESEND_API_KEY=your_resend_api_key
# Analytics (Optional)
NEXT_PUBLIC_VERCEL_ANALYTICS_ID=your_analytics_id- Run the development server
npm run dev
# or
yarn dev- Open in browser
http://localhost:3000
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint checksdev_portfolio/
├── 📱 app/ # Next.js App Router
│ ├── favicon.ico # Site favicon
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ ├── page.tsx # Home page component
│ └── profile.jpg # Profile image
├── 🧩 components/ # React components
│ ├── About.tsx # About section
│ ├── Contact.tsx # Contact form
│ ├── Experience.tsx # Experience timeline
│ ├── Footer.tsx # Site footer
│ ├── Header.tsx # Navigation header
│ ├── Intro.tsx # Hero section
│ ├── Project.tsx # Individual project card
│ ├── Projects.jsx # Projects section
│ ├── SectionDivider.tsx # Visual dividers
│ ├── SectionHeading.tsx # Section titles
│ ├── Skills.tsx # Skills display
│ ├── SocialLinks.tsx # Social media links
│ ├── SubmitBtn.tsx # Form submit button
│ └── ThemeSwitch.tsx # Theme toggle
├── 🎯 context/ # React Context providers
│ ├── active-section-context.tsx # Active section tracking
│ └── theme-context.tsx # Theme management
├── 📧 email/ # Email templates
├── 📚 lib/ # Utility libraries
│ ├── data.tsx # Static content data
│ ├── hooks.ts # Custom React hooks
│ ├── types.ts # TypeScript definitions
│ └── utils.ts # Utility functions
├── 🖼️ public/ # Static assets
│ ├── aicalculator.png # Project screenshot
│ ├── speedtype.png # Project screenshot
│ ├── troothview.png # Project screenshot
│ ├── SPR_Resume.pdf # Resume document
│ └── selvinpaulrajK_profile.png # Profile images
├── 🎬 actions/ # Server actions
│ └── sendEmails.ts # Email sending logic
├── 🛠️ utils/ # Utility functions
│ └── calculateDuration.js # Date calculations
├── ⚙️ Configuration Files
│ ├── .eslintrc.json # ESLint configuration
│ ├── .gitignore # Git ignore patterns
│ ├── next.config.js # Next.js configuration
│ ├── package.json # Dependencies and scripts
│ ├── postcss.config.js # PostCSS configuration
│ ├── tailwind.config.ts # Tailwind CSS configuration
│ └── tsconfig.json # TypeScript configuration
- TypeScript: Strict type checking enabled
- ESLint: Next.js recommended configuration
- Prettier: Code formatting (configured in VS Code settings)
- Component Architecture: Functional components with hooks
- Custom Hooks: Reusable stateful logic extraction
1. Feature Development
├── Create feature branch
├── Implement component/feature
├── Add TypeScript types
├── Test functionality
└── Run lint checks
2. Testing & Quality
├── npm run lint # Code quality check
├── npm run build # Production build test
└── Manual testing # UI/UX verification
3. Deployment
├── Merge to main branch
├── Automatic Vercel deployment
└── Production verification// 1. Create component in /components
export default function NewSection() {
const { ref } = useSectionInView("NewSection", 0.5);
return <section ref={ref} id="newsection">...</section>;
}
// 2. Add to navigation in /lib/data.tsx
export const links = [
// ... existing links
{
name: "NewSection",
hash: "#newsection",
icon: <YourIcon />,
},
];
// 3. Import and use in /app/page.tsx
import NewSection from "@/components/NewSection";The project is optimized for Vercel deployment with automatic:
- Build Pipeline: Automatic builds on git push
- Environment Variables: Secure environment management
- Analytics: Built-in performance monitoring
- Domain Management: Custom domain support
1. Build the application
npm run build
2. Test production build locally
npm run start
3. Deploy to Vercel
npx vercel --prod
4. Configure environment variables
- RESEND_API_KEY
- Any additional API keys- Netlify: Full static site support
- AWS Amplify: Enterprise-grade hosting
- GitHub Pages: Static deployment option
- Railway: Full-stack deployment
/* Mobile First Approach */
sm: '640px' // Tablets
md: '768px' // Small laptops
lg: '1024px' // Laptops
xl: '1280px' // Desktops
2xl: '1536px' // Large screens- Navigation: Collapsible mobile menu
- Project Cards: Responsive grid layout
- Timeline: Adaptive vertical/horizontal layout
- Images: Optimized for all screen sizes
- Typography: Scalable text hierarchy
// Color Palette
Primary: #805c8b (Purple)
Secondary: #CDECFF (Light Blue)
Background Light: #FAFAF9
Background Dark: #000000
Text Light: #374151
Text Dark: #f3f4f6- CSS Variables: Dynamic theme switching
- Tailwind Classes: Conditional dark mode classes
- Local Storage: Theme preference persistence
- System Preference: Automatic OS theme detection
// Framer Motion Configurations
Initial: { opacity: 0, y: 100 }
Animate: { opacity: 1, y: 0 }
Transition: { delay: 0.175 }The contact form uses Resend for reliable email delivery:
// Required Environment Variables
RESEND_API_KEY=re_xxxxxxxxx
// Email Configuration
From: noreply@yourdomain.com
To: selvinpaulrajk@gmail.com
Template: React Email components- Validation: Client-side form validation
- Toast Notifications: Success/error feedback
- Rate Limiting: Spam prevention
- Accessibility: Screen reader compatible
// Metadata Configuration
Title: "Selvin PaulRaj | Full-Stack MERN Developer Portfolio"
Description: "Explore the portfolio of Selvin PaulRaj K..."
Keywords: ["Full-stack Developer", "MERN Stack", "React", "Next.js"]
OpenGraph: Social media optimization
StructuredData: JSON-LD schema markup- Vercel Analytics: User behavior tracking
- Speed Insights: Performance monitoring
- Microsoft Clarity: Heatmap and session recordings
- Google Verification: Search Console integration
Selvin PaulRaj K - Full-Stack MERN Developer
- B.Tech Information Technology - DMI College of Engineering (CGPA: 8.4)
- Founder & CEO - GenXRverse (Mar 2024 - Present)
- Python Development Intern - OCTANET SERVICES PVT LTD
- Web Development Intern - VERITECH SOFTWARE IT SERVICES
- Full Stack Intern - SERVIMOS TECHNOLOGIES PVT LTD
- AI Calculator - Next.js 15 + TypeScript + Gemini AI
- TroothView - React + AI Image Verification + Chart.js
- Speed Typing - React + TypeScript + Framer Motion + Jest
Frontend: HTML5, CSS3, JavaScript, TypeScript, React, Next.js, Tailwind CSS Backend: Node.js, Express.js, Python, Flask Database: MongoDB, MySQL Tools: Git, VS Code, Postman, Vercel Other: Redux, Framer Motion, REST APIs, Responsive Design
- Website: selvinpaulraj.vercel.app
- LinkedIn: selvinpaulrajK
- GitHub: selvin-paul-raj
- Email: selvinpaulrajk@gmail.com
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Give a ⭐️ if this project helped you or if you found it interesting!
Built with ❤️ by Selvin PaulRaj
Showcasing modern web development with Next.js, TypeScript, and cutting-edge technologies