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