An interactive, high-performance portfolio website engineered with React 18, TypeScript, Three.js, Framer Motion, and Tailwind CSS. Features a built-in Admin Panel with real-time Supabase cloud sync, enabling seamless cross-device content management.
🚀 Explore Live Portfolio → https://pkportfolioapp.netlify.app
I am a Full Stack Developer and Computer Science & Engineering undergraduate at SRM Institute of Science and Technology, Chennai. I specialize in building secure backend microservices, responsive web user interfaces, REST APIs, and AI-powered solutions.
- 🎓 Education: B.Tech CSE at SRM IST, Ramapuram (CGPA: 8.56/10)
- 💻 Core Stack: Python (FastAPI, Flask), React, TypeScript, PostgreSQL, Docker, Tailwind CSS
- 🔐 Focus Areas: System Security (JWT, RBAC, AES-256), Cloud Computing & Interactive Web Engineering
- Password-Protected Admin Dashboard: Secure login with environment-variable-based credentials.
- Supabase Real-Time Sync: All edits (CRUD + reordering) are instantly saved to Supabase PostgreSQL and reflected across all devices (mobile, laptop, other browsers) without redeployment.
- Full CRUD + Ordering: Create, update, delete, and drag-to-reorder for all 7 sections — Experiences, Projects, Education, Services, Skills, Certifications, and Stats.
- CSV Persistence: Portfolio data is generated as CSV, stored in Supabase, and served on load with sequential
orderindices for deterministic sorting.
- Real-time Cursor Tracking: Cards dynamically rotate along spatial X and Y axes (
rotateX,rotateY) based on cursor offsets relative to element centers. - Z-Axis Elevation: Lifts cards into 3D space (
translateZ(10px) scale(1.015)) on hover. - Smooth Viewport Entries: High-precision 3D entry transitions (
transformPerspective: 1000, customcubic-beziereasing) trigger smoothly on scroll.
- Inline Certificate Previews: Uses Mozilla's
pdfjs-distto fetch and render PDF certificates client-side directly on HTML5<canvas>elements. - Cross-Browser & Mobile Support: Completely bypasses mobile browser fallback limitations, delivering smooth on-page previews.
- React Portals: Modal overlays (Projects details and Certifications PDF viewer) are rendered directly to
document.bodyviacreatePortal, completely avoiding CSS stacking context clipping bugs on scroll.
- Morphing Profile Shape: Blob-shaped portrait frame featuring continuous fluid
@keyframes morphanimations and flowing neon gradient borders. - WebGL Particle Canvas: Background powered by Three.js rendering thousands of animated dynamic nodes.
| Category | Technology | Description |
|---|---|---|
| Core Framework | React 18.3.1 | Component-driven UI architecture |
| Language | TypeScript 5.8.3 | End-to-end static typing & interface contracts |
| Build System | Vite 5.4.21 | High-speed HMR development server & bundling |
| Package Manager | pnpm | Fast, disk-efficient package management |
| Styling | Tailwind CSS 3.4 | Utility-first custom glassmorphism & responsive layouts |
| Animations | Framer Motion & Three.js | Spatial motion transitions & WebGL background scene |
| Cloud Database | Supabase (PostgreSQL) | Real-time cross-device portfolio data sync |
| Deployment | Netlify | CI/CD auto-deploy on git push |
| PDF Processing | PDF.js (pdfjs-dist) |
Client-side vector canvas PDF rendering |
| Icons & UI | Lucide React & Radix UI | Accessible primitives & SVG icon suite |
- Description: Cloud storage platform using FastAPI integrating AES encryption, SHA-256 hashing, Ethereum blockchain, JWT authentication, Redis, PostgreSQL, MinIO, Docker, and ML-based anomaly detection.
- Stack: Python, FastAPI, Docker, Redis, Ethereum, PostgreSQL, MinIO, JWT
- GitHub: Premkumark20
- Description: AI-powered agricultural platform integrating Google Gemini API for crop disease detection, multilingual recommendations, weather forecasting, and intelligent farming insights.
- Stack: React, Python, Gemini API, JWT, MySQL
- Description: Full-stack application for managing group trip expenses, budget limits, and real-time split calculations.
- Stack: Python (Flask), REST API, HTML/CSS, Render
- GitHub: Trip_Budget_System
- Live Demo: https://trip-budget-system.onrender.com/
- Description: Enterprise payroll system featuring Role-Based Access Control (RBAC), automated salary generation, and attendance management.
- Stack: Python (Flask), SQLite, Role Security, PythonAnywhere
- GitHub: payroll-dbms
- Live Demo: https://premkumark20.pythonanywhere.com/
-
Clone the repository
git clone https://github.com/Premkumark20/Portfolio.git cd Portfolio -
Install dependencies (uses pnpm with shared store)
pnpm install
-
Configure environment variables — create a
.envfile:VITE_SUPABASE_URL=https://your-project.supabase.co VITE_SUPABASE_ANON_KEY=your_anon_key_here VITE_ADMIN_USERNAME=yourusername VITE_ADMIN_PASSWORD=yourpassword
-
Launch dev server
pnpm dev
Open
http://localhost:5173in your browser. -
Production build
pnpm build
Run this SQL once in your Supabase SQL Editor:
create table if not exists portfolio_data (
id text primary key default 'main',
content text not null,
updated_at timestamp default now()
);
alter table portfolio_data enable row level security;
create policy "Allow public read" on portfolio_data for select using (true);
create policy "Allow admin write" on portfolio_data for all using (true);Then add VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to your Netlify Environment Variables.
Access the full admin dashboard at /admin (opens in a new tab from the footer, or navigate directly).
| Section | Operations |
|---|---|
| Personal & Bio | Edit name, title, links, bio summary |
| Resumes | Upload PDF/DOC files, set primary resume |
| Projects | Add, edit, delete, drag-to-reorder |
| Education | Add, edit, delete, drag-to-reorder, set category |
| Work Experience | Add, edit, delete, drag-to-reorder |
| Services | Add, edit, delete, drag-to-reorder |
| Skills | Add categories & skills, drag-to-reorder |
| Certifications | Add, upload PDF/image, drag-to-reorder |
| Stats | Edit label, value, subtext, drag-to-reorder |
| Security | Update admin username & password |
All changes are instantly synced to Supabase and reflected on all devices.
Portfolio/
├── public/
│ └── data/
│ └── portfolio.csv # Static fallback CSV data
├── src/
│ ├── components/
│ │ ├── admin/
│ │ │ ├── AdminAuthModal.tsx # Login modal for inline admin
│ │ │ └── AdminDashboardModal.tsx # Inline admin panel
│ │ ├── ui/
│ │ │ └── TiltCard.tsx # Reusable 3D mouse tilt component
│ │ ├── About.tsx # About Me & statistics section
│ │ ├── Certifications.tsx # PDF.js inline viewer & cert lightbox
│ │ ├── Contact.tsx # Contact form & social channels
│ │ ├── Education.tsx # 3D timeline qualifications
│ │ ├── Footer.tsx # Footer with centered copyright
│ │ ├── Hero.tsx # Morphing profile & quick actions
│ │ ├── Projects.tsx # Project detail modals & progress bars
│ │ ├── Services.tsx # Engineering domain capabilities
│ │ ├── Skills.tsx # Technical competencies grid
│ │ └── ThreeBackground.tsx # WebGL particle background
│ ├── context/
│ │ └── PortfolioContext.tsx # Global state, CRUD, Supabase sync
│ ├── lib/
│ │ ├── csvData.ts # CSV parse, generate, Supabase fetch/save
│ │ └── supabaseClient.ts # Supabase client initialization
│ ├── pages/
│ │ ├── AdminPage.tsx # Full admin dashboard page (/admin)
│ │ └── Index.tsx # Main portfolio page
│ ├── App.tsx # React router & global context
│ ├── index.css # Custom keyframes & styling rules
│ └── main.tsx # DOM root entry
├── netlify/
│ └── functions/
│ └── portfolio-data.js # Netlify serverless function
├── .env # Environment variables (not committed)
├── index.html # Favicon & SEO metadata
├── tailwind.config.ts
├── vite.config.ts # Dev server + /api/portfolio/save endpoint
└── README.md
- Email: premkumark182005@gmail.com
- LinkedIn: Prem Kumar K
- GitHub: Premkumark20
- Location: Poonamallee, Chennai, Tamil Nadu, India
Built with ❤️ by Prem Kumar K