### Start Development Server (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Starts the development server using npm, typically running on http://localhost:3000. ```bash npm run start ``` -------------------------------- ### Start Development Server (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Starts the development server using yarn, typically running on http://localhost:3000. ```bash yarn start ``` -------------------------------- ### Install Dependencies (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Installs project dependencies using yarn after cloning the repository. ```bash cd modern-portfolio yarn ``` -------------------------------- ### Start Development Server (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Starts the development server using npm, typically running on http://localhost:3000. ```bash npm run start ``` -------------------------------- ### Start Development Server (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Starts the development server using yarn, typically running on http://localhost:3000. ```bash yarn start ``` -------------------------------- ### Install Dependencies (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Installs project dependencies using npm after cloning the repository. ```bash cd modern-portfolio npm install ``` -------------------------------- ### Install Dependencies (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Installs project dependencies using yarn after cloning the repository. ```bash cd modern-portfolio yarn ``` -------------------------------- ### Install Dependencies (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Installs project dependencies using npm after cloning the repository. ```bash cd modern-portfolio npm install ``` -------------------------------- ### Portfolio Setup and Configuration Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md This snippet details the initial setup and configuration steps for the modern portfolio. It covers cloning the repository, installing dependencies, and configuring project-specific settings. ```Markdown ## Project Setup 1. **Clone the repository:** ```bash git clone https://github.com/Deri-Kurniawan/modern-portfolio.git cd modern-portfolio ``` 2. **Install dependencies:** ```bash npm install ``` 3. **Configure your portfolio:** Edit the `config.json` file to customize your information, projects, skills, and more. ```json { "name": "Your Name", "title": "Your Title", "email": "your.email@example.com", "socialLinks": [ {"platform": "LinkedIn", "url": "#"}, {"platform": "GitHub", "url": "#"} ], "projects": [ { "name": "Project Name", "description": "Project Description", "imageUrl": "path/to/image.jpg", "tags": ["tag1", "tag2"], "url": "#" } ] } ``` ``` -------------------------------- ### Project Example Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/configuration/modifying-data.md An example of how project data is structured, including name, image URL, and a brief description. This structure is used to showcase completed work. ```json { "name": "Other Example Projects", "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1663606820/Deri%20Kurniawan%20Portfolio%20Web%20App/projects/Project-1_iynwb0.png", "description": "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam" } ``` -------------------------------- ### Environment Variables Configuration Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/environment-variables.md This section outlines the environment variables needed to run the Modern Portfolio application. It covers both required and optional variables, explaining their purpose, default values, and providing examples for configuration in the `.env` file. ```markdown # Environtment Variables You need to set up your environment variables to run the app. You can set up your environment variables in `.env` file. You can copy the `.env.local.example` file and rename it to `.env` or `.env.local`, don't worry both of it's name is accepted by nextjs. ## Overview The following environment variables are available to configure the behavior of the application. ## Required :::info If you set `DATA_SOURCE` to `internal`, your app will get internal data on `db/data.json` file. ::: :::caution If you set `DATA_SOURCE` to `external`, you need to set all of this **[optional variables](#optional)** on your `.env` file. ::: | Variable | Description | Available | Default | Example | | ------------- | ----------------------------------------- | ------------------------ | ----------- | ---------- | | `DATA_SOURCE` | Configuration for getting datasource from | `internal` \| `external` | `undefined` | `internal` | ## Optional :::note If you set `DATA_SOURCE` to `external`, you need to set all of this variables on your `.env` file. ::: | Variable | Description | Default | Example | | -------------- | ------------ | ----------- | ---------------------------------------------------------------------------------------------------------- | | `DATABASE_URL` | MongoDB URL | `undefined` | `mongodb+srv://:@.izmzeam.mongodb.net/?retryWrites=true&w=majority` | | `BASE_URL` | Deployed URL | `undefined` | `https://modern-portfolio.deri.my.id` | If you decide to using MongoDB, you should see MongoDB documentation for more information about [MongoDB URL](https://docs.mongodb.com/manual/reference/connection-string/). ``` -------------------------------- ### Environment Variables Configuration Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/configuration/environment-variables.md This section outlines the environment variables needed to run the Modern Portfolio application. It covers both required and optional variables, explaining their purpose, default values, and providing examples for configuration in the `.env` file. ```markdown # Environtment Variables You need to set up your environment variables to run the app. You can set up your environment variables in `.env` file. You can copy the `.env.local.example` file and rename it to `.env` or `.env.local`, don't worry both of it's name is accepted by nextjs. ## Overview The following environment variables are available to configure the behavior of the application. ## Required :::info If you set `DATA_SOURCE` to `internal`, your app will get internal data on `db/data.json` file. ::: :::caution If you set `DATA_SOURCE` to `external`, you need to set all of this **[optional variables](#optional)** on your `.env` file. ::: | Variable | Description | Available | Default | Example | | ------------- | ----------------------------------------- | ------------------------ | ----------- | ---------- | | `DATA_SOURCE` | Configuration for getting datasource from | `internal` \| `external` | `undefined` | `internal` | ## Optional :::note If you set `DATA_SOURCE` to `external`, you need to set all of this variables on your `.env` file. ::: | Variable | Description | Default | Example | | -------------- | ------------ | ----------- | ---------------------------------------------------------------------------------------------------------- | | `DATABASE_URL` | MongoDB URL | `undefined` | `mongodb+srv://:@.izmzeam.mongodb.net/?retryWrites=true&w=majority` | | `BASE_URL` | Deployed URL | `undefined` | `https://modern-portfolio.deri.my.id` | If you decide to using MongoDB, you should see MongoDB documentation for more information about [MongoDB URL](https://docs.mongodb.com/manual/reference/connection-string/). ``` -------------------------------- ### Full Data Example (JSON) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md This JSON object represents the complete data structure for the modern portfolio, including hero section details, navigation links, statistics, and a list of abilities with their associated icons and descriptions. ```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+PC9wYXRoPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik04NC45MTQyNSwxMzQuNTloNC4yMjgzM2MzLjAxLDAgNS44NDQ0MiwtMS40MDQ2NyA3LjY2NDc1LC0zLjgwMTkybDI2LjgyMTI1LC0zNS4yODUwOGwyNi44MjEyNSwzNS4yODUwOGMxLjgyMDMzLDIuMzkzNjcgNC42NTQ3NSwzLjgwMTkyIDcuNjY0NzUsMy44MDE5Mmg0LjIyODMzbC0zNC4yMTcyNSwtNDUuMDA2NjdsMzIuNjgzNTgsLTQzaC00LjIyODMzbC0yNS4yOTExNywzMy4yNzQ4M2wtMjUuMjk0NzUsLTMzLjI3ODQyYy0xLjgyMDMzLC0yLjM5MzY3IC00LjY1NDc1LC0zLjc5ODMzIC03LjY2NDc1LC0zLjc5ODMzaC00LjIyODMzbDMyLjY4MzU4LDQzeiI+PC9wYXRoPjxwYXRoIGQ9Ik04Niw5My4xNjY2N3YtMTAuNzVjMCwtMjMuOTE4NzUgLTIxLjMwMjkyLC00Mi44NjAyNSAtNDUuOTcwNTgsLTM4Ljg4NjMzYy0xOS4yMDMwOCwzLjA5MjQyIC0zMy44NjI3NSwyMC40NTcyNSAtMzIuODYyNzUsMzkuOTA0djIuNTY1Njd2Ny4xNjY2N3YwLjUwODgzYzAsMjMuNDgxNTggMTcuMTE3NTgsNDIuMjMzMTcgMzguOTQzNjcsNDIuNDkxMTdjMTguMjQ2MzMsMC4yMTUgMzMuNjQzOTIsLTE3LjEwMDUgMzguMzY2NzUsLTI4LjY2MzA4aC0zLjY4MzY3Yy0yLjIyMTY3LDAgLTQuMjM1NSwxLjI3MjA4IC01LjE5OTQyLDMuMjcxNThjLTYuMjMxNDIsMTIuODgyMDggLTIwLjc0MzkyLDIxLjAwNTUgLTM2LjY1MDMzLDE3LjM1MDU1Yy0xNC42NjMsLTMuMzcxOTIgLTI0LjYxMDMzLC0xNy4xMTA0MiAtMjQuNjEwMzMsLTMyLjE1MzI1di0yLjgwNTc1ek0xNC4zMzMzMyw4NC45NjA4M2MwLC0xNi44NzAzMyAxMC4wNDc2NywtMzAuNjYyNTggMjQuODExLC0zMy45NjI4M2MyMS4wNDg1LC00LjcwMTMzIDM5LjY4OSwxMS4xOCAzOS42ODksMzEuNDE4Njd2My41ODMzM2gtNjQuNXoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==", "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": "Node JS", "icon": "https://img.icons8.com/fluency/344/node-js.png", "description": "" }, { "name": "HTML 5", "icon": "https://img.icons8.com/color/344/html-5--v1.png", "description": "" }, { "name": "CSS 3", "icon": "https://img.icons8.com/color/344/css3.png", "description": "" }, { "name": "Javascript", "icon": "https://img.icons8.com/color/344/javascript--v1.png", "description": "" } ] } ``` -------------------------------- ### Full Data Example (JSON) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/configuration/modifying-data.md This JSON object represents the complete data structure for the modern portfolio, including hero section details, navigation links, statistics, and a list of technical abilities with their associated icons and descriptions. ```json { "hero": { "fullName": "Deri Kurniawan", "jobTitle": "Full Stack Developer", "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1663610416/Deri%20Kurniawan%20Portfolio%20Web%20App/Hero_o6ubic.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+PC9wYXRoPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik04NC45MTQyNSwxMzQuNTloNC4yMjgzM2MzLjAxLDAgNS44NDQ0MiwtMS40MDQ2NyA3LjY2NDc1LC0zLjgwMTkybDI2LjgyMTI1LC0zNS4yODUwOGwyNi44MjEyNSwzNS4yODUwOGMxLjgyMDMzLDIuMzkzNjcgNC42NTQ3NSwzLjgwMTkyIDcuNjY0NzUsMy44MDE5Mmg0LjIyODMzbC0zNC4yMTcyNSwtNDUuMDA2NjdsMzIuNjgzNTgsLTQzaC00LjIyODMzbC0yNS4yOTExNywzMy4yNzQ4M2wtMjUuMjk0NzUsLTMzLjI3ODQyYy0xLjgyMDMzLC0yLjM5MzY3IC00LjY1NDc1LC0zLjc5ODMzIC03LjY2NDc1LC0zLjc5ODMzaC00LjIyODMzbDMyLjY4MzU4LDQzeiI+PC9wYXRoPjxwYXRoIGQ9Ik04Niw5My4xNjY2N3YtMTAuNzVjMCwtMjMuOTE4NzUgLTIxLjMwMjkyLC00Mi44NjAyNSAtNDUuOTcwNTgsLTM4Ljg4NjMzYy0xOS4yMDMwOCwzLjA5MjQyIC0zMy44NjI3NSwyMC40NTcyNSAtMzIuODYyNzUsMzkuOTA0djIuNTY1Njd2Ny4xNjY2N3YwLjUwODgzYzAsMjMuNDgxNTggMTcuMTE3NTgsNDIuMjMzMTcgMzguOTQzNjcsNDIuNDkxMTdjMTguMjQ2MzMsMC4yMTUgMzMuNjQzOTIsLTExLjk4MjY3IDM4LjM2Njc1LC0yOC42NjMwOGgtMy42ODM2N2MtMi4yMjE2NywwIC00LjIzNTUsMS4yNzIwOCAtNS4xOTk0MiwzLjI3MTU4Yy02LjIzMTQyLDEyLjg4MjA4IC0yMC43NDM5MiwyMS4wMDU1IC0zNi42NTAzMywxNy4zNTA1Yy0xNC42NjMsLTMuMzcxOTIgLTI0LjYxMDMzLC0xNy4xMTA0MiAtMjQuNjEwMzMsLTMyLjE1MzI1di0yLjgwNTc1ek0xNC4zMzMzMyw4NC45NjA4M2MwLC0xNi44NzAzMyAxMC4wNDc2NywtMzAuNjYyNTggMjQuODExLC0zMy45NjI4M2MyMS4wNDg1LC00LjcwMTMzIDM5LjY4OSwxMS4xOCAzOS42ODksMzEuNDE4Njd2My41ODMzM2gtNjQuNXoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==", "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": "Node JS", "icon": "https://img.icons8.com/fluency/344/node-js.png", "description": "" }, { "name": "HTML 5", "icon": "https://img.icons8.com/color/344/html-5--v1.png", "description": "" }, { "name": "CSS 3", "icon": "https://img.icons8.com/color/344/css3.png", "description": "" }, { "name": "Javascript", "icon": "https://img.icons8.com/color/344/javascript--v1.png", "description": "" } ] } ``` -------------------------------- ### Project Example: Windows 11 OS Clone Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md A clone of the Windows 11 operating system interface implemented as a website. This project utilizes React JS for the frontend framework and Tailwind CSS for styling. The live demo is available on Vercel. ```HTML Vercel ``` -------------------------------- ### Build Application (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Builds the application for production using npm. ```bash npm run build ``` -------------------------------- ### Build Application (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Builds the application for production using npm. ```bash npm run build ``` -------------------------------- ### Build Application (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Builds the application for production using yarn. ```bash yarn build ``` -------------------------------- ### Build Application (yarn) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Builds the application for production using yarn. ```bash yarn build ``` -------------------------------- ### Modify Hero Section Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md Example of how to modify the hero section of the portfolio by updating the `fullName`, `jobTitle`, and `image` fields in the `db/data.json` file. ```json { "hero": { "fullName": "Deri Kurniawan", // change this to your full name "jobTitle": "Full Stack Developer", // change this to your job title "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1663610416/Deri%20Kurniawan%20Portfolio%20Web%20App/Hero_o6ubic.png" // change this to your image url } // ...other objects } ``` -------------------------------- ### Modify Hero Section Data Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/configuration/modifying-data.md Example of how to modify the hero section data within the `db/data.json` file. This includes updating the full name, job title, and image URL. ```json { "hero": { "fullName": "Deri Kurniawan", // change this to your full name "jobTitle": "Full Stack Developer", // change this to your job title "image": "https://res.cloudinary.com/deri-kurniawan/image/upload/v1663610416/Deri%20Kurniawan%20Portfolio%20Web%20App/Hero_o6ubic.png" // change this to your image url } // ...other objects } ``` -------------------------------- ### Clone 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 ``` -------------------------------- ### Clone Repository Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Clones the Modern Portfolio repository from GitHub. ```bash git clone https://github.com/Deri-Kurniawan/modern-portfolio.git ``` -------------------------------- ### Lint Application (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/versioned_docs/version-1.0/getting-started/Installation.md Lints the application code using npm, checking for code style and potential errors. ```bash npm run lint ``` -------------------------------- ### Deploying Your Portfolio Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/configuration/modifying-data.md Instructions on how to deploy your modern portfolio to a hosting service. This typically involves building the project and uploading the static files. ```Markdown ## Deployment 1. **Build the project:** This command generates the static files for your portfolio. ```bash npm run build ``` 2. **Deploy the `build` folder:** Upload the contents of the `build` folder to your preferred hosting provider (e.g., Netlify, Vercel, GitHub Pages). For GitHub Pages, you can configure your `package.json` with a `homepage` field: ```json { "name": "modern-portfolio", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "homepage": "/modern-portfolio/" } ``` Then, deploy the `build` folder to your GitHub repository. ``` -------------------------------- ### Lint Application (npm) Source: https://github.com/deri-kurniawan/modern-portfolio-docs/blob/master/docs/getting-started/Installation.md Lints the application code using npm, checking for code style and potential errors. ```bash npm run lint ```