A personal portfolio showcasing projects and blog posts, with backend stats tracking for views and likes.
An innovative portfolio platform built with Next.js, featuring dynamic Projects and Blog sections, an interactive Contact Form, Commenting abilities, and robust Likes and Views tracking powered by Flask serverless functions and Firebase integration.
Table of Contents
This personal portfolio is a web application that showcases projects and blog posts. It uses a serverless backend to track and display real-time statistics like views and likes for both projects and blog posts.
The frontend allows users to explore projects by the tech stack used and filter blog posts by tags. The individual project and blog post pages offer an interactive experience with features like a dynamically generated table of contents, real-time like counters, and Giscus-powered comments. Users can also get in touch via a contact form, which sends submissions directly to the email using EmailJS.
To run the app locally, you need to set up both the frontend and backend.
Backend
$ cd stats
$ pip install -r requirements.txt
$ cp .env.example .envFill in the required values for the Firebase in the .env file.
$ python api/index.pyFrontend
$ cd client
$ npm install
$ cp .env.example .envFill in the required values for Cloudinary, EmailJS, and Giscus in the .env file.
$ npm run devThe website can be accessed through the URL http://localhost:3000/.
The Home page serves as the central hub of the portfolio, offering an intuitive overview of projects, blogs, and contact information. It includes an interactive navigation menu that directs users to the specific sections of the portfolio, providing a seamless browsing experience.
The Projects and Blog sections allow users to browse the articles. Projects can be filtered by the tech stack used, while blog posts can be filtered using tag combinations. Both sections feature search functionality to find projects or posts by name and offer sorting options for views, likes, or publishing date.
Each project and blog post has its own dedicated page that offers a detailed presentation of its content. These pages include rich descriptions, embedded media, dynamically updated views and likes count, and interactive features like the table of contents and comments.
Users can leave comments on projects or blog posts using Giscus. Comments are automatically linked to the relevant discussions, facilitating engagement without requiring additional setup for individual posts.
The table of contents dynamically updates as users scroll through the page, enabling effortless navigation of detailed blog posts or project descriptions.
The Contact Form serves as a direct and efficient communication channel. Users can submit their enquiries or messages by providing their name, email, and a custom message. The form includes validation for all fields, ensuring that submissions are complete and accurate. Upon submission, messages are sent securely using the EmailJS service, which integrates seamlessly with the platform for reliable delivery.
Tracking of likes and views is powered by serverless functions implemented using Flask, ensuring easy scalability and low-maintenance operation. A Firebase database is used to store and manage data for likes and views, offering real-time updates and reliable storage. It is designed to automatically create database records for new projects and blogs, streamlining the process and eliminating the need for manual setup when adding new content. To enhance security, the feature includes an origin checker that restricts requests to only authorised origins, mitigating potential malicious actions.
Because andreihar.com is MIT-licensed, any developer can essentially do whatever they want with it as long as they include the original copyright and licence notice in any copies of the source code.