Portfolio Documentation
Overview
This portfolio showcases my work as a self-taught full-stack developer. Built from scratch using modern technologies, it features responsive design, project and experience CRUD, user authentication, email integration, and a clean visual theme.
Tech Stack Used
- Frontend: Next.js (App Router), TypeScript, Tailwind CSS, Framer Motion
- Backend: Django REST Framework (DRF)
- Database: PostgreSQL
- Auth: JWT-based authentication (SimpleJWT)
- Email: Resend API + Zoho Mail
- Deployment: Vercel (Frontend), Railway (Backend)
Frontend Structure
The frontend is modularized for maintainability. Each main route (`/projects`, `/experience`, etc.) has its own component and CSS. Framer Motion handles animations. API calls are abstracted into the `lib/api` folder for a clean separation of concerns.
Backend Structure
The Django backend provides secure API endpoints for Projects, Experience, Education, Skills, and Contact Form. Permissions restrict POST/PUT/DELETE to authenticated users, while GET is open for all visitors.
Authentication & Authorization
JWT tokens are issued via a custom login endpoint. Frontend stores the token securely in memory context. Only logged-in users can access Add, Edit, or Delete forms.
Contact Form & Email Setup
The contact form posts to a backend endpoint, which uses Resend API to send styled emails. Emails are sent from my Zoho Mail domain and CC my personal Gmail. This replaces third-party form services for a more professional setup.
Deployment Strategy
The project is fully deployed using cloud platforms:
- Frontend: Vercel — automatic deploy on push
- Backend: Railway — PostgreSQL + Django APIs
- Domain: Custom domain connected (abdullahstack.com)
Challenges & Fixes
- Email integration was tricky — switched from Djoser to a fully custom flow
- PDF download was failing due to unsupported color formats — resolved with `html2canvas` + `jsPDF`
- Style consistency and responsiveness were adjusted through multiple iterations
Future Improvements
- Add blog and testimonials section
- Implement language toggle using i18n for the entire site
- Set up unit and integration tests