Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/osamaayub/personalportfolio

Personal Portfolio Website Build using Next Js ,Typescript,Framer Motion
https://github.com/osamaayub/personalportfolio

framermotion nextjs react-email react-email-component react-vertical-timeline-component tailwindcss

Last synced: 13 days ago
JSON representation

Personal Portfolio Website Build using Next Js ,Typescript,Framer Motion

Awesome Lists containing this project

README 

        
A Next.js application built with TypeScript, featuring a modern UI design, responsive layout, and advanced animations using Framer Motion.



## Table of Contents



* [Features](#features)

* [Setup](#setup)

* [Usage](#usage)

* [Contributing](#contributing)

* [License](#license)



## Features



* Latest Next.js 13 features

* Next.js App Router

* Next.js Server Actions

* Client & Server Components

* TypeScript (Beginner & Intermediate)

* Tailwind CSS

* Context API

* Advanced Animations with Framer Motion

* React.Email & Resend

* Custom React hooks

* Fresh, modern UI design

* Light & Dark mode

* Responsive website



## Setup



1. Clone the repository: `git clone https://github.com/your-username/your-repo-name.git`

2. Install dependencies: `npm install` or `yarn install`

3. Create a `.env.local` file and add your RESEND_API_KEY

4. Update the `send-email.ts` action file with your own email address



##Overview 



The PersonalPortfolio is a personal portfolio website built using Next.js. It showcases the work and projects of Osama Ayub, a full-stack developer.



## Features



- Responsive design

- Light and dark mode

- Navigation menu

- Projects showcase

- Skills section

- Contact form



## Technologies Used



- Next.js

- React

- Tailwind CSS

- TypeScript

- Framer Motion

- React.Email

- Resend

- Custom React hooks



## Project Structure



- [app/layout.tsx](cci:7://file:///home/usama/Desktop/portfolio-website/app/layout.tsx:0:0-0:0): Contains the main layout of the application.

- [app/page.tsx](cci:7://file:///home/usama/Desktop/portfolio-website/app/page.tsx:0:0-0:0): Contains the main page of the application.

- `app/components`: Contains reusable components used throughout the application.

- `app/context`: Contains context providers for managing state.

- `app/styles`: Contains global styles.

- `app/utils`: Contains utility functions.

- `public`: Contains static assets.

- `styles`: Contains global styles.

- `lib`: Contains utility functions.



## Getting Started



To set up and run the project locally:



1. Clone the repository:

git clone https://github.com/osamaayub/PersonalPortfolio.git



2. Navigate to the project directory:

cd PersonalPortfolio



3. Install dependencies:

npm install



4. Start the development server:

npm run dev



5. Open your browser and navigate to `http://localhost:5173` to use the application.



## Contributing



If you would like to contribute to the project, please follow these guidelines:



1. Fork the repository.

2. Create a new branch for your changes.

3. Make your changes.

4. Commit your changes.

5. Push your changes to your forked repository.

6. Create a pull request.



## License



The PersonalPortfolio is licensed under the [MIT License](LICENSE).



## Acknowledgements



This project was built using the following resources:



- [Next.js Documentation](https://nextjs.org/docs)

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

- [Framer Motion Documentation](https://www.framer.com/motion/)

- [React.Email Documentation](https://react-email.com/docs)

- [Resend Documentation](https://resend.dev/docs)



## Contact



If you have any questions or need further assistance, please reach out to [[email protected]](mailto:[email protected]).

Feel free to modify and customize this README.md file to fit your project's specific needs.