I built this project to exercise and solidify my full stack knowledge as well as to create a developer portfolio. This gist is to show the inner workings of my portfolio as I may not be releasing all of the content on GitHub.
- Angular 2+
- Bootstrap
- SCSS
- Sketch
The front end of this project is a Single-Page-Application built with Angular 2+.
Bootstrap was used to achieve responsive views for mobile, tablet, and any size web browser.
For more advanced customization I used SCSS which allowed me to leverage nested syntax, mixins, and variables.
Before actually building anything, I designed the UI with Sketch
I displayed my navigation menu on the side for large windows.
At a certain breakpoint the navigation menu is displayed at the top. The text and image here is still displayed correctly as per screen size.
I thoroughly planned the design of this web app to maximise efficiency. Other than minute details, the live site is quite similar to the sketched prototype
- Firebase
- Firestore (NoSQL DB)
- Node
- Express
- Captcha v3
- Security Middleware (CORS, input validation)
I built this API to connect to my "Contact us" form and hosted on Google's Firebase (Cloud). Upon submitting, the form generates a token via Google's captcha v3 API.
With the form values and the generated captcha token, the form is submitted to my server via a POST request.
On my server, I implemented middleware and an Express endpoint to handle such a request.
I used CORS middleware to only allow traffic from whitelisted domains as a security layer.
I created middleware for basic input validation.
I created middleware to validate the submitted form Captcha token sent with the form to prevent spam.
Finally, I upload the valid form data into Firestore, Googles' NoSQL database.
For even more details about this server, view the Github Repo
This contact form uses captcha v3, you can view the captcha badge in the bottom right-hand corner.
The form input is uploaded to the Firestore database after validation. A timestamp is appended for sorting purposes.
- CMS
- Wordpress API
- RESTful Web Services
I created a Wordpress website which has each project that I've worked on displayed as a blog post. I configured a plugin which allows me to append extra data in a RESTful way. Using Wordpress API, I fetch this blog post data from my portfolio to dynamically display all my projects. This lets me use Wordpress API as a CMS.
In this figure, this is where the Wordpress blog post is created. I created fields like "Title Languages", "Company Featured Image" and so on. These fields will be used on the site to display each project.
In the figure above we can see that the same "Title Languages" and "Company featured Image" field appears on each respective project.
Upon clicking a project, a popup modal displaying more information such as the Project title, subtitle, and description is shown. This also includes a live link to visit the site where the project/website is hosted on.