minhtran241 / minhtran.com

☄️ A consolidated repository housing my personal website and blog, crafted with Next.js, Tailwind CSS, and additional cutting-edge technologies.

minhtran.com

☄️ Personal website was built originally from scratch using Next.js, Tailwind CSS, shadcn/ui, daisyUI, SWR, Chart.js, Apollo, WakaTime API, GitHub API, Spotify API, and more.

Light Mode	Dark Mode

Introduction

This website was carefully crafted from the ground using Next.js and other helpful tools, starting in March 2024.

I'm constantly making improvements to add more features and content. This website is where I share what I've learned and offer insights to others.

Feel free to use this website as a reference, for inspiration, or as a template, following the provided license. You can access the source code to customize it to your needs.

If you find this website helpful, please consider leaving a rating.

If you have any questions, suggestions, or anything else, don't hesitate to contact me!

Tech Stack

This website is built using these technologies:

• ◼️ Next.js 14.1.0
• 💠 Tailwind CSS 3
• ♦ shadcn/ui
• 🌺 daisyUI
• ☀️ Apollo Client
• ←→ Axios
• 〰️ SWR
• ➰ Framer Motion
• 💢 Lucide Icons
• 📊 Chart.js
• 🎥 WakaTime API
• 👨🏻‍💻 GitHub API
• 🎵 Spotify API

Features

On this website, several features will continue to be updated and added in the future.

• 🤖 ChatGPT AI (Unavailable)

You can access this feature by opening the command palette [cmd+k], and then typing whatever you want to search/ask for. (Currently not available, but you can configure it on your machine with your own OpenAI API key)

• 🎧 Spotify Status

Displays song information being played on Spotify in real-time using the Spotify API and SWR.

• 🕗 WakaTime Statistics

Data is retrieved using the WakaTime API and then displayed on the dashboard, built with Next.js API routes deployed as serverless functions.

• 📝 Blogs

The markdown files are server-side rendered using the React Markdown and the remark library. The markdown files are stored in the data/blog directory. The blog posts are displayed on the blog page and the blog details page.

• 🗳 Projects

As a developer, I have a lot of projects that I have worked on. This section displays the projects I have worked on. The markdown files are stored in the data/projects directory and rendered server-side.

Performance

• PageSpeed Insights

• Desktop

• Mobile

Getting Started

If you want to run this project on your local machine, you can do so in just 3 easy steps below. Additionally, update the .env.example file to .env and replace the variables with your own in the .env file.

1. Clone this template using one of the three ways

1. Clone using git

   git clone https://github.com/minhtran241/minhtran.com.git

2. Using create-next-app

   npx create-next-app -e https://github.com/minhtran241/minhtran.com project-name

3. Using degit

   npx degit minhtran241/minhtran.com YOUR_APP_NAME

4. Deploy to Vercel or Netlify, etc

   

2. Install dependencies

It is encouraged to use npm to install the dependencies.

npm install

3. Config constants

This repository uses several constants. Please check the src/common/constants directory and update the values with your own. For example, the userBasic.js file contains the basic information about the user.

export const userBasicInfo = {
    fullName: FULL_NAME,
    currentJob: CURRENT_JOB,
    currentOrg: CURRENT_ORG,
    currentOrgLink: CURRENT_ORG_LINK,
    currentRole: CURRENT_ROLE,
    githubUsername: GITHUB_USERNAME,
    githubLink: GITHUB_LINK,
    linkedinUsername: LINKEDIN_USERNAME,
    linkedinLink: LINKEDIN_LINK,
    facebookUsername: FACEBOOK_USERNAME,
    facebookLink: FACEBOOK_LINK,
    instagramUsername: INSTAGRAM_USERNAME,
    instagramLink: INSTAGRAM_LINK,
    twitterUsername: TWITTER_USERNAME,
    twitterLink: TWITTER_LINK,
    email: EMAIL,
};

4. Config .env

This repository uses several environment variables. Please copy .env.example into .env, then fill in the values with your own. For third-party environment variables such as Spotify, WakaTime, GitHub, and others, please refer to the official documentation provided by each provider.

NEXT_PUBLIC_BASE_URL=

# Github
GITHUB_TOKEN=
GITHUB_USERNAME=
GITHUB_API_URL=

# WakaTime
WAKATIME_API_KEY=

# Spotify
SPOTIFY_CLIENT_ID=
SPOTIFY_CLIENT_SECRET=
SPOTIFY_REFRESH_TOKEN=

# Contact Form
CONTACT_FORM_API_KEY=

5. Run the development server

You can start the server using this command:

npm run dev

Open http://localhost:3000 with your browser to see the result. You can edit the page by modifying src/app/page.jsx. The page auto-updates as you edit the file.

License

It is licensed under the GPL-3.0 license.