### Start development server with npm

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Starts the development server with npm. The server runs on http://localhost:3000.

```bash
npm run start
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Navigates into the project directory and installs dependencies using npm.

```bash
cd modern-portfolio
npm install
```

--------------------------------

### Install dependencies with yarn

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Navigates into the project directory and installs dependencies using yarn.

```bash
cd modern-portfolio
yarn
```

--------------------------------

### Full data.json example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md

Complete example of the db/data.json file showing all configurable fields including hero, navLinks, stats, abilities, and more.

```json
{
  "hero": {
    "fullName": "Deri Kurniawan",
    "jobTitle": "Full Stack Developer",
    "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/Hero_2.png"
  },
  "navLinks": [
    {
      "id": "home",
      "label": "Home",
      "url": "/#home"
    },
    {
      "id": "ability",
      "label": "Ability",
      "url": "/#ability"
    },
    {
      "id": "projects",
      "label": "Projects",
      "url": "/#projects"
    },
    {
      "id": "education",
      "label": "Education",
      "url": "/#education"
    },
    {
      "id": "contacts",
      "label": "Contacts",
      "url": "/#contacts"
    }
  ],
  "stats": [
    {
      "label": "Projects",
      "value": 20
    },
    {
      "label": "Trusted By Client",
      "value": 5
    },
    {
      "label": "Total Client",
      "value": 5
    }
  ],
  "abilities": [
    {
      "name": "React JS",
      "icon": "https://img.icons8.com/plasticine/344/react.png",
      "description": "I've been made over 20 apps using React JS."
    },
    {
      "name": "React Native",
      "icon": "https://img.icons8.com/plasticine/344/react.png",
      "description": "I've been made over 10 apps using React Native."
    },
    {
      "name": "Tailwindcss",
      "icon": "https://img.icons8.com/color/344/tailwindcss.png",
      "description": "I've been made over 5 apps using Tailwindcss."
    },
    {
      "name": "Bootstrap 5",
      "icon": "https://img.icons8.com/color/344/bootstrap.png",
      "description": ""
    },
    {
      "name": "Express JS",
      "icon": "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNzIgMTcyIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48cGF0aCBkPSJNMCwxNzJ2LTE3MmgxNzJ2MTcyeiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik04NC45MTQyNSwxMzQuNTloNC4yMjgzM2MzLjAxLDAgNS44NDQ0MiwtMS40MDQ2NyA3LjY2NDc1LC0zLjgwMTkybDI2LjgyMTI1LC0zNS4yODUwOGwyNi44MjEyNSwzNS4yODUwOGMxLjgyMDMzLDIuMzkzNjcgNC42NTQ3NSwzLjgwMTkyIDcuNjY0NzUsMy44MDE5Mmg0LjIyODMzbC0zNC4yMTcyNSwtNDUuMDA2NjdsMzIuNjgzNTgsLTQzaC00LjIyODMzYy0zLjAxLDAgLTUuODQ0NDIsMS40MDQ2NyAtNy42NjQ3NSwzLjgwMTkybC0yNS4yOTExNywzMy4yNzQ4M2wtMjUuMjk0NzUsLTMzLjI3ODQyYy0xLjgyMDMzLC0yLjM5MzY3IC00LjY1NDc1LC0zLjc5ODMzIC03LjY2NDc1LC0zLjc5ODMzaC00LjIyODMzbDMyLjY4MzU4LDQzeiI+PC9wYXRoPjxwYXRoIGQ9Ik04Niw5My4xNjY2N3YtMTAuNzVjMCwtMjMuOTE4NzUgLTIxLjMwMjkyLC00Mi44NjAyNSAtNDUuOTcwNTgsLTM4Ljg4NjMzYy0xOS4yMDMwOCwzLjA5MjQyIC0zMi44NjI3NSwyMC40NTcyNSAtMzIuODYyNzUsMzkuOTA0djIuNTY1Njd2Ny4xNjY2N3YwLjUwODgzYzAsMjMuNDgxNTggMTcuMTE3NTgsNDIuMjMzMTcgMzguOTQzNjcsNDIuNDkxMTdjMTguMjQ2MzMsMC4yMTUgMzMuNjQzOTIsLTExLjk4MjY3IDM4LjM2Njc1LC0yOC42NjMwOGgtMy42ODM2N2MtMi4yMjE2NywwIC00LjIzNTUsMS4yNzIwOCAtNS4xOTk0MiwzLjI3MTU4Yy02LjIzMTQyLDEyLjg4MjA4IC0yMC43NDM5MiwyMS4wMDU1IC0zNi42NTAzMywxNy4zNTA1Y2MtMTQuNjYzLC0zLjM3MTkyIC0yNC42MTAzMywtMTcuMTEwNDIgLTI0LjYxMDMzLC0zMi4xNTMyNXYtMi44MDU3NXpNMTQuMzMzMzMsODQuOTYwODNjMCwtMTYuODcwMzMgMTAuMDQ3NjcsLTMwLjY2MjU4IDI0LjgxMSwtMzMuOTYyODNjMjEuMDQ4NSwtNC43MDEzMyAzOS42ODksMTEuMTggMzkuNjg5LDMxLjQxODY3djMuNTgzMzNoLTY0LjV6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=",
      "description": ""
    },
    {
      "name": "Next JS",
      "icon": "https://cdn.icon-icons.com/icons2/2148/PNG/512/nextjs_icon_132160.png",
      "description": "",
      "inverted": true
    },
    {
      "name": "CodeIgniter 4",
      "icon": "https://img.icons8.com/external-tal-revivo-shadow-tal-revivo/344/external-codeigniter-is-an-open-source-software-rapid-development-web-framework-logo-shadow-tal-revivo.png",
      "description": ""
    },
    {
      "name": "Laravel 8",
      "icon": "https://img.icons8.com/external-tal-revivo-shadow-tal-revivo/344/external-laravel-is-a-free-open-source-php-web-framework-logo-shadow-tal-revivo.png",
      "description": ""
    },
    {
      "name": "PHP 8",
      "icon": "https://img.icons8.com/external-those-icons-lineal-color-those-icons/344/external-PHP-programming-and-development-those-icons-lineal-color-those-icons.png",
      "description": ""
    },
    {
      "name": "MySQL",
      "icon": "https://img.icons8.com/color/344/mysql-logo.png",
      "description": ""
    },
    {
      "name": "MongoDB",
      "icon": "https://img.icons8.com/color/344/mongodb.png",
      "description": ""
    },
    {
      "name": "Firebase",
      "icon": "https://img.icons8.com/color/344/firebase.png",
      "description": ""
    },
    {
      "name": "Git",
      "icon": "https://img.icons8.com/color/344/git.png",
      "description": ""
    },
    {
      "name": "GitHub",
      "icon": "https://img.icons8.com/color/344/github.png",
      "description": ""
    },
    {
      "name": "Figma",
      "icon": "https://img.icons8.com/color/344/figma.png",
      "description": ""
    },
    {
      "name": "Postman",
      "icon": "https://img.icons8.com/color/344/postman.png",
      "description": ""
    },
    {
      "name": "Vercel",
      "icon": "https://img.icons8.com/color/344/vercel.png",
      "description": ""
    },
    {
      "name": "Netlify",
      "icon": "https://img.icons8.com/color/344/netlify.png",
      "description": ""
    },
    {
      "name": "Visual Studio Code",
      "icon": "https://img.icons8.com/color/344/visual-studio-code.png",
      "description": ""
    }
  ],
  "projects": [
    {
      "id": 1,
      "title": "Modern Portfolio",
      "description": "A modern portfolio website built with React and Tailwind CSS.",
      "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/Modern_Portfolio.png",
      "tech": ["React", "Tailwind CSS"],
      "demoUrl": "https://modern-portfolio.vercel.app",
      "repoUrl": "https://github.com/deri-kurniawan/modern-portfolio"
    },
    {
      "id": 2,
      "title": "E-Commerce App",
      "description": "A full-stack e-commerce application with payment integration.",
      "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/E-Commerce.png",
      "tech": ["React", "Node.js", "Express", "MongoDB"],
      "demoUrl": "https://ecommerce-app.vercel.app",
      "repoUrl": "https://github.com/deri-kurniawan/ecommerce-app"
    },
    {
      "id": 3,
      "title": "Chat App",
      "description": "A real-time chat application using Socket.io.",
      "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/Chat_App.png",
      "tech": ["React", "Socket.io", "Node.js"],
      "demoUrl": "https://chat-app.vercel.app",
      "repoUrl": "https://github.com/deri-kurniawan/chat-app"
    },
    {
      "id": 4,
      "title": "Blog Platform",
      "description": "A blog platform with markdown support.",
      "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/Blog_Platform.png",
      "tech": ["Next.js", "MDX", "Tailwind CSS"],
      "demoUrl": "https://blog-platform.vercel.app",
      "repoUrl": "https://github.com/deri-kurniawan/blog-platform"
    },
    {
      "id": 5,
      "title": "Task Manager",
      "description": "A task management app with drag-and-drop.",
      "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1677262485/Github/modern-portfolio/Task_Manager.png",
      "tech": ["React", "Redux", "Node.js"],
      "demoUrl": "https://task-manager.vercel.app",
      "repoUrl": "https://github.com/deri-kurniawan/task-manager"
    }
  ],
  "educations": [
    {
      "id": 1,
      "school": "University of Indonesia",
      "degree": "Bachelor of Computer Science",
      "year": "2015 - 2019"
    },
    {
      "id": 2,
      "school": "Coding Bootcamp",
      "degree": "Full Stack Web Development",
      "year": "2020"
    }
  ],
  "contacts": {
    "email": "deri.kurniawan@example.com",
    "phone": "+62 812-3456-7890",
    "address": "Jakarta, Indonesia",
    "socials": {
      "github": "https://github.com/deri-kurniawan",
      "linkedin": "https://linkedin.com/in/deri-kurniawan",
      "twitter": "https://twitter.com/deri_kurniawan"
    }
  }
}
```

--------------------------------

### Start development server with yarn

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Starts the development server with yarn. The server runs on http://localhost:3000.

```bash
yarn start
```

--------------------------------

### Run and build commands for the page

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/home-page.md

npm scripts to start the dev server and build the static site. The start command serves the page at localhost:3000, and the build command generates static files for the root route.

```sh
npm run start   # http://localhost:3000 renders Home
npm run build   # static generation emits the page for /
```

--------------------------------

### Project JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Project type with fields name, image, and description.

```json
{
  "name": string,
  "image": string,
  "description": string,
}
```

--------------------------------

### Add install icon to manifest

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/pwa-manifest.md

Add a 192x192 icon to the manifest. The referenced src must exist in static/; a missing asset silently breaks the install flow.

```json
{
  "icons": [
    {
      "src": "/img/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
```

--------------------------------

### Ability JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Ability type with fields name, icon, description, and optional inverted.

```json
{
  "name": string,
  "icon": string,
  "description": string,
  "inverted": boolean?
}
```

--------------------------------

### Contact JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Contact type with fields label, icon, description, and url.

```json
{
  "label": string,
  "icon": string,
  "description": string,
  "url": string
}
```

--------------------------------

### Full Data Example (JSON)

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md

A complete JSON data structure for the portfolio, including testimonials, footer navigation links, and social media profiles. Use this as a reference when modifying the portfolio's data.

```json
      "name": "Kenn Gallanger",
      "position": "CEO & Founder",
      "avatar": "https://picsum.photos/id/177/200",
      "review": "There can be no doubt about this Deri's ability. I am very happy to be able to use his services."
    }
  ],
  "footer": [
    {
      "label": "Pages",
      "urls": [
        {
          "label": "Home",
          "url": "/#home",
          "blank": false
        },
        {
          "label": "Stats",
          "url": "/#stats",
          "blank": false
        },
        {
          "label": "Ability",
          "url": "/#ability",
          "blank": false
        },
        {
          "label": "Projects",
          "url": "/#projects",
          "blank": false
        },
        {
          "label": "Education",
          "url": "/#education",
          "blank": false
        },
        {
          "label": "Feedback",
          "url": "/#feedback",
          "blank": false
        },
        {
          "label": "Contacts",
          "url": "/#contacts",
          "blank": false
        }
      ]
    },
    {
      "label": "Blogs & Socials",
      "urls": [
        {
          "label": "Stack Overflow",
          "url": "https://stackoverflow.com/users/19716588/deri-kurniawan",
          "blank": true
        },
        {
          "label": "Github",
          "url": "https://github.com/deri-kurniawan/",
          "blank": true
        },
        {
          "label": "LinkedIn",
          "url": "https://www.linkedin.com/in/deri-kurniawan/",
          "blank": true
        },
        {
          "label": "Instagram",
          "url": "https://www.instagram.com/deri561/",
          "blank": true
        },
        {
          "label": "Twitter",
          "url": "https://twitter.com/derii561",
          "blank": true
        },
        {
          "label": "Medium",
          "url": "https://deri-kurniawan.medium.com",
          "blank": true
        },
        {
          "label": "DEV",
          "url": "https://dev.to/deri_kurniawan",
          "blank": true
        }
      ]
    },
    {
      "label": "Support Us",
      "urls": [
        {
          "label": "Buy Me A Coffee",
          "url": "https://www.buymeacoffee.com/derikurniawan",
          "blank": true
        },
        {
          "label": "PayPal",
          "url": "https://paypal.me/derikurniawan5?country.x=ID&locale.x=en_US",
          "blank": true
        },
        {
          "label": "Ko-fi",
          "url": "https://ko-fi.com/derikurniawan",
          "blank": true
        }
      ]
    }
  ],
  "socialMedia": [
    {
      "label": "Instagram",
      "username": "@deri561",
      "icon": "https://img.icons8.com/color/344/instagram-new--v1.png",
      "url": "https://www.instagram.com/deri561/"
    },
    {
      "label": "Twitter",
      "username": "@derii561",
      "icon": "https://img.icons8.com/color/344/twitter--v1.png",
      "url": "https://twitter.com/derii561"
    },
    {
      "label": "LinkedIn",
      "username": "deri-kurniawan",
      "icon": "https://img.icons8.com/fluency/344/linkedin.png",
      "url": "https://www.linkedin.com/in/deri-kurniawan/"
    },
    {
      "label": "Github",
      "username": "deri-kurniawan",
      "icon": "https://img.icons8.com/fluency/344/github.png",
      "url": "https://github.com/deri-kurniawan/"
    }
  ]
}
```

--------------------------------

### Education JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Education type with fields title, description, timeRange, and url.

```json
{
  "title": string,
  "description": string,
  "timeRange": string,
  "url": string
}
```

--------------------------------

### Hero JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Hero type with fields fullName, jobTitle, and image.

```json
"hero": {
  "fullName": string,
  "jobTitle": string,
  "image": string
}
```

--------------------------------

### Full Data Example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md

This snippet shows a data object with a base64-encoded icon and a URL. It appears to be part of a larger data structure, likely for a portfolio or icon list.

```plaintext
"icon": "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxNzIgMTcyIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48cGF0aCBkPSJNMCwxNzJ2LTE3MmgxNzJ2MTcyeiIgZmlsbD0ibm9uZSI+PC9wYXRoPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik04NiwxNy4yYy0zNy45OTQ4LDAgLTY4LjgsMzAuODA1MiAtNjguOCw2OC44YzAsMzIuMjM4NTMgMjIuMTk5NDcsNTkuMjEzODcgNTIuMTI3NDcsNjYuNjc4NjdjLTAuMzIxMDcsLTAuOTI4OCAtMC41Mjc0NywtMi4wMDY2NyAtMC41Mjc0NywtMy4zNDI1M3YtMTEuNzU5MDdjLTIuNzkyMTMsMCAtNy40NzA1MywwIC04LjY0NTg3LDBjLTQuNzA3MDcsMCAtOC44OTI0LC0yLjAyMzg3IC0xMC45MjIsLTUuNzg0OTNjLTIuMjUzMiwtNC4xNzk2IC0yLjY0MzA3LC0xMC41NzIyNyAtOC4yMjczMywtMTQuNDgyNGMtMS42NTY5MywtMS4zMDE0NyAtMC4zOTU2LC0yLjc4NjQgMS41MTM2LC0yLjU4NTczYzMuNTI2LDAuOTk3NiA2LjQ1LDMuNDE3MDcgOS4yMDIsNy4wMDYxM2MyLjc0MDUzLDMuNTk0OCA0LjAzMDUzLDQuNDA4OTMgOS4xNTA0LDQuNDA4OTNjMi40ODI1MywwIDYuMTk3NzMsLTAuMTQzMzMgOS42OTUwNywtMC42OTM3M2MxLjg4MDUzLC00Ljc3NTg3IDUuMTMxMzMsLTkuMTczMzMgOS4xMDQ1MywtMTEuMjQ4OGMtMjIuOTEwNCwtMi4zNTY0IC0zMy44NDM4NywtMTMuNzU0MjcgLTMzLjg0Mzg3LC0yOS4yMjg1M2MwLC02LjY2MjEzIDIuODM4LC0xMy4xMDY0IDcuNjU5NzMsLTE4LjUzNTg3Yy0xLjU4MjQsLTUuMzg5MzMgLTMuNTcxODcsLTE2LjM4MDEzIDAuNjA3NzMsLTIwLjU2NTQ3YzEwLjMwODUzLDAgMTYuNTQwNjcsNi42ODUwNyAxOC4wMzcwNyw4LjQ5MTA3YzUuMTM3MDcsLTEuNzYwMTMgMTAuNzc4NjcsLTIuNzU3NzMgMTYuNzA2OTMsLTIuNzU3NzNjNS45Mzk3MywwIDExLjYwNDI3LDAuOTk3NiAxNi43NTI4LDIuNzY5MmMxLjQ3OTIsLTEuNzk0NTMgNy43MTcwNywtOC41MDI1MyAxOC4wNDg1MywtOC41MDI1M2M0LjE5NjgsNC4xOTEwNyAyLjE4NDQsMTUuMjI3NzMgMC41ODQ4LDIwLjYwNTZjNC43OTMwNyw1LjQxOCA3LjYxMzg3LDExLjg0NTA3IDcuNjEzODcsMTguNDk1NzNjMCwxNS40NjI4IC0xMC45MTYyNywyNi44NTQ5MyAtMzMuNzkyMjcsMjkuMjIyOGM2LjI5NTIsMy4yODUyIDEwLjg4NzYsMTIuNTE1ODcgMTAuODg3NiwxOS40NzA0djE1LjY3NDkzYzAsMC41OTYyNyAtMC4xMzE4NywxLjAyNjI3IC0wLjIwMDY3LDEuNTM2NTNjMjYuODA5MDcsLTkuMzk2OTMgNDYuMDY3MzMsLTM0Ljg1MjkzIDQ2LjA2NzMzLC02NC44NzI2N2MwLC0zNy45OTQ4IC0zMC44MDUyLC02OC44IC02OC44LC02OC44eiI+PC9wYXRoPjwvZz48L2c+PC9zdmc+",
"url": "https://github.com/deri-kurniawan/"
```

--------------------------------

### Run Docusaurus site with npm scripts

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/docusaurus-config.md

Run the Docusaurus site locally and generate static files. The npm scripts delegate to the Docusaurus CLI (docusaurus start, build, serve, deploy). No import is required in application code.

```sh
npm install
npm run start   # dev server with live reload
npm run build   # static site generation using this config
npm run serve   # serve the built site
```

--------------------------------

### Feedback JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Feedback type with fields name, position, avatar, and review.

```json
{
  "name": string,
  "position": string,
  "avatar": string,
  "review": string
}
```

--------------------------------

### Basic usage - Extend sidebar with explicit items

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/sidebars.md

Example of extending the autogenerated sidebar with explicit items. Add hand-written entries like doc IDs and category objects to the tutorialSidebar array.

```javascript
const sidebars = {
  tutorialSidebar: [
    "intro",
    {
      type: "category",
      label: "Getting Started",
      items: ["getting-started/installation", "getting-started/configuration"],
    },
  ],
};
module.exports = sidebars;
```

--------------------------------

### Complete Home page component (src/pages/index.js)

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/home-page.md

The full module for the Home page component. It imports React, clsx, Docusaurus Link, useDocusaurusContext, Layout, and HomepageFeatures, and defines the HomepageHeader and Home components. The Home component uses useDocusaurusContext to get siteConfig and renders a Layout with a title and description, a HomepageHeader, and a main section with HomepageFeatures.

```jsx
import React from "react";
import clsx from "clsx";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import HomepageFeatures from "@site/src/components/HomepageFeatures";

import styles from "./index.module.css";

function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx("hero hero--primary", styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/intro"
          >
            Documentation
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}
```

--------------------------------

### static/manifest.json web app manifest

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/pwa-manifest.md

Web app manifest for the Docusaurus PWA site, served at /manifest.json. Declares installable PWA identity with theme/background colors, standalone display, scope and start URL, and four PNG icons. Note the PWA plugin injects a different theme-color meta (rgb(37, 194, 160)) in pwaHead.

```json
{
  "theme_color": "#010510",
  "background_color": "#010510",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "name": "Deri Kurniawan Modern Portfolio",
  "short_name": "Deri Portfolio",
  "description": "About Deri Kurniawan Personality, Skills, Education, Projects and Feedback",
  "icons": [
    {
      "src": "/img/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/img/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/img/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```

--------------------------------

### SocialMedia JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON example of the SocialMedia type, which contains label, username, icon, and url fields. The icon field accepts a URL or an inline SVG data URI.

```json
{
  "label": string,
  "username": string,
  "icon": string,
  "url": string
}
```

--------------------------------

### Build the app with npm

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Builds the app with npm for production deployment.

```bash
npm run build
```

--------------------------------

### Build the app with yarn

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Builds the app with yarn for production deployment.

```bash
yarn build
```

--------------------------------

### FooterColumn and FooterLink JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON example of the FooterColumn type, which contains a label and an array of FooterLink objects. Each FooterLink has a label, url, and blank boolean. The blank field is required and is false for in-page anchors and true for external links.

```json
{
  "label": string,
  "urls": [
    {
      "label": string,
      "url": string,
      "blank": boolean
    },
  ]
}
```

--------------------------------

### Lint the app with npm

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Lints the app with npm.

```bash
npm run lint
```

--------------------------------

### Stat JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the Stat type with fields label and value.

```json
{
  "label": string,
  "value": number
}
```

--------------------------------

### Verify manifest after build

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/pwa-manifest.md

Run the build and then grep the built site for the manifest content to confirm it was generated.

```sh
npm run build
# the built site contains manifest.json at the site root
grep -rl "Deri Kurniawan Modern Portfolio" build/ | head
```

--------------------------------

### NavLink JSON example

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/types.md

JSON object showing the structure of the NavLink type with fields id, label, and url.

```json
{
  "id": string,
  "label": string,
  "url": string
}
```

--------------------------------

### Clone the repository

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md

Clones the modern portfolio repository from GitHub.

```bash
git clone https://github.com/Deri-Kurniawan/modern-portfolio.git
```

--------------------------------

### Configure themeConfig.footer in docusaurus.config.js

Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/_autodocs/api-reference/docusaurus-config.md

Defines the footer with dark style, a links array (detailed in tables), and a copyright template literal evaluated at config load time so the year tracks the build year. The links array contains columns for Documentation, Social Media, Support Me, and Blogs.

```javascript
      footer: {
        style: "dark",
        links: [ /* see tables below */ ],
        copyright: `Copyright © ${new Date().getFullYear()} Deri Kurniawan Portfolio, Inc. Built with Docusaurus.`,
      },
```