Create your personal portfolio website in less than 10 minutes

Prerequisites

• node and npm (latest version)

• git (latest version)

1. Inside your terminal, clone betterai-portfolio template and install dependencies.

    git clone git@github.com:raiaqt/betterai-portfolio.git
    cd betterai-portfolio
    npm install
   

2. Open the cloned folder using a text editor. Go to /custom/data.ts and update according to your personal details.

    import { faker } from "@faker-js/faker";
   
    const introduction = {
      title: "YOUR NAME",
      text: "And a brief description of you",
    };
    (...)
   

   You may add a photo for each project by saving them under the /public/images directory, and adding the image file name in projects.

    (...)
    const projects = [
      {
        title: "Software development",
        text: "",
        works: [
          {
            title: "Portfolio",
            text: "A portfolio project to show my capabilities",
            link: "/",
            year: "2024",
            github: true,
            image: "portfolioscreenshot.png",
          },
        ],
      },
    (...)
   

3. Get creative! Changing the colors according to your style by replacing color values in /custom/theme.scss.

    $light-background: #e9e5fb;
    $dark-background: #070721; 
    $highlight-text: #f7f5f9;
    $light-text: #e8dcc7;
    $lowlight-text: #535d65;
    $dark-text: #070721;
   

4. Run the application on your local machine.

    npm run dev
   

5. Go to http://localhost:5173/ and enjoy your very own portfolio!

   

6. This is your own codebase - feel free to explore different parts of the code such as the background in /src/components/ParticleBackground or the text styling in /src/pages/Introduction. You can check out my live demo at raia.codes.