Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mo-hassann/developer-portfolio
Using Next.js, and Framer Motion, this portfolio showcases developer skills and projects. It's responsive and visually appealing.
https://github.com/mo-hassann/developer-portfolio
code-editor developer developer-portfolio framer-motion nextjs portfolio portfolio-website react tailwindcss vscode
Last synced: 3 months ago
JSON representation
Using Next.js, and Framer Motion, this portfolio showcases developer skills and projects. It's responsive and visually appealing.
- Host: GitHub
- URL: https://github.com/mo-hassann/developer-portfolio
- Owner: mo-hassann
- License: mit
- Created: 2024-08-12T18:10:30.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-26T12:31:13.000Z (5 months ago)
- Last Synced: 2024-09-29T00:23:48.254Z (4 months ago)
- Topics: code-editor, developer, developer-portfolio, framer-motion, nextjs, portfolio, portfolio-website, react, tailwindcss, vscode
- Language: TypeScript
- Homepage: https://mohamed-hassan.vercel.app
- Size: 6.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Developer Portfolio
A modern and responsive developer portfolio which looks like code editor built using Next.js and Framer Motion. This portfolio showcases projects, skills, and contact information, with smooth animations and transitions for an engaging user experience.
## ✨ Features
- **Responsive Design**: Optimized for all devices, ensuring a great user experience on mobile, tablet, and desktop.
- **Smooth Animations**: Powered by Framer Motion for seamless animations and transitions, enhancing the visual appeal of the portfolio.
- **Project Showcase**: Display your projects with descriptions, images, and links to GitHub repositories or live demos.
- **Skills Section**: Highlight your technical skills with interactive animations.
- **Contact Form**: A functional contact form that allows potential clients or employers to reach out directly.
## 🛠️ Tech Stack
- **Next.js**: A React framework for building server-rendered or statically exported React applications with ease.
- **Framer Motion**: A production-ready motion library for React, allowing you to create complex animations easily.
- **Tailwind CSS**: A utility-first CSS framework for building custom designs without leaving your HTML.
## 📦 Getting Started
To get a local copy of this project up and running, follow these steps.
### Prerequisites
- **Node.js** (v16.x or higher)
- **npm** or **yarn** as your package manager
### 🚀 Installation
1. **Clone the repository:**
```bash
git clone https://github.com/mo-hassann/developer-portfolio.git
cd developer-portfolio
```
2. **Install dependencies:**
Using npm:
```bash
npm install
```
Or using yarn:
```bash
yarn install
```
3. **Start the development server:**
Using npm:
```bash
npm run dev
```
Or using yarn:
```bash
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) to view the portfolio in your browser.
## 📖 Usage
### Running the app
- **Development mode:** `npm run dev` or `yarn dev`
- **Production mode:** `npm run build && npm start` or `yarn build && yarn start`
### Customization
To customize your portfolio:
1. **Update Content**: Edit the content files in the `content` folder to update your profile, projects, skills, and contact information.
2. **Change Styles**: Modify the Tailwind CSS styles in the `styles` folder to match your desired theme.
3. **Add Animations**: Use Framer Motion components and hooks to add or customize animations throughout the portfolio.
## 🤝 Contributing
We welcome contributions to this project. To contribute:
1. **Fork the repository.**
2. **Create a new branch** (`git checkout -b feature/your-feature-name`).
3. **Make your changes** and commit them (`git commit -m 'Add some feature'`).
4. **Push to the branch** (`git push origin feature/your-feature-name`).
5. **Open a pull request**.
Please make sure to update tests as appropriate.
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.