Skip to content

Initial commit #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 0 additions & 274 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,275 +1 @@
<p align="center" width="100%">
<img height="100" src="https://github.com/said7388/developer-portfolio/assets/77630868/c0064908-cd5f-4751-a77c-eba90a62b55c">
</p>

---

# [Built Portfolio With GitHub ](https://github.com/said7388/github-portfolio)

---

# Developer Portfolio

#### 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.

---

# Demo :movie_camera:

![](./public/image/screen.png)

## View live preview [here](https://abusaid.netlify.app/).

---

## Table of Contents :scroll:

- [Sections](#sections-bookmark)
- [Demo](#demo-movie_camera)
- [Installation](#installation-arrow_down)
- [Getting Started](#getting-started-dart)
- [Usage](#usage-joystick)
- [Deployment](#deployment-rocket)
- [Tutorials](#tutorials-wrench)
- [Gmail App Password Setup](#gmail-app-password-setup)
- [Create a Telegram Bot](#create-a-telegram-bot)
- [Fetching Blog from dev.to](#fetching-blog-from-devto)
- [Packages Used](#packages-used-package)

---

# Sections :bookmark:

- HERO SECTION
- ABOUT ME
- EXPERIENCE
- SKILLS
- PROJECTS
- EDUCATION
- BLOG
- CONTACTS

---

# Installation :arrow_down:

### You will need to download Git and Node to run this project

- [Git](https://git-scm.com/downloads)
- [Node](https://nodejs.org/en/download/)

#### Make sure you have the latest version of both Git and Node on your computer.

```bash
node --version
git --version
```

## <br />

# Getting Started :dart:

### Fork and Clone the repo

To 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

```bash
git clone https://github.com/<YOUR GITHUB USERNAME>/developer-portfolio.git

cd developer-portfolio
```

### Install packages from the root directory

```bash
npm install
# or
yarn install
```

Then, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

---

### Running with Docker Compose

1. **Build Docker Image and Run Container**:
```bash
docker-compose up --build
```

2. **Access the Application**:
Visit [http://localhost:3000](http://localhost:3000) in your web browser to view the running application.

---

### Building the Docker Image

1. **Build the Docker Image using Dockerfile.dev**:

```bash
docker build -t nextjs-app -f Dockerfile.dev .
```

2. **Running the Docker Container**:

```bash
docker run -p 3000:3000 nextjs-app
```

3. **Access the Application**:
Visit [http://localhost:3000](http://localhost:3000) in your web browser to view the running application.

---

# Usage :joystick:

Please create a new `.env` file from `.env.example` file.

Eg:

```env
NEXT_PUBLIC_GTM =
NEXT_PUBLIC_APP_URL =
TELEGRAM_BOT_TOKEN =
TELEGRAM_CHAT_ID =
GMAIL_PASSKEY =
EMAIL_ADDRESS =
```

### Then, Customize data in the `utils/data` [folder](https://github.com/said7388/developer-portfolio/tree/main/utils/data).

Eg:

```javascript
export const personalData = {
name: "ABU SAID",
profile: "/profile.png",
designation: "Full-Stack Software Developer",
description: "My name is ABU SAID....",
email: "abusaid7388@gmail.com",
phone: "+8801608797655",
address: "Dhaka, Bangladesh",
github: "https://github.com/said7388",
facebook: "https://www.facebook.com/abusaid.riyaz/",
linkedIn: "https://www.linkedin.com/in/abu-said-bd/",
twitter: "https://twitter.com/said7388",
stackOverflow: "https://stackoverflow.com/users/16840768/abu-said",
leetcode: "https://leetcode.com/said3812/",
devUsername: "said7388",
resume: "...",
};
```

`devUsername` is used for fetching blog posts from `dev.to`.

---

# Deployment :rocket:

Deploying the app to platforms like Vercel or Netlify is quick and easy.

## Deploying to Vercel:

1. **Sign up or log in** to [Vercel](https://vercel.com/).
2. Once logged in, click on **"New Project"**.
3. Select your **GitHub repo** (the one that contains your forked project) and click **Import**.
4. Configure your environment variables in the Vercel dashboard by adding each key from your `.env` file.
- E.g., `NEXT_PUBLIC_GTM`, `NEXT_PUBLIC_APP_URL`, `TELEGRAM_BOT_TOKEN`, etc.
5. Click on **Deploy**. Vercel will automatically detect your Next.js app and build it.
6. Once the deployment is complete, you can visit your live website!

### Updating After Deployment

Whenever you push changes to your GitHub repo, Vercel will automatically redeploy the app, keeping your portfolio up-to-date.

## Deploying to Netlify:

1. **Sign up or log in** to [Netlify](https://www.netlify.com/).
2. In the **Netlify Dashboard**, click **"New site from Git"**.
3. Connect your **GitHub** account and select your repo.
4. Configure your environment variables by going to **Site Settings > Build & Deploy > Environment** and adding keys from your `.env` file.
5. Click **Deploy Site**. Netlify will build and deploy your portfolio.

---

# Tutorials :wrench:

## Gmail App Password Setup

1. **Log in to your Google Account** at [https://myaccount.google.com/](https://myaccount.google.com/).
2. Navigate to **Security** from the left sidebar.
3. Scroll down to the **"Signing in to Google"** section and make sure **2-Step Verification** is turned ON.
4. Once 2-Step Verification is enabled, you'll see an option for **App Passwords**.
5. Click on **App Passwords**. You may need to enter your Google account password again.
6. In the **Select app** dropdown, choose "Mail", and for **Select device**, choose "Other (Custom name)" and name it appropriately (e.g., "Portfolio").
7. Click **Generate**. A 16-character app password will be displayed. Save this password for later use in your environment variables (e.g., `GMAIL_PASSKEY`).

## Create a Telegram Bot

1. **Open Telegram** and search for the user **@BotFather**.
2. Start a chat with BotFather and use the `/newbot` command to create a new bot.
3. Choose a name for your bot.
4. Set a unique username for your bot (must end with `bot`, e.g., `PortfolioAssistantBot`).
5. 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`).
6. To get your chat ID:
- Open your bot in Telegram and send it a message.
- Visit the following URL in your browser, replacing `BOT_TOKEN` with your actual bot token:
`https://api.telegram.org/bot<BOT_TOKEN>/getUpdates`
- Look for the `chat` object in the response, which contains your **chat ID** (you can use this value for `TELEGRAM_CHAT_ID`).

## Fetching Blog from dev.to

To display your blog posts from dev.to on the portfolio:

1. Set your `devUsername` in the `utils/data.js` file to your dev.to username.
2. The application will automatically fetch your latest blog posts and display them in the **BLOG** section.
3. Ensure your blogs are publicly visible on dev.to, and the application will fetch them using the dev.to API.

---

# Packages Used :package:

| Used Package List |
| :--------------------: |
| @emailjs/browser |
| @next/third-parties |
| axios |
| lottie-react |
| next |
| nodemailer |
| react |
| react-dom |
| react-fast-marquee |
| react-google-recaptcha |
| react-icons |
| react-toastify |
| sharp |
| sass |
| tailwindcss |

---

# FAQ:

1. For those facing the issue of "`next` is not recognized as an internal or external command, operable program or batch file."

Run the following command:

```bash

npm install -g next

```

This installs Next.js globally

then do the usual `npm run dev`
6 changes: 3 additions & 3 deletions app/components/footer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,20 @@ function Footer() {
</div>
<div className="flex flex-col md:flex-row items-center justify-between">
<p className="text-sm">
© Developer Portfolio by <Link target="_blank" href="https://www.linkedin.com/in/abu-said-bd/" className="text-[#16f2b3]">Abu Said</Link>
© Developer Portfolio by <Link target="_blank" href="https://www.linkedin.com/in/jheannkate/" className="text-[#16f2b3]">Abu Said</Link>
</p>
<div className="flex items-center gap-5">
<Link
target="_blank"
href="https://github.com/said7388/developer-portfolio"
href="https://github.com/jheann0/finalportfolio"
className="flex items-center gap-2 uppercase hover:text-[#16f2b3]"
>
<IoStar />
<span>Star</span>
</Link>
<Link
target="_blank"
href="https://github.com/said7388/developer-portfolio/fork"
href="https://github.com/jheann0/finalportfolio/fork"
className="flex items-center gap-2 uppercase hover:text-[#16f2b3]"
>
<CgGitFork />
Expand Down
2 changes: 1 addition & 1 deletion app/components/navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function Navbar() {
<Link
href="/"
className=" text-[#16f2b3] text-3xl font-bold">
ABU SAID
jheann
</Link>
</div>

Expand Down
4 changes: 2 additions & 2 deletions app/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import "./css/globals.scss";
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
title: "Portfolio of Abu Said - Software Developer",
title: "Portfolio of jheann kate",
description:
"This is the portfolio of Abu Said. I am a full stack developer and a self taught developer. I love to learn new things and I am always open to collaborating with others. I am a quick learner and I am always looking for new challenges.",
"This is the portfolio of jheannkate. I am a full stack developer and a self taught developer. I love to learn new things and I am always open to collaborating with others. I am a quick learner and I am always looking for new challenges.",
};

export default function RootLayout({ children }) {
Expand Down
Binary file added public/image.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/profile.png
Binary file not shown.
18 changes: 9 additions & 9 deletions utils/data/contactsData.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export const contactsData = {
email: 'abusaid7388@gmail.com',
phone: '+8801608797655',
address: 'Middle Badda, Dhaka, Bangladesh - 1212 ',
github: 'https://github.com/said7388',
facebook: 'https://www.facebook.com/abusaid.riyaz/',
linkedIn: 'https://www.linkedin.com/in/abu-said-bd/',
twitter: 'https://twitter.com/said7388',
stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said',
devUsername: "said7388"
email: 'robleskate36@gmail.com',
phone: '09289884630',
address: 'Iloilo City ',
github: 'https://github.com/jheann0',
facebook: 'https://www.facebook.com/jheannkate.robles/',
linkedIn: 'https://www.linkedin.com/in/jheann-kate-robles-895863316/',
twitter: 'https://twitter.com/jheannkate',
stackOverflow: 'https://stackoverflow.com/users/jheannkate',
devUsername: "jheannkate"
}
18 changes: 9 additions & 9 deletions utils/data/educations.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
export const educations = [
{
id: 1,
title: "Bachelor Degree",
duration: "2020 - Present",
institution: "National University of Bangladesh",
title: "college",
// duration: "2020 - Present",
institution: "Western Institute of Technology",
},
{
id: 2,
title: "Higher Secondary Certificate",
duration: "2018 - 2020",
institution: "Noakhali Islamia Kamil Madrasah",
title: "High School",
// duration: "2018 - 2020",
institution: "Maasin National Comprehensive High School",
},
{
id: 3,
title: "Secondary School Certificate",
duration: "2008 - 2018",
institution: "Baitus Saif Islamia Madrasah",
title: "Elementary",
// duration: "2008 - 2018",
institution: "Maasin Central Elementary School",
}
]
Loading