angelique-forest-portfolio

Angelique Breedt - Portfolio Website

This is a React-based portfolio website generated automatically from your CV data.

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm (comes with Node.js)

Installation and Running

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm start
   

3. Open your browser: The app will automatically open at http://localhost:3000

Building for Production

To create a production build:

npm run build

This creates a build folder with optimized files ready for deployment.

Deployment Options

GitHub Pages (Recommended)

This template includes a pre-configured GitHub Actions workflow for automatic deployment:

1. Create a new repository on GitHub
2. Push your code to the repository:

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/yourusername/your-portfolio.git
   git push -u origin main
   

3. Go to your repository’s Settings > Pages
4. Under Source, select GitHub Actions
5. Your portfolio will be automatically built and deployed!

Your site will be available at: https://yourusername.github.io/your-portfolio

Note: For optimal GitHub Pages deployment, add this line to your package.json:

"homepage": "https://yourusername.github.io/your-portfolio",

Netlify

1. Build the project locally using npm run build
2. Drag and drop the build folder to Netlify
3. Or connect your repository for automatic deployments

Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel in your project directory

Customization

Updating Your Information

Edit the file src/data/portfolioData.js to update your personal information, skills, experience, and projects.

Styling

The main styles are in public/index.html. You can modify the CSS to change colors, fonts, and layout.

Adding New Sections

Modify src/App.js to add new sections or change the layout.

Project Structure

portfolio-website/
├── public/
│   └── index.html          # Main HTML template
├── src/
│   ├── data/
│   │   └── portfolioData.js # Your personal data
│   ├── App.js              # Main React component
│   └── index.js            # Entry point
├── package.json            # Dependencies and scripts
└── README.md              # This file

Support

If you need help customizing your portfolio or have questions about deployment, feel free to reach out!

---

Generated by Portfolio Portal - Create your professional portfolio in minutes!