feat: enhance contact form with toast notifications and error handling
This commit is contained in:
@@ -1,36 +1,57 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Personal Portfolio & Blog - Frontend
|
||||
|
||||
## Getting Started
|
||||
This is the frontend for my personal portfolio, built with [Next.js](https://nextjs.org), [Tailwind CSS](https://tailwindcss.com/), and [TypeScript](https://www.typescriptlang.org/). The project is designed to be a modern, responsive, and performant showcase of my skills and projects.
|
||||
|
||||
First, run the development server:
|
||||
## ✨ Features
|
||||
|
||||
* **Internationalization (i18n)**: Supports both English and Portuguese, with language switching capabilities.
|
||||
* **Dark Mode**: A sleek dark mode that can be toggled by the user, with preferences saved in local storage.
|
||||
* **Component-Based Architecture**: Built with reusable React components for maintainability and scalability.
|
||||
* **Responsive Design**: Fully responsive layout that looks great on all devices, from mobile phones to desktop screens.
|
||||
* **Contact Form**: A functional contact form that communicates with a backend service to send emails.
|
||||
|
||||
## 🛠️ Tech Stack
|
||||
|
||||
* **Framework**: [Next.js 15](https://nextjs.org/)
|
||||
* **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)
|
||||
* **Language**: [TypeScript](https://www.typescriptlang.org/)
|
||||
* **Internationalization**: [next-intl](https://next-intl-docs.vercel.app/)
|
||||
* **Icons**: [Heroicons](https://heroicons.com/) & [React Icons](https://react-icons.github.io/react-icons/)
|
||||
* **Linting**: [ESLint](https://eslint.org/)
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
To get a local copy up and running, follow these simple steps.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
* Node.js (v18.18 or later)
|
||||
* npm, yarn, or pnpm
|
||||
|
||||
### Installation & Development
|
||||
|
||||
1. **Clone the repository:**
|
||||
```bash
|
||||
git clone <your-repository-url>
|
||||
cd <your-repository-folder>/frontend
|
||||
```
|
||||
|
||||
2. **Install dependencies:**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Run the development server:**
|
||||
The development server uses Turbopack for faster performance.
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **Open your browser:**
|
||||
Navigate to [http://localhost:3000](http://localhost:3000) to see the result.
|
||||
|
||||
### Building for Production
|
||||
|
||||
To create a production-ready build, run:
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
npm run build
|
||||
Reference in New Issue
Block a user