Folder Structure

After creation, your project should look like this:

Output

Running any of these commands will create a directory called my-portfolio inside the current folder. Inside that directory, it will generate the initial project structure, feed all data you will give while building, and finally install the transitive dependencies:

my-portfolio
├── Components
│   ├── About.js
│   ├── Contact.js
│   ├── Detail.js
│   ├── Header.js
│   ├── Portfolio.js
│   ├── Resume.js
│   ├── Service.js
│   └── ValidImage.js
├── Data
│   ├── About.js
│   ├── Contact.js
│   ├── Counter.js
│   ├── Portfolio.js
│   ├── Resume.js
│   └── Skills.js
├── pages
│   ├── api
│   │   └── sendMail.js
│   ├── detail
│   │   └── [id].js
│   ├── _app.js
│   ├── _document.js
│   └── index.js
├── public
│   ├── assets
│   │   ├── js
│   │   │   └── main.js
│   │   └── vendor
│   │       ├── bootstrap
│   │       │   ├── css
│   │       │   │   ├── bootstrap.css
│   │       │   │   ├── bootstrap.css.map
│   │       │   │   ├── bootstrap-grid.css
│   │       │   │   ├── bootstrap-grid.css.map
│   │       │   │   ├── bootstrap-grid.min.css
│   │       │   │   ├── bootstrap-grid.min.css.map
│   │       │   │   ├── bootstrap-grid.rtl.css
│   │       │   │   ├── bootstrap-grid.rtl.css.map
│   │       │   │   ├── bootstrap-grid.rtl.min.css
│   │       │   │   ├── bootstrap-grid.rtl.min.css.map
│   │       │   │   ├── bootstrap.min.css
│   │       │   │   ├── bootstrap.min.css.map
│   │       │   │   ├── bootstrap-reboot.css
│   │       │   │   ├── bootstrap-reboot.css.map
│   │       │   │   ├── bootstrap-reboot.min.css
│   │       │   │   ├── bootstrap-reboot.min.css.map
│   │       │   │   ├── bootstrap-reboot.rtl.css
│   │       │   │   ├── bootstrap-reboot.rtl.css.map
│   │       │   │   ├── bootstrap-reboot.rtl.min.css
│   │       │   │   ├── bootstrap-reboot.rtl.min.css.map
│   │       │   │   ├── bootstrap.rtl.css
│   │       │   │   ├── bootstrap.rtl.css.map
│   │       │   │   ├── bootstrap.rtl.min.css
│   │       │   │   ├── bootstrap.rtl.min.css.map
│   │       │   │   ├── bootstrap-utilities.css
│   │       │   │   ├── bootstrap-utilities.css.map
│   │       │   │   ├── bootstrap-utilities.min.css
│   │       │   │   ├── bootstrap-utilities.min.css.map
│   │       │   │   ├── bootstrap-utilities.rtl.css
│   │       │   │   ├── bootstrap-utilities.rtl.css.map
│   │       │   │   ├── bootstrap-utilities.rtl.min.css
│   │       │   │   └── bootstrap-utilities.rtl.min.css.map
│   │       │   └── js
│   │       │       ├── bootstrap.bundle.js
│   │       │       ├── bootstrap.bundle.js.map
│   │       │       ├── bootstrap.bundle.min.js
│   │       │       ├── bootstrap.bundle.min.js.map
│   │       │       ├── bootstrap.esm.js
│   │       │       ├── bootstrap.esm.js.map
│   │       │       ├── bootstrap.esm.min.js
│   │       │       ├── bootstrap.esm.min.js.map
│   │       │       ├── bootstrap.js
│   │       │       ├── bootstrap.js.map
│   │       │       ├── bootstrap.min.js
│   │       │       └── bootstrap.min.js.map
│   │       ├── bootstrap-icons
│   │       │   ├── fonts
│   │       │   │   ├── bootstrap-icons.woff
│   │       │   │   └── bootstrap-icons.woff2
│   │       │   ├── bootstrap-icons.css
│   │       │   ├── bootstrap-icons.json
│   │       │   └── index.html
│   │       ├── boxicons
│   │       │   ├── css
│   │       │   │   ├── animations.css
│   │       │   │   ├── boxicons.css
│   │       │   │   ├── boxicons.min.css
│   │       │   │   └── transformations.css
│   │       │   └── fonts
│   │       │       ├── boxicons.eot
│   │       │       ├── boxicons.svg
│   │       │       ├── boxicons.ttf
│   │       │       ├── boxicons.woff
│   │       │       └── boxicons.woff2
│   │       ├── glightbox
│   │       │   ├── css
│   │       │   │   ├── glightbox.css
│   │       │   │   └── glightbox.min.css
│   │       │   └── js
│   │       │       ├── glightbox.js
│   │       │       └── glightbox.min.js
│   │       ├── isotope-layout
│   │       │   ├── isotope.pkgd.js
│   │       │   └── isotope.pkgd.min.js
│   │       ├── purecounter
│   │       │   └── purecounter.js
│   │       ├── remixicon
│   │       │   ├── remixicon.css
│   │       │   ├── remixicon.eot
│   │       │   ├── remixicon.less
│   │       │   ├── remixicon.svg
│   │       │   ├── remixicon.symbol.svg
│   │       │   ├── remixicon.ttf
│   │       │   ├── remixicon.woff
│   │       │   └── remixicon.woff2
│   │       ├── swiper
│   │       │   ├── swiper-bundle.min.css
│   │       │   └── swiper-bundle.min.js
│   │       └── waypoints
│   │           └── noframework.waypoints.js
│   ├── Gallery
│   │   ├── Projects
│   │   ├── 404.webp
│   │   ├── bg.webp
│   │   └── pic.webp
│   ├── favicon.ico
│   ├── manifest.json
│   └── Resume.pdf
├── styles
│   └── globals.css
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
└── README.md

28 directories, 108 files

tip

No need to think about complicated folder structure. These are the files required to run your portfolio. Once the installation is done, you can open your portfolio folder: