Portfolio Boilerplate Usage Guide

Installation

To start a new project using this portfolio template, run the following command:

npx create-react-app my-portfolio --template portfolio-template

This will create a new React application in the my-portfolio folder based on the portfolio boilerplate.

Configuration

The portfolio is configured using the portfolio.config.js file. This file contains the main configuration options for your portfolio, such as profile details, projects, experience, and skills. Below is an example configuration:

Example: portfolio.config.js

const portfolioConfig = {
  // Add background images in the public folder
  // Keep two versions of the image: one low resolution and one high resolution
  // Name them as low-res-image.png and high-res-image.png

  profile: {
    name: 'Your Name',
    description: 'Description about your work',
    role: 'Your role',
    mailId: '[email protected]',
    aboutLine1: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet nulla quam, sit amet porttitor orci laoreet a. Vestibulum cursus lorem nec neque varius ultricies. Cras blandit faucibus urna sed iaculis.",
    aboutLine2: 'Phasellus volutpat mollis justo, et mollis orci auctor vel. Fusce luctus varius erat, id pellentesque odio efficitur et.',
    aboutLine3: 'Nunc eleifend est sed convallis mattis. Curabitur tincidunt, justo in imperdiet blandit.'
  },

  projects: [
    {
      title: 'Portfolio Boilerplate',
      shortDescription: 'A customizable portfolio template with React and Tailwind CSS.',
      fullDetails: 'Longer description of the project',
      link: 'https://github.com/yourname/portfolio-boilerplate',
      stacks: ['React', 'Tailwind CSS']
    },
    {
      title: 'E-commerce App',
      shortDescription: 'A scalable e-commerce application built with Next.js.',
      fullDetails: 'Longer description of the project',
      link: 'https://example.com',
      stacks: ['Next.js', 'TypeScript']
    }
  ],

  experience: [
    {
      year: '2022 - Present',
      company: 'Tech Corp',
      position: 'Frontend Developer'
    },
    {
      year: '2020 - 2022',
      company: 'Web Solutions',
      position: 'Junior Developer'
    }
  ],

  skills: ['React', 'Next.js', 'Tailwind CSS', 'JavaScript', 'TypeScript']
}

export default portfolioConfig;

Customization

Tailwind Theme Customization

To modify the theme colors or other Tailwind CSS values, edit the tailwind.config.js file in the root of the project:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1E3A8A',
        secondary: '#10B981'
      }
    }
  }
}

Background Images

Place your low-resolution and high-resolution background images in the public folder. Use the following names for consistency:

• low-res-image.png
• high-res-image.png

Running the Project

To start the development server:

npm run dev

Building the Project

To build the project for production:

npm run build

This will create an optimized production build in the build folder.

Directory Structure

The directory structure of the project after initialization will look like this:

my-portfolio/
├── public/
│   ├── low-res-image.png
│   ├── high-res-image.png
├── src/
│   ├── components/
│   ├── pages/
│   ├── styles/
├── portfolio.config.js
├── tailwind.config.js
├── package.json

You can now start customizing your portfolio by modifying the portfolio.config.js file and adjusting the components as needed.