Explore the live Website on: MohamedAmer.tech

This is my personal website, where I share my experience, and hopefully coming out soon will start writing technical articles and share them on it as well. The website is a full-stack application built with Next.JS 14, React.JS, TypeScript, tRPC. For styling, It uses TailwindCSS and ShadCn component library. It uses PostgreSQL with Drizzle as ORM and the DB is hosted on Supabase. For rate limiting, it's using Upstash. Finally, the website is hosted on serverless architecture using Vercel.

These are some features that are implemented in the website:

• 🎁 Responsive on all devices and screen sizes.
• 🚪 Rate limiting with Upstash using Redis.
• 🧙‍♂️ Full-Stack type safety with TypeScript and tRPC.
• 🧙‍♂️ Type-Safe Database queries with Drizzle.
• 🧙‍♂️ Type-Safe environment variables with @t3-oss.
• 🎨 Frontend using Next.JS, React.JS, TailwindCSS, and ShadCn component library.
• 🔧 Backend using Next.JS App router.
• 💬 Contact-Me form with checking Email validity and sending a confirmation email.
• ✏️ User Interactive Forms with React-Hook-Form, Zod, and React-Query.
• ☎️ SMTP and IMAP integration for sending and receiving emails.
• 👓 Glass-looking Navbar, that hides on scroll down and shows on scroll up.
• 🎉 Marquee of moving Technologies Icons.
• 📢 Accessible user Notifications with Sonner.
• 📦 Postgres DB hosted on Supabase.
• 🌎 Hosting using serverless architecture with Vercel.

This project is open-source and you can use it as a template for your own personal website. Here are the steps to make it your own:

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/MohamedTahaAmer/personal-website.git

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open https://localhost:3000 with your browser to see the result. This will have Hot Module Reloading enabled, so you can see your changes in real-time.

Environment variables[^10] can be used for configuration. They must be set before running the app.

The Website uses Supabase, Upstash as external services. You need to create an account on each of these services along with an email account in order to run the app.

Create a .env file in the root directory of the project and fill in the following environment variables:

DATABASE_URL=""
DATABASE_PREFIX=""
NEXT_PUBLIC_CV_LINK=""

UPSTASH_REDIS_REST_TOKEN=""
UPSTASH_REDIS_REST_URL=""

SMTP_GMAIL=""
GMAIL_APP_PASSWORD=""
MY_PERSONAL_GMAIL=""
DELAY_BETWEEN_SMTP_AND_IMAP=""

You can create an optimized production build with the following command:

npm run build

The easiest way to deploy this Next.js app is to use the Vercel Platform.

• Liron Abutbul : For the inspiration design of the README.md file.
• Lachlan Seward : For the Icons used in the README.md file.