diff --git a/README.md b/README.md index 648563e..f74f583 100644 --- a/README.md +++ b/README.md @@ -36,74 +36,86 @@ DevFolio is a modern, responsive, and customizable portfolio template for develo ### Personal Information -Edit the `personal-info.md` file in the `content` directory to update your name, role, and other personal details. +Edit the [personal-info.md](./src/content/personal-info.md) file in the `content` directory to update your name, role, and other personal details. ### Projects -Add or modify projects in the `projects.md` file in the `content` directory. Each project should have a title, description, image, and link. +Add or modify projects in the [projects.md](./src/content/projects.md) file in the `content` directory. Each project should have a title, description, image, and link. ### CV/Resume -Update your experience, education, and skills in the `cv.md` file in the `content` directory. +Update your experience, education, and skills in the [cv.md](./src/content/cv.md) file in the `content` directory. ### Social Links -Edit the `social-links.md` file in the `content` directory to add or modify your social media links. +Edit the [social-links.md](./src/content/social-links.md) file in the `content` directory to add or modify your social media links. -## Google Sheets Integration +## Portfolio Configuration with Google Sheets for Contact Form (optional) -To connect the contact form to Google Sheets: +This guide explains how to set up Google Sheets to use it with the contact form in your portfolio and configure the necessary environment variables in Vercel. -1. Create a new Google Sheet -2. Go to Tools > Script editor -3. Replace the content of the script editor with the following code: +### Setting Up Google Sheets for Your Portfolio - ```javascript - function doPost(e) { - var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); - var data = JSON.parse(e.postData.contents); - sheet.appendRow([new Date(), data.name, data.email, data.message]); - return ContentService.createTextOutput("Success"); - } - ``` +1. **Configure Google Sheets API**: + - Go to the [Google Developers Console](https://console.developers.google.com/). + - Create a new project (or select an existing one). + - Enable the **Google Sheets API** and **Google Drive API** for this project. + - In "Credentials," create a **Service Account** and download the credentials JSON file. -4. Deploy the script as a web app: - - Click on "Deploy" > "New deployment" - - Select "Web app" as the type - - Set "Execute as" to your Google account - - Set "Who has access" to "Anyone" - - Click "Deploy" -5. Copy the provided URL for the web app +2. **Share Your Google Sheet**: + - Open your Google Sheet and share access with the service account email (`GOOGLE_CLIENT_EMAIL`) that you created in Step 1. Ensure that it has **Editor** permissions. + - Copy your spreadsheet ID from the URL (the part between `/d/` and `/edit`), which will be used for `GOOGLE_SHEET_ID`. -## Environment Variables +3. **Setting Up Environment Variables in Vercel**: + To enable Google Sheets functionality on Vercel, you need to configure the following environment variables. -Create a `.env.local` file in the root of your project with the following content: + #### Steps to Add Environment Variables in Vercel -``` -NEXT_PUBLIC_GOOGLE_SCRIPT_URL=your_google_script_url_here -``` + - Go to your Vercel project dashboard. + - Navigate to **Settings** > **Environment Variables**. + - Click on **Add New Variable** and add each variable with its corresponding value as follows: + + - **Variable Name**: `NEXT_PUBLIC_GOOGLE_SHEETS_ENABLED` + - **Value**: `true` + - **Environment**: Select the appropriate environment (e.g., Production, Preview, Development). -Replace `your_google_script_url_here` with the URL you copied from the Google Apps Script deployment. + - **Variable Name**: `GOOGLE_CLIENT_EMAIL` + - **Value**: The service account email from Step 1. + - **Environment**: Choose the environment as needed. -## Deployment + - **Variable Name**: `GOOGLE_PRIVATE_KEY` + - **Value**: Copy the private key from your service account JSON file. Make sure to paste it exactly as it appears, without adding `\n` for line breaks if entering directly in Vercel. + - **Environment**: Select the desired environment. -You can easily deploy your portfolio using Vercel: + - **Variable Name**: `GOOGLE_SHEET_ID` + - **Value**: The ID of your Google Sheet. + - **Environment**: Select the appropriate environment. -1. Push your changes to your GitHub repository -2. Go to [Vercel](https://vercel.com) and sign in with GitHub -3. Click "Import Project" and select your repository -4. In the "Environment Variables" section, add the `NEXT_PUBLIC_GOOGLE_SCRIPT_URL` variable with your Google Apps Script URL -5. Click "Deploy" + - **Variable Name**: `NEXT_PUBLIC_GOOGLE_SCRIPT_URL` + - **Value**: The URL of the Google Apps Script, if used (optional). + - **Environment**: Select the desired environment. + + - Once all variables are entered, redeploy your project to apply the changes. + +### Example Environment Variable Configuration in `.env.local` (for local development) + +```env +NEXT_PUBLIC_GOOGLE_SHEETS_ENABLED=true +GOOGLE_CLIENT_EMAIL=your-service-account-email@your-project.iam.gserviceaccount.com +GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBg...\n-----END PRIVATE KEY-----\n" +GOOGLE_SHEET_ID=1A2B3C4D5E6F7G8H9I0J +NEXT_PUBLIC_GOOGLE_SCRIPT_URL=https://script.google.com/macros/s/EXAMPLE_SCRIPT_ID/exec +``` Alternatively, you can use the deploy button below: -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fyourusername%2Fdevfolio) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/charlyautomatiza/devfolio) ## Opening in StackBlitz To open and edit this project in StackBlitz: -[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/yourusername/devfolio) +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/charlyautomatiza/devfolio) ## Contributing @@ -115,4 +127,4 @@ This project is open source and available under the [MIT License](LICENSE). ## Credits -Created by CharlyAutomatiza with ❤️ +Created by [CharlyAutomatiza](https://charlyautomatiza.tech/) with ❤️