feat: enhance contact form with toast notifications and error handling

This commit is contained in:
2025-06-09 11:25:28 -03:00
parent a16374afd0
commit e0161c0c99
14 changed files with 234 additions and 148 deletions

View File

@@ -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