e11i0t23 / elliotpowell

My portfolio site, Built with django, react, and threejs.

Portfolio Site

Introduction

A custom portfolio site for a full stack web development. This app utilises ThreeJS to create an immersive background, this is intergrated with React using the React Three Fibre to make up this sites front end. All jsx and functions are written in typescript. Styling is done through css and bootstrap.

The sites backend utilises Django which handles both our web router and api. The apis is used for handling the contact form and managing the project and skills list. Aditionally the backend serves our react site, packaged using webpack to both compile and minify the typescript into a file that can be hosted with the rest of the sites static files. While in development this allows the use of webpack dev server for hotreloading our scripts.

---

Running the application

This app requires both nodejs and Python to be built and run

• Python dependencies are installed with pip install -r requirements.txt
• Node dependencies are installed with npm install

Once dependencies are installed django models must be migrated with python elliotpowell/manage.py migrate it is then also recommened to create a superuser for the admin site using python elliotpowell/manage.py createsuperuser

Development

This App requires two terminal instances to run in development

1. To start the webpack server to handle typescript files run npm run start:dev
2. To start the django server which handles the backend run python elliotpowell/manage.py runserver

Production

The current production version of this site is currently hosted on Heroku and is accessbile https://dev.elliot-powell.com

When running the production site, a seperate database is used, in the case of heroku this is a postgres db, where the url is saved in the environmental variable DATABASE_URL it is also reccomended to set the SECRET_KEY environmental variable.

Build Stage

1. npm run build
2. python elliotpowell/manage.py migrate
3. python elliotpowell/manage.py collectstatic --noinput

Deploy Stage

1. gunicorn --chdir ./elliotpowell elliotpowell.wsgi

---

Distinctiveness and Complexity

This sections relates to this projects submission as a final project for Harvards CS50W online course. I believe it is clear that this project satisfies the distictiveness criteria because this site is not a commerce site, nor is it a communication app (similar to mail or network), instead this site is a developer portfolio displaying a range projects worked on. While a portfolio site may initially not meet the conditions for complexity due to being a largely static site, I have aimed to increase the complexity by adding the following conditions:

• The projects and skills lists must be updatable through an admin pannel.
• The Contact form should submit a post request to the server to save messages in a Django Model.
• On a suitably large screen the website should showcase a preview of each project.
• All front end code should be written in Typescript with TSX.
• To make use of React, the app must precompile this and not make use of the in browser babel transformer.
• ThreeJS is to be used to create an interesting backdrop scene, performance such as load time must still be accounted for.
• Ensure the app works well across varried screen, ensuring aspects such as the menu bar and screen content properly adapt.
• Make use of django-csp and django-crsf to ensure the security of the app is maintained.
• Allow visitors to the site to access various methods of contact and view my resume

These aditional requirements I believe suitably increases the difficulty of the project, creating a well rounded portfolio site that is attractive, functional, and suitbly complex to show off the differing skills taught across the CS50W course whether that is: how to manage data in django, showcaseing reading from databases with the projects and skills lists, and writing with the contact form; security and scalability with the use of djangocsp, csrf handeling and the implmentation of Heroku; And user-interface in interactivity making use of Typescript and React to allow site visitors to interact with the site and all its features, wether that is to learn more about a project or to submit a contact request.

---

Languages, Frameworks, and Tools Used

• HTML
• CSS
  • Bootsrap
• Python
  • Django
  • Django CSP
  • Gunicorn
• Javascript and Typescript
  • React
  • ThreeJS
  • React Three Fibre
  • Webpack
  • Babel
• Git
  • Github
• Heroku
• PostgreSQL

File Tree and Overview

├── elliotpowell # Django Project Folder
│   ├── __init__.py
│   ├── elliotpowell
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── manage.py
│   └── portfolio
│       ├── __init__.py
│       ├── admin.py
│       ├── apps.py
│       ├── migrations
│       ├── models.py # Custom models for Projects, Skills, and Contact form are defined here
│       ├── src
│       │   └── portfolio
│       │       ├── components
│       │       │   ├── about.tsx # A small about section component
│       │       │   ├── composition.tsx # Loads Composition.glb and sets up scroll based animations
│       │       │   ├── contact.tsx # The Contact Form
│       │       │   ├── intro.tsx # The introducion section
│       │       │   ├── screenHTML.tsx # Contains the html content to be rendered on the monitor model
│       │       │   ├── scrollPage.tsx # Sets Up our scroll handeling from the drei module
│       │       │   ├── skills.tsx # Collects and renders the skills list
│       │       │   └── work.tsx # Collects projects from the api and renders a clickable list
│       │       ├── app.tsx # Main entry to the React app, Initialises ThreeJS and headers
│       │       ├── index.tsx # React index file, in charge of rendering root
│       │       ├── portfolio.d.ts # Custom Type definitions for the portfolio app
│       │       └── util
│       │           ├── getCookie.ts # A utility function for getting cookie data
│       │           ├── rsqw.ts # A Math function for smoothing animations
│       │           └── windowDimesnions.ts # A React state based function for getting window width and height
│       ├── static
│       │   └── portfolio
│       │   ├── Composition.glb # GLB File containing the 3d geometry used in the scene
│       │   ├── public
│       │   │   ├── dist
│       │   │   │   └── main.js # An autogenerated file by webpack containing all the compiled javascript code
│       │   │   └── elliot-powell-resume.pdf
│       │   └── styles.css
│       ├── templates
│       │   └── portfolio
│       │       └── index.html # The entry point for React
│       ├── tests.py
│       ├── urls.py
│       └── views.py # All the app's django functions are defined here for both api and serving the index page
├── node_modules
├── app.json # Herkoku config file
├── Procfile # Heroku file for defing commands to run
├── package-lock.json
├── package.json
├── README.md
├── requirements.txt
├── setup.py
├── tsconfig.json
└── webpack.config.js # Webpack config defining how our app is built