Skip to content

next.js multilingual portfolio with TailwindCSS, SEO, responsive design, and EmailJS integration. Easily customizable for any portfolio

Notifications You must be signed in to change notification settings

aminagr/NextPortfolio

Repository files navigation

Next.js Portfolio Starter Template

A fully responsive, SEO-optimized, multilingual, and ready-to-use portfolio template built with Next.js, React, Tailwind CSS, and CSS modules. This template includes all the essentials for a beautiful and functional portfolio, ready for easy customization.

Features

  • 🌐 Multilingual Support: Powered by next-intl, the template supports English and French. Easily extend to any language by adding a JSON file in the messages folder (e.g., es.json, it.json).
  • 💌 Contact Form: Integrated with EmailJS for handling form submissions.
  • 📱 Fully Responsive: Designed with mobile-first principles for a seamless experience across devices.
  • 🧩 Reusable Components: Modular structure with essential sections: Hero, Services, Projects, Contact, and About.
  • ⚙️ App Router & SEO: Utilizes Next.js App Router for efficient page routing and metadata generation, with robust SEO settings.
  • 🎨 Tailwind CSS & CSS Modules: Styled with Tailwind for rapid design and CSS modules for custom styles.

📸 Screenshots

image image image image image

Getting Started

1. Clone the Repository

git clone https://github.com/aminagr/NextPortfolio.git
cd NextPortfolio

2. Install Dependencies

npm install

3. Configure Environment Variables

If you wish to enable the contact form via EmailJS, Sign up at EmailJS to obtain your keys, uncomment the code in the ContactForm component and add the following environment variables in .env.local

NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key
NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id

4. Change the content

Update the language files (en.json, fr.json) in the public/messages folder for supported translations and you can extend to new languages by adding JSON files in public/messagesand update next-intl to recognize them.

5. Run the Development Server

npm run dev

Your application will be live at http://localhost:3000

🤝 Contributing

Contributions are welcome! Open an issue or submit a pull request to share your suggestions and improvements.

📜 License

This work, including the source code and template, is licensed under the Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0). You are free to copy, modify, and distribute this work under the following conditions:

  • Attribution: You must give appropriate credit to the original author, Amina Gmine, by mentioning her name and linking to the original GitHub repository.
  • Non-Commercial: You may not use the material for commercial purposes without prior permission from the author.

About

next.js multilingual portfolio with TailwindCSS, SEO, responsive design, and EmailJS integration. Easily customizable for any portfolio

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published