Personal Portfolio Website

Welcome to my personal portfolio! This website showcases my background, technical skills, projects, and professional experience. It is built using React and designed to provide potential employers, collaborators, or anyone interested in my work, a clear view of who I am and what I can do.

Purpose

The purpose of this portfolio is to provide a professional yet personal platform where I can display my work, skills, and achievements in a way that is easily accessible. It serves as both a dynamic resume and an interactive showcase of my technical projects, giving visitors an opportunity to get to know me better and explore my work in more detail. The website is also designed to be user-friendly, responsive, and visually appealing, reflecting both my design sense and technical capabilities.

Portfolio Features

This portfolio consists of several key sections:

1. Biography Page
   A personal overview of who I am, my educational background, and my interests. A section detailing my passions and goals, providing a more personal touch beyond my technical skills.

2. Projects Page
   A showcase of my design projects and links to figma or live demos. Visitors can explore the work I have done, understand my approach, and view my design style.

3. Skills Page
   A visual presentation of the programming languages, frameworks, and tools I am proficient in.

4. Resume Section
   A downloadable PDF version of my professional resume, summarizing my work experience, key accomplishments, and skills. This section provides a quick way for potential employers to review my qualifications.

5. Contact Page
   A page allowing visitors to reach out to me via a contact form, email address, or through links to my professional social media profiles (e.g., LinkedIn, GitHub). This ensures that anyone interested in connecting with me can do so easily.

Technologies Used

This personal portfolio was built with the following technologies:

React – The primary JavaScript library used to create the interactive elements of the site.
Vite – A modern build tool for faster React development.
CSS – For styling the layout and design.
SCSS - It makes writing CSS more powerful and organized.
GitHub Pages – For hosting and deploying the live version of the website.
Boostrap - Helps you build responsive and good-looking websites quickly.
Javascript - Adds interactivity and logic to your website.

Features and Functionality

Responsive Design: The website is fully responsive and adapts seamlessly to different screen sizes, including mobile and tablet.
Interactive Elements: Some sections of the portfolio (like the Skills Page) feature interactive elements such as hover effects, animations, and clickable badges.
Smooth Navigation: Navigation is made easy with a clean, intuitive header and anchor links, ensuring users can quickly access different sections of the website.

Setup Instructions

To run this project locally, follow the steps below:

Prerequisites

Ensure you have Node.js and npm (or yarn) installed on your computer.

Installation

1. Clone this repository to your local machine: git clone https://github.com/romar-samson/personal-portfolio.git
2. Navigate to the project directory: cd personal-portfolio
3. Install dependencies: npm install
4. Start the development server: npm run dev
5. Open your browser and visit http://localhost:port (usually 5173 is the default port) to view the site locally.

Deployment

To deploy your portfolio to GitHub Pages:

1. Build the project for production: npm run build
2. Push the build folder to your GitHub Pages branch (usually gh-pages): npm run deploy If using GitHub Pages, follow the official guide for deployment.

Live Demo

You can access the live version of your portfolio once it's deployed: GitHub Pages URL: https://romar-samson.github.io/personal-portfolio

Demo Recording

You can access the recording version in this link: Google drive URL: https://drive.google.com/drive/folders/1b8OiP1fEwbBgi6-s44EamJKNRY2tAg_2?usp=sharing