π₯ Personal website was built originally from scratch using Next.js, TypeScript, Tailwind CSS, SWR, and Prisma
![image](https://private-user-images.githubusercontent.com/121304362/345857674-aefc17bd-5174-44ab-a1a2-61b66b3e3f66.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEwMzkwNzAsIm5iZiI6MTcyMTAzODc3MCwicGF0aCI6Ii8xMjEzMDQzNjIvMzQ1ODU3Njc0LWFlZmMxN2JkLTUxNzQtNDRhYi1hMWEyLTYxYjY2YjNlM2Y2Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxNVQxMDE5MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNzc1NjQ5MzU3ZjdjYmFhN2Y5ZWU5NDg1NmZlMTQzMTU1MTU2YTBmYzEzZTZjODFlMmE5MDhkZmQ2OGE1N2E2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.-wzZ8Uif0gYQwz2gR06nDCRCMQjke7H6qEZPT8SMuTc)
This website was carefully crafted from the ground using Next.js and other helpful tools, starting in Feb 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 reach out to me! π§βπ»
This website is built using these technologies:
- βΌοΈ Next.js
- βοΈ React
- π° TypeScript
- π Tailwind CSS 3
- π Prisma Client
- 𦫠Zustand
- γ°οΈ SWR
- β° Framer Motion
- π’ React Icons
- π Next-Intl
- π§Ώ Absolute Import and Path Alias
- π ESLint
- β¨ Prettier
- π Conventional Commit Lint
On this website there are several features that will continue to be updated and added in the future.
Data is retrieved using the Wakatime API and then displayed on the dashboard, built with Next.js API routes deployed as serverless functions.
The data projects on this blog are taken from the PostgreSQL database connected through the Prisma Client. The database for this application is hosted on Supabase DB.The data fetching method used to retrieve data projects is Incremental Static Regeneration (ISR) with 1 second revalidation and Server-Side Rendering (SSR) for the project details..
This website supports multiple languages, enabling users from different regions to interact with it in their preferred language. The translation is managed using i18n, making it easy to add new languages as needed.
The dashboard page contains various statistics, including contributions from platforms like GitHub, Wakatime, Codewars, and Monkeytype. These statistics are fetched using their respective APIs and displayed in an interactive and user-friendly manner.
Report URL: https://pagespeed.web.dev/analysis/https-satriav2-vercel-app/yjcgcx7o2a?form_factor=desktop
Report URL: https://gtmetrix.com/reports/satriav2.vercel.app/cRqM4gpB/
If you are interested in running this project on your local machine, you can do so in just 3 easy steps below. Additionally, remember to update the ".env.example" file to ".env" and replace the variables with your own in the ".env" file.
-
Clone using git
git clone https://github.com/satriabahari/satria.com
-
Using
create-next-app
npx create-next-app -e https://github.com/satriabahari/satria.com project-name
-
Using
degit
npx degit satriabahari/satria.com YOUR_APP_NAME
-
Deploy to Vercel or Netlify, etc
It is encouraged to use yarn so the husky hooks can work properly.
yarn install
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, Firebase, and others, please refer to the official documentation provided by each provider.
NODEMAILER_PW=
NODEMAILER_EMAIL=
GITHUB_READ_USER_TOKEN_PERSONAL=
WAKATIME_API_ID=
WAKATIME_API_KEY=
MONKEYTYPE_API_KEY=
CODEWARS_USER_ID=
POSTGRES_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_URL_NO_SSL=
POSTGRES_PRISMA_URL=
POSTGRES_USER=
POSTGRES_PASSWORD=
POSTGRES_HOST=
POSTGRES_DATABASE=
You can start the server using this command:
yarn dev
Open http://localhost:3000 with your browser to see the result. You can start editing the page by modifying src/pages/index.tsx
.