mbeps/personal-portfolio

My personal portfolio website where you can learn more about me, see my projects, read my blogs, and see my certifications.

This portfolio website is designed to showcase a comprehensive journey through my educational background, professional experiences, and personal achievements. It features detailed sections on skills, project portfolios, work experiences, university courses, and certificates, all organized to highlight the depth and diversity of my expertise. Interactive functionalities like browsing, filtering, and viewing related materials enhance user engagement, providing a thorough insight into my capabilities and achievements. The site is tailored to be user-friendly with features like light and dark mode and a responsive interface, making it accessible and appealing for all visitors.

What the Website Showcases

Skills Showcase

• View All Skills Grouped into Categories: Easily browse a comprehensive list of all skills, organized into intuitive categories such as programming languages, web development, and more.

• Group by: Users can view skills grouped by categories such as skill types or programming languages, which further shows subskills like libraries and frameworks associated with each main skill.

• Filter By: Implement filters to display skills based on criteria like technology type, general or soft skills, or whether there are related materials (such as projects or certificates) associated with them.

• View Material Related to Skill: Access all materials related to a particular skill, organized by type, such as projects, certificates, or work experiences that demonstrate your proficiency.

• View Related Skills: Explore related skills and technologies; for example, selecting Python might display related subskills like Flask or NumPy, showcasing how interconnected skills enhance your capabilities.

Project Portfolio

• Browse Projects in Different Categories: Easily explore projects sorted into distinct categories like web development, data analysis, and more to find topics that interest you.

• Filtering & Searching Projects: Utilise dynamic filters and a search bar to quickly locate projects by keywords, technologies used, skills, and other metadata.

• Archived Projects: Access a special section that houses all past projects, allowing you to review older or completed works at your leisure.

• View Gallery & Demo Videos: Discover more about each project through a visual gallery and demo videos showcasing the functionality and design of the projects.

• View Technologies, Technical & Soft Skills for the Project: Learn about the technologies used in the projects, along with the technical and soft skills demonstrated in each project's execution.

• Navigate to Repository & Deployed Project: Direct links are provided to both the GitHub repository for code insights and the deployed project to see the live application.

• View List of Features: Detailed listings of all features implemented in each project, highlighting the scope and functionality of the work.

• View Reflective Report: Read reflective reports that provide insights into the learning experiences and challenges faced during the project development.

• View Other Related Materials: Access additional materials related to each project, such as research papers, presentations, and related documentation.

Work Experience & Volunteering

• Browse Roles in Different Categories: Explore entries categorized under professional work or volunteering to find experiences that match your interests or field of work.

• Filtering & Searching Roles: Use search tools and filters to quickly find roles by keywords, industry, technologies, skills, etc.

• Archived Roles: Access a comprehensive archive of past roles, providing a historical view of your professional growth and volunteer contributions.

• Viewing Details About the Role: Detailed view of each role including the company name, location, industry (e.g., software engineering), and the start and end dates of the employment or volunteering period.

• Responsibilities: Discover the specific responsibilities and tasks associated with each role, outlining the scope and impact of your involvement.

• View Technologies, Technical & Soft Skills for the Role: Learn about the technologies you worked with, along with the technical and soft skills developed during each role.

• View Other Related Materials: Access additional documents and materials related to each role, such as letters of recommendation, certificates of achievement, and project summaries.

University Education History

• Browse University Courses: Explore a comprehensive list of all courses undertaken during your university education.

• View Course Details: See detailed information about each course, including the name of the university, type of degree obtained, classification, and the academic years during which the course was taken.

• View Course Modules: Browse through course modules organized by year. Each module can be clicked to reveal more details such as learning outcomes, technologies used, and skills developed.

• View Technologies, Technical & Soft Skills for the Course: Get insights into the technologies and skills, both technical and soft, that were emphasized and developed in each course.

• View Other Related Materials: Access a variety of related materials for each course, including project reports, case studies, and research papers that complement the educational experience.

Certificates & Online Courses

• Browse Certificates in Different Categories: Explore certificates organized by categories such as technology, management, or creative arts to easily find those that match your interests or professional needs.

• Filtering & Searching Certificates: Use powerful search and filtering tools to sort through certificates by name, skills, technologies, or the issuing organization.

• Archived Certificates: Access a special section containing archived certificates, allowing you to review certifications that may no longer be current but still showcase your lifelong learning journey.

• View Certificate: Directly view each certificate, displaying the official document or badge awarded upon completion.

• Read Information: Learn more about each certificate, including a detailed description and the specific learning objectives it covered.

• View Technologies, Technical & Soft Skills for the Role: Discover the technologies, technical, and soft skills associated with each course, highlighting what you have learned and how it applies to your professional capabilities.

• View Other Related Materials: Access additional materials linked to each certificate, such as related certificates, projects completed during the course, and supplementary learning resources.

Blog Space

• Browse Blogs in Different Categories: Explore a variety of blog posts categorized by topics such as technology, career advice, personal development, and more, tailored to engage a diverse audience.

• Filtering & Searching Blogs: Utilize intuitive search tools and filters to find blog posts based on keywords, publication date, or popularity.

• Read Blog: Access each blog post directly, allowing you to read the content in full, including multimedia elements like images and videos embedded within.

• View Technologies, Technical & Soft Skills for the Role: Gain insights into the technologies discussed, as well as the technical and soft skills that are highlighted in each blog post.

• View Other Related Materials: Discover additional materials related to each blog post, such as downloadable resources, external articles, and related blog entries that expand on the topic discussed.

Other Features

Light and Dark Mode

Switch between light and dark modes to suit your browsing preferences, ensuring a comfortable and personalized experience.

Responsive Interface

My portfolio is designed to be responsive and engaging, inviting you to explore my journey in the world of development with ease and interest.

Requirements

These are the requirements needed to run the project:

• Node 18 LTS
• Next.JS 13+ (App Router)

Tech Stack

• TypeScript: a statically typed superset of JavaScript, is used to build reliable and maintainable code, providing early error catching and advanced editor support.

• Next.js: the foundation of the frontend is built using Next.js, a popular React framework that offers tools and conventions for building server-side rendered (SSR) and statically generated web applications, enhancing performance and ease of deployment.

• Tailwind CSS: a highly customizable, low-level CSS framework, provides utility classes that help us build out custom designs efficiently and responsively.

Running Application Locally

To run the application on your local machine, you'll need to follow the steps below:

1. Clone Project Locally

You'll first need to clone the project repository to your local machine. Open your terminal, navigate to the directory where you want to store the project, and run the following command:

git clone https://github.com/mbeps/personal-portfolio.git

2. Install Dependencies

Navigate to the root directory of the project by running the following command:

cd personal-portfolio

Then, install the project dependencies by running:

yarn install

4. Run the Application

Once you've set up your environment variables, you can run the application using the following command:

yarn dev

The application should now be running at http://localhost:3000.

Running Application using Docker

You can build and run the application through Docker.

docker-compose -f docker/docker-compose.yml up --build

personal-portfolio's Issues

FEATURE: Project Filtering Improvements

Is your feature request related to a problem? Please describe.

Currently when searching, it would be great if the archived projects are also shown. Additionally, the filter modal have a message saying that the filters are applied automatically when pressing instead of having inaccurate buttons.

Describe the solution you'd like

Automatically apply archived when searching and sorting.

ENHANCEMENT: Fetch Project Cover Directly insted of Linking it in Constants

Currently, the project cover property is stated directly in the projects constants. This is repetitive as it is the same for every project entry. It also means that the cover needs to be added for each project manually. The site should be able to read the cover automatically and assign it to the correct project.

FEATURE: Show All Credentials, Projects and Blogs for a Skill

Is your feature request related to a problem? Please describe.

It is not possible to verify the skills displayed in the home page. The languages can be verified as opening their modal would display the list of projects.

Describe the solution you'd like

Clicking on a skill tag should allow the user to verify this skill. This can be achieved by showing all the projects, blogs and certificates associated with the skill.

Describe alternatives you've considered

Screenshots

FEATURE: Create `More` page for Displaying Additional Links

Is your feature request related to a problem? Please describe.

There may be too many links on the navbar cluttering it up and making the site overwhelming. Additionally, there is limited space in the navbar meaning that there is a limit one the number of pages the user can navigate to directly.

Describe the solution you'd like

Create a list More which would take the user to a page with more links. This page will have as many links as needed without any space constraints. This page can house links to future pages such as educations, work experience

Describe alternatives you've considered

• Show all the buttons to pages in the navbar
• Do not add any more pages to the site

Screenshots

Tweak: enlarge project image when hovering

• Remove the dark hover effect
• Make the image larger while hovering

Sorting

Implement sorting in the projects page. The user should be able to sort by language, type of project (already exists) and by technology stack. A new component should be used similar to the ones in shopping sites.

Replace galley with carousel

• Use Shadcn UI carousel instead
• This would add transition effects, touch gestures, better design and possibly faster performance

General Improvements

• #244
• #246
• Create global archive component for all pages that require it instead of a different one for each page
• #256
• #250
• #251
• #252
• #259
• #261
• #248
• Add descriptions and learning objectives for certifications
• Centre singular items in the grid

Refactor Skills/Languages

For the project, instead of listing skill strings, list string objects. These objects can be stored in the skills constants file. This way, it will be possible to link skills to projects from the about page. Additionally, they can also be used in future certifications entry where the user would be able to view all the certificates associated with that skill. This would be very similar to how the languages skill works currently.

The languages can also be reused in projects as objects instead of a string.

Importance

• High
• Medium
• Low

BUG: Search not Working in Project Page

Describe the bug

Whenever searching for a project using the search bar, no project is shown even if the metadata matches. Only name of the project works.

Reproducing the bug**

1. Go to the project page /projects
2. Search for anything that is not the name of the project

Expected behavior

Searching for correct data should return a matching project.

Screenshots

Additional context

FEATURE: Add Changing Subtitle

Is your feature request related to a problem? Please describe.

Currently, the subtitle only shows one string Software Engineer but there could be more roles that might need to be shown.

Describe the solution you'd like

There would be a list of roles that the system could take and these be displayed one by one. This way more than one role can be displayed.

Describe alternatives you've considered

• Show all the roles at ones without any transitions or rotations
• Do not make any changes

Screenshots

Importance

• High
• Medium
• Low

Tweak: change post to blog

• Change button name
• Change URL
• Change folder name

REFACTOR: Make Modal Sizes Dynamic

The size of the modal changes depending on how many columns there are. This means that 3 different modal components need to be created even though most of the code is repetitive. The modal should get wider as the number of columns increase (only on medium sizes and above).

FEATURE: Full screen navbar on mobile

Describe the solution you'd like

Instead of a half screen expanding the navbar, use a slideup screen to navigate.

Describe alternatives you've considered

Keep existing implementation

Screenshots

Importance

• High
• Medium
• Low

Tweak: modal healder always visisble

Make the header of the modal always visible even when scrolling down, similar to the site navbar

Add Gradient

Add gradient to accent colours (red).
Possibly add gradient effects

REFACTOR: Improve Hybrid Rendering Architecture

Current Approach

Currently the bundle size and performance are not that good. This is because nesting a server component inside a client component is not efficient. The main page is server-side and then the actual page component is nested inside; then this component is split into a search and filter section which is client-side due to the use of useState and fuse search. The list of items is then server-side. This is illustrated in the diagram below:

Affected pages are the projects page, blogs page and credentials page.

Proposed Approach

The state of the filters are stored using URL params meaning that if the client-side applies some searches or filters, the URL will be changed. The server-side item list section will then be able to read the URL params and update the list of displayed items accordingle. This would not be possible if the state of the filters and searches was stored using useState as the server-side component would not have access to the state. This is illustrated in the diagram below:

FEATURE: Creating Work Experience Page

Is your feature request related to a problem? Please describe.

Currently, there is no way to show my work experience effectively.

Describe the solution you'd like

There should be a page just for listing my work experience. This page should display the list of companies, the dates, the role, etc. Since I could have a lot of work experiences, some of them should be archived.

When opening a specific work experience entry, there should be further information such as the work I did, related material, location, etc.

Describe alternatives you've considered

None

Screenshots

Add title for pages to main page component instead of component list

Remove hover effects on mobile (holding creates hover effect)

FEATURE: Add Education/Certification Page

Is your feature request related to a problem? Please describe.

Currently, the certificates and qualifications cannot be displayed on the site. Instead LinkedIn has to be used which requires the user to leave the site and go to LinkedIn and find the appropriate section. Also there is no way to search for certificates.

Describe the solution you'd like

An approach similar to the project page:

• There would be a list of of certifications similar
• Each certificate entry could have a description
• These certifications can be grouped into sections (qualifications can be their own section)
• Clicking would take the user to a slug page about the said certificate

Other points:

• The certificate slug page will have the link to the actual certification page.
• There can be a list of skills appropriate to that certificate
• There can be a blog talking about what was learnt from the course
• There can also be a contents page

Describe alternatives you've considered

• Only list the certificate and clicking on an entry would take the user directly to the certification page
• This means there is no page for the specific certificate

Screenshots

FEATURE: Creating Education Page

Is your feature request related to a problem? Please describe.

Currently, there is no way to put my education. I would have to put my degree in the certificates page but that is not ideal. Instead a new page just for the education could be created.

Describe the solution you'd like

Page where my degrees can be shown. The page should show the certificate image, the grade and institution. When navigating to a specific degree page, more details can be displayed such as the list of modules, course material, etc.

Describe alternatives you've considered

Using the certificates page.

Screenshots

IMPROVEMENT: Improve Database Structure

Currently, all the relations are stored in one set of technical skills technicalHardSkills. This is not good as only this set of skills needs to be queried. For example, if you want to check skills associated with a programming language, you must query the technicalHardSkills and find instances of that programming language.

BUG: Projects on Home Page have no Cover Images

Describe the bug

When navigating to the home page, the projects that are supposed to have cover images do not. The same projects have cover images in the projects page.

Reproducing the bug**

1. Navigate to the home page
2. Scroll down to the project section

Expected behavior

The cover images should be displayed.

Screenshots

Update issue templates

Update documentation and readme

FEATURE: Archived Projects

Is your feature request related to a problem? Please describe.

It is possible to have too many projects which don't need to be shown directly but it would be nice for them to be still accessible if needed.

Describe the solution you'd like

Create a separate page for the archive. At the bottom of the normal projects page, there can be a button linking to the archived projects. This button would only be shown if there are archived projects. The archived projects page would be the same as the main projects page.

Describe alternatives you've considered

• Remove certain projects

Screenshots

Importance

• High
• Medium
• Low

Add description for each page

ENHANCEMENT: Use URL Params instead of `useState`

Use the built-in URL params for managing state instead of useState. This way the user will be able to link to specific resources directly like a specific image in a gallery or specific set of filters. Additionally, this will also improve performance as a server component can be used instead of a client component.

BUG: Fix Hydration on Home Page

Describe the bug

The error doesn't break functionality.

Reproducing the bug**

1. Go to the home page
2. Refresh if needed
3. Check dev tools or wait for message

Expected behavior

No hydration errors

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

BUG: Can navigate to non existent projects

Describe the bug

It is possible to enter a non existent project which would show a page with no project metadata.

Reproducing the bug**

1. Navigate to /projects/non-existent

Expected behavior

Should display a 404 not found message.

Screenshots

Additional context

Severity:

• High (completely break the functionality and usability of the site)
• Medium (significant disruption or degrade user experience)
• Low (only cause minor disruption keeping the site functional)

FEATURE: Add Categories to Blogs

Is your feature request related to a problem? Please describe.

Currently all the blogs are shown in a list. This makes it cluttered as some blogs are about Software Engineering, some about DevOps, etc.

Describe the solution you'd like

Similar to the projects page, the blogs could have a new entry where a category is stored. The blogs would then be grouped based on the category stated in the metadata.
This would also allow the user to only view a specific category only like the projects page.

Describe alternatives you've considered

Keep the current system and only use search.

Screenshots

Importance

• High
• Medium
• Low

Using Relational Database

Currently, the relation between skills, projects, certificates and blogs are modelled using the file system and TypeScript objects similar to a document based non relational database. Modelling these relations is becoming increasingly difficult and more confusing as they can only be one way. A relational database would be more efficient at modelling these relations.

Add sections to posts

• Section for each topic like web development, machine learning, projects, etc
• Each article will have its type
• Remove display and show type instead

Add Contents Sidebar to Blog

Instead of having the contents at the top, it should always be visible on the side.

Tweak: navbar

• Add shadow
• Make transparent and blurred
• Remove line

Tweak: increase contrast for modal and background

• Make background blur darker in light mode
• Make background blur lighter in dark mode

BUG: Certificate Page Structure Inconsistent

Describe the bug

The description title is not centered but all the other ones are. Learning objective bullet points are also misaligned.

Reproducing the bug**

1. Go to the credentials page
2. Open a certificate

Expected behavior

The description heading should also be centered like the other subheadings. The bullet points and text should be aligned to the left

Screenshots

Additional context

Using React Compiler for Massive Performance Gains

React compiler in React 19 adds significant performance gains. NextJS 15 already added support.

• React
• NextJS
• Radix UI
• FuseJS Search Hook in search component

BUG: Project Thumbnails not shown in the Skill Page

Describe the bug

Projects that have thumbnails, do not render thumbnails in the skill page. However, they are displayed in their dedicated projects page and in the home page.

Reproducing the bug**

1. Navigate to skill page, for example Next.JS

Expected behavior

Thumbnails should be displayed.

Screenshots

Additional context

This probably happens due to the use of the server side params prop.

Update button labels

REFACTOR: ShadCn UI Instead of Headless UI and Improve Architecture

• More flexible
• Quicker development
• Carousel component that can be used for gallery

Components need to be replaced with the Shadcn UI components:

• Modal
• Input field
• #304
• Sheet for mobile sidebar and filter panel
• Toggle
• Buttons
• Update theme toggle to use new theme provider

Some architectural improvements can also be made:

• Use global modal provider
• Add global toast notification provider
• Use group directories to organise pages and using different layout components (if needed)

BUG: Cropped Certificate Thumbnails

Describe the bug

On medium screen in portrait, the certificate thumbnails are cut off.

Reproducing the bug**

1. Open site
2. Navigate to credentials page
3. Rotate screen to portrait

Expected behavior

The thumbnails should not be cropped.

Screenshots

Platforms

• Device: iPad Pro
• OS: iPadOS
• Browser: Firefox
• **Version:**All

Additional context

Remove slide up animation in the projects page

Display no post message if there are no posts

Display no post message if there are no posts. Currently, nothing is displayed.

Create separate components for filter button, clear filters button and filter modal buttons

BUG: Skills Modal not Grouping by Language

Describe the bug

In the skills modal, when grouping by language, no technology is shown.

Reproducing the bug**

1. Navigate home /
2. Open skill modal ...>
3. Click on the Group by dropdown
4. Select Language

Expected behavior

All the technologies should be grouped into languages. Skills that are not part of languages should be displayed in an Other group

Screenshots

Additional context

REFACTOR: Use Directories to Store Blog Markdown Files

Currently all the blogs stored in one blogs directory and read. The slug is the name of the markdown file. This works perfectly fine. Adding images would be more tedious though; this is because all the assets (images) would need to be stored elsewhere making everything less efficiently structured. Instead, they can be stored in the same directory as the blog file instead isolated from other assets from other blog files; this requires each blog file to be stored in its own directory. Each blog directory can be named after the slug instead of the file itself.

Documentation: Improve for the whole Codebase

• Add documentation for the constants relationships
• Move related constants into new folder called database
• Write documentation for all directories and how they are structured in terms of components
• Write which components are required by what
• Write important documentation in the Wiki