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