{"id":13476128,"url":"https://github.com/said7388/developer-portfolio","last_synced_at":"2025-05-14T04:10:29.111Z","repository":{"id":59700248,"uuid":"538373370","full_name":"said7388/developer-portfolio","owner":"said7388","description":"Software Developer Portfolio Website built with next.js and tailwind CSS that helps you showcase your work and skills as a software developer.","archived":false,"fork":false,"pushed_at":"2025-02-12T06:43:09.000Z","size":21514,"stargazers_count":1915,"open_issues_count":6,"forks_count":906,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-11T03:38:08.774Z","etag":null,"topics":["developer-portfolio","next-portfolio","personal-portfolio","personal-website","portfolio","portfolio-site","portfolio-template","portfolio-website","react","react-portfolio","resume","software-developer-portfolio"],"latest_commit_sha":null,"homepage":"https://abusaid.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/said7388.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"said7388","patreon":null,"open_collective":"developer-portfolio","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"abusaid","custom":null}},"created_at":"2022-09-19T07:00:51.000Z","updated_at":"2025-04-10T11:43:45.000Z","dependencies_parsed_at":"2024-04-17T09:41:26.319Z","dependency_job_id":"b72dbdb8-5aff-4526-801d-596b95f885c9","html_url":"https://github.com/said7388/developer-portfolio","commit_stats":{"total_commits":68,"total_committers":4,"mean_commits":17.0,"dds":0.05882352941176472,"last_synced_commit":"d7634563f50a0e1dfca0245aac6f3703b879787a"},"previous_names":[],"tags_count":2,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said7388%2Fdeveloper-portfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said7388%2Fdeveloper-portfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said7388%2Fdeveloper-portfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/said7388%2Fdeveloper-portfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/said7388","download_url":"https://codeload.github.com/said7388/developer-portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254070122,"owners_count":22009560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-portfolio","next-portfolio","personal-portfolio","personal-website","portfolio","portfolio-site","portfolio-template","portfolio-website","react","react-portfolio","resume","software-developer-portfolio"],"created_at":"2024-07-31T16:01:26.842Z","updated_at":"2025-05-14T04:10:24.093Z","avatar_url":"https://github.com/said7388.png","language":"JavaScript","funding_links":["https://github.com/sponsors/said7388","https://opencollective.com/developer-portfolio","https://buymeacoffee.com/abusaid"],"categories":["JavaScript","HarmonyOS","Portfolio"],"sub_categories":["Windows Manager"],"readme":"\u003cp align=\"center\" width=\"100%\"\u003e\n    \u003cimg height=\"100\" src=\"https://github.com/said7388/developer-portfolio/assets/77630868/c0064908-cd5f-4751-a77c-eba90a62b55c\"\u003e\n\u003c/p\u003e\n\n---\n\n# [Built Portfolio With GitHub ](https://github.com/said7388/github-portfolio)\n\n---\n\n# Developer Portfolio\n\n#### Are you struggling to create a professional portfolio website? Look no further! You can use the Developer Portfolio template and create your very own personalized portfolio today! My website is designed to be user-friendly and easily customizable, making it perfect for both developers and freelancers.\n\n---\n\n# Demo :movie_camera:\n\n![](./public/image/screen.png)\n\n## View live preview [here](https://abusaid.netlify.app/).\n\n---\n\n## Table of Contents :scroll:\n\n- [Sections](#sections-bookmark)\n- [Demo](#demo-movie_camera)\n- [Installation](#installation-arrow_down)\n- [Getting Started](#getting-started-dart)\n- [Usage](#usage-joystick)\n- [Deployment](#deployment-rocket)\n- [Tutorials](#tutorials-wrench)\n  - [Gmail App Password Setup](#gmail-app-password-setup)\n  - [Create a Telegram Bot](#create-a-telegram-bot)\n  - [Fetching Blog from dev.to](#fetching-blog-from-devto)\n- [Packages Used](#packages-used-package)\n\n---\n\n# Sections :bookmark:\n\n- HERO SECTION\n- ABOUT ME\n- EXPERIENCE\n- SKILLS\n- PROJECTS\n- EDUCATION\n- BLOG\n- CONTACTS\n\n---\n\n# Installation :arrow_down:\n\n### You will need to download Git and Node to run this project\n\n- [Git](https://git-scm.com/downloads)\n- [Node](https://nodejs.org/en/download/)\n\n#### Make sure you have the latest version of both Git and Node on your computer.\n\n```bash\nnode --version\ngit --version\n```\n\n## \u003cbr /\u003e\n\n# Getting Started :dart:\n\n### Fork and Clone the repo\n\nTo Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands\n\n```bash\ngit clone https://github.com/\u003cYOUR GITHUB USERNAME\u003e/developer-portfolio.git\n\ncd developer-portfolio\n```\n\n### Install packages from the root directory\n\n```bash\nnpm install\n# or\nyarn install\n```\n\nThen, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n---\n\n### Running with Docker Compose\n\n1. **Build Docker Image and Run Container**:\n    ```bash\n    docker-compose up --build\n    ```\n\n2. **Access the Application**:\n    Visit [http://localhost:3000](http://localhost:3000) in your web browser to view the running application.\n\n---\n\n### Building the Docker Image\n\n1. **Build the Docker Image using Dockerfile.dev**:\n\n    ```bash\n    docker build -t nextjs-app -f Dockerfile.dev .\n    ```\n\n2. **Running the Docker Container**:\n\n    ```bash\n    docker run -p 3000:3000 nextjs-app\n    ```\n\n3. **Access the Application**:\n    Visit [http://localhost:3000](http://localhost:3000) in your web browser to view the running application.\n\n---\n\n# Usage :joystick:\n\nPlease create a new `.env` file from `.env.example` file.\n\nEg:\n\n```env\nNEXT_PUBLIC_GTM =\nNEXT_PUBLIC_APP_URL =\nTELEGRAM_BOT_TOKEN =\nTELEGRAM_CHAT_ID =\nGMAIL_PASSKEY =\nEMAIL_ADDRESS =\n```\n\n### Then, Customize data in the `utils/data` [folder](https://github.com/said7388/developer-portfolio/tree/main/utils/data).\n\nEg:\n\n```javascript\nexport const personalData = {\n  name: \"ABU SAID\",\n  profile: \"/profile.png\",\n  designation: \"Full-Stack Software Developer\",\n  description: \"My name is ABU SAID....\",\n  email: \"abusaid7388@gmail.com\",\n  phone: \"+8801608797655\",\n  address: \"Dhaka, Bangladesh\",\n  github: \"https://github.com/said7388\",\n  facebook: \"https://www.facebook.com/abusaid.riyaz/\",\n  linkedIn: \"https://www.linkedin.com/in/abu-said-bd/\",\n  twitter: \"https://twitter.com/said7388\",\n  stackOverflow: \"https://stackoverflow.com/users/16840768/abu-said\",\n  leetcode: \"https://leetcode.com/said3812/\",\n  devUsername: \"said7388\",\n  resume: \"...\",\n};\n```\n\n`devUsername` is used for fetching blog posts from `dev.to`.\n\n---\n\n# Deployment :rocket:\n\nDeploying the app to platforms like Vercel or Netlify is quick and easy.\n\n## Deploying to Vercel:\n\n1. **Sign up or log in** to [Vercel](https://vercel.com/).\n2. Once logged in, click on **\"New Project\"**.\n3. Select your **GitHub repo** (the one that contains your forked project) and click **Import**.\n4. Configure your environment variables in the Vercel dashboard by adding each key from your `.env` file.\n   - E.g., `NEXT_PUBLIC_GTM`, `NEXT_PUBLIC_APP_URL`, `TELEGRAM_BOT_TOKEN`, etc.\n5. Click on **Deploy**. Vercel will automatically detect your Next.js app and build it.\n6. Once the deployment is complete, you can visit your live website!\n\n### Updating After Deployment\n\nWhenever you push changes to your GitHub repo, Vercel will automatically redeploy the app, keeping your portfolio up-to-date.\n\n## Deploying to Netlify:\n\n1. **Sign up or log in** to [Netlify](https://www.netlify.com/).\n2. In the **Netlify Dashboard**, click **\"New site from Git\"**.\n3. Connect your **GitHub** account and select your repo.\n4. Configure your environment variables by going to **Site Settings \u003e Build \u0026 Deploy \u003e Environment** and adding keys from your `.env` file.\n5. Click **Deploy Site**. Netlify will build and deploy your portfolio.\n\n---\n\n# Tutorials :wrench:\n\n## Gmail App Password Setup\n\n1. **Log in to your Google Account** at [https://myaccount.google.com/](https://myaccount.google.com/).\n2. Navigate to **Security** from the left sidebar.\n3. Scroll down to the **\"Signing in to Google\"** section and make sure **2-Step Verification** is turned ON.\n4. Once 2-Step Verification is enabled, you'll see an option for **App Passwords**.\n5. Click on **App Passwords**. You may need to enter your Google account password again.\n6. In the **Select app** dropdown, choose \"Mail\", and for **Select device**, choose \"Other (Custom name)\" and name it appropriately (e.g., \"Portfolio\").\n7. Click **Generate**. A 16-character app password will be displayed. Save this password for later use in your environment variables (e.g., `GMAIL_PASSKEY`).\n\n## Create a Telegram Bot\n\n1. **Open Telegram** and search for the user **@BotFather**.\n2. Start a chat with BotFather and use the `/newbot` command to create a new bot.\n3. Choose a name for your bot.\n4. Set a unique username for your bot (must end with `bot`, e.g., `PortfolioAssistantBot`).\n5. Once your bot is created, BotFather will send you a **Token**. Save this token, as you will need it for your environment variables (e.g., `TELEGRAM_BOT_TOKEN`).\n6. To get your chat ID:\n   - Open your bot in Telegram and send it a message.\n   - Visit the following URL in your browser, replacing `BOT_TOKEN` with your actual bot token:  \n     `https://api.telegram.org/bot\u003cBOT_TOKEN\u003e/getUpdates`\n   - Look for the `chat` object in the response, which contains your **chat ID** (you can use this value for `TELEGRAM_CHAT_ID`).\n\n## Fetching Blog from dev.to\n\nTo display your blog posts from dev.to on the portfolio:\n\n1. Set your `devUsername` in the `utils/data.js` file to your dev.to username.\n2. The application will automatically fetch your latest blog posts and display them in the **BLOG** section.\n3. Ensure your blogs are publicly visible on dev.to, and the application will fetch them using the dev.to API.\n\n---\n\n# Packages Used :package:\n\n|   Used Package List    |\n| :--------------------: |\n|    @emailjs/browser    |\n|  @next/third-parties   |\n|         axios          |\n|      lottie-react      |\n|          next          |\n|       nodemailer       |\n|         react          |\n|       react-dom        |\n|   react-fast-marquee   |\n| react-google-recaptcha |\n|      react-icons       |\n|     react-toastify     |\n|         sharp          |\n|          sass          |\n|      tailwindcss       |\n\n---\n\n# FAQ:\n\n1. For those facing the issue of \"`next` is not recognized as an internal or external command, operable program or batch file.\"\n\nRun the following command:\n\n```bash\n\nnpm install -g next\n\n```\n\nThis installs Next.js globally\n\nthen do the usual `npm run dev`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid7388%2Fdeveloper-portfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaid7388%2Fdeveloper-portfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaid7388%2Fdeveloper-portfolio/lists"}