Personal Portfolio page written in next.js and Djnago

http://zoloto.cx.ua/

Successor of the portfolio project

The project is separated into two parts:

• Django based backend with DRF;
• next.js frontend react framework using TypeScript programming language and scss styling modules.

• Django based admin located at: https://api.zoloto.cx.ua/admin that allows full control of the web application content;
• Both single and collection type models that are used to store data with a tinyMCE rich text editor;
• REST endpoinds with nested serializers;
• Telegram based form forwarding;
• SEO attributes customization;
• Fast loading speeds on account on next.js (prerendered pages and image optimizations);
• light and dark themes;
• advanced form validation;
• adaptive design;

• Django 4.1
• jazzmin-jazzmin
• django-solo
• pillow
• djangorestframework
• requests

The backend is based on Django of 4.1 version with a DRF, as it provides ease of use of REST interfaces. To allow full content control, both repetitive (e.g porfolio cases, about tabs and contact cards) and individual models (e.g.hero section, footer and header) can be changed via the admin page.

Some of the models can be edited with a tinyMCE rich text editor field.

The individuality of the corresponding models are preserved via the django-solo SingletonModel.

Some of the model use media in a form of images, so the Pillow library is used.

Form message is stored and then sent via a telegram bot using requests library. The message model creation is intercepted using Django signals.

• react
• react-dom
• next
• next-themes
• framer-motion
• react-awesome-reveal

The frontend is written using next.js react framework with a server side rendering aproach. The project itself is split in a multiple of function based components.

Dark and Light themes are provided by next-themes. To avoid complex code, framer-motion is used to animate projects filtering.

Project is written in TypeScript and SASS, styling is heavely inspired yet developed from scratch by dewi bootstrap template.

The form is validated using onChange listeners and regular expressions, for example to validate a name the following re is used: NAME_REGEX = /.{3,120}/;.

git clone https://github.com/Denis-Source/portfolio2

cd backend/

python3 -m venv env
source env/bin/activate
pip install -r requirements.txt

python manage.py runserver

cd frontend/

npm install
npm run dev

# Or
npm run build
npm run start