| Layer | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Language | TypeScript |
| Email Service | Resend & React Email |
| State Management | React Context API |
The application is structured for scalability and maintainability:
/app: Contains the core routing and global styles./components: Reusable UI elements (Intro, About, Projects, Skills, Contact)./actions: Next.js Server Actions for handling form logic (e.g.,sendEmail.ts)./context: Global state for the UI theme and active navigation sections./lib: Type definitions, utility functions, and central data management (data.ts)./public: Asset storage for project screenshots and CV files.
- Serverless Contact Form: Sends emails directly via Resend using Server Actions.
- Adaptive UI: Fully responsive design with a custom-built Light/Dark mode toggle.
- Scroll Spy: Navigation automatically updates based on the current section in view.
- Optimized Assets: Next.js Image component for lazy loading and layout stability.
- Type Safety: 100% TypeScript for robust development.
Ensure you have Node.js (v18+) and npm or Bun installed.
# Clone the repository
git clone [Portfolio](https://github.com/samir20-23/Portfolio.git)
# Navigate to the project folder
cd Portfolio_nextJs
# Install dependencies
npm install
Create a .env.local file in the root directory and add Resend API key
npm run dev
Open http://localhost:3000 to view it in browser.
- Updating Projects: Modify
lib/data.tsorlib/projects.tsto add new work. - Styling: All global themes are managed in
app/globals.cssandtailwind.config.js. - Images: Place all new project screenshots in
/public/[project-folder]/.
© 2026 Samir Aoulad Amar. All rights reserved. Built with passion in Tangier, Morocco.
For any inquiries or feedback, feel free to reach out to me at:
Email: aouladamarsamir@gmail.com