Merge pull request #4 from charlyautomatiza:docs/google-docs+vercel

docs: 📝 docs/google-docs+vercel

Author: charlyautomatiza

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 ❤️