This project is a personal portfolio website for my class CS 601 O1 final project at Boston University, showcasing resume, skills, and personal information. It is built using HTML, CSS and React with responsive layout.
Side notes: most of the styles were adapted from the previous assignment 3; most of the components are from the previous assignment 5.
You can view the live demo of the project here.
You can view the video presentation of this project on YouTube: https://youtu.be/vwmQ9-jRLm4
- Responsive design that works on various devices
- A clean and modern user interface
- Sections for inventory, about me, and contact information
- Hover effects for interactive user experience
- Fetch portfolio data from Firebase Realtime Database.
- Dynamically rendered a list of edus/experiences/skills on the webpage.
- Admin page that manages contact feedbacks and skills.
- HTML5
- CSS3
- React
- Typescript
- Firebase Realtime Database
- Node.tsx installed on your machine. You can download and install Node.tsx from here.
-
Clone the repository:
git clone https://github.com/lest-xu/bucs601term.git
-
Navigate to the project directory:
cd bucs601term -
Install the React App compiler and other dependencies:
npm install
`npm start`
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
`npm run build`
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
index.tsx: Default root typescript file for the webpage.
App.tsx: Main React component tsx file containing the web pages component with fireabse database logic.
home.tsx: React component tsx file containing the home page logic.
header.tsx: React component tsx file returning the header nav component.
footer.tsx: React component tsx file returning when the footer component.
sidebar.tsx: React component tsx file returning the sidebar component with the profile and skills.
gallery.tsx: React component tsx file containing the gallery page logic that displaying the photos gallery.
resume.tsx: React component tsx file containing the embedded PDF resume.
contact.tsx: React component tsx file containing the contact form that collets users feedback.
index.html: HTML file containing the structure of the webpage.
style.css: CSS file for basic styling from previous assignment 3.
bootstrap.css: CSS file for buttons styling from Bootstrap.
The project directory contains the following files:
protfoliox/
node_modules/
public/
├── favicon.ico
├── index.html
src/
components/
├── InventoryItem.tsx
├── InventoryList.tsx
├── NotFound.tsx
├── ProductDetail.tsx
modules/
├── alert.tsx
├── educationList.tsx
├── experienceList.tsx
├── manageskills.tsx
├── profile.tsx
├── skillsList.tsx
interfaces/
├── iappprops.tsx
├── icontact.tsx
├── ieducation.tsx
├── iexperience.tsx
├── iphoto.tsx
├── iprofile.tsx
├── App.tsx
├── bootstrap.css
├── index.tsx
├── react-app-env.d.ts
├── styles.css
├── .gitignore
├── package-lock.json
├── package.tsxon
├── README.md
├── tsconfig.json