Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jishantukripal/portfolio-template
A sleek, responsive portfolio built with React.js and Tailwind CSS, featuring dark/light mode.
https://github.com/jishantukripal/portfolio-template
dark-mode portfolio react reactjs responsive tailwindcss
Last synced: 15 days ago
JSON representation
A sleek, responsive portfolio built with React.js and Tailwind CSS, featuring dark/light mode.
- Host: GitHub
- URL: https://github.com/jishantukripal/portfolio-template
- Owner: jishantukripal
- Created: 2024-10-21T19:58:30.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T20:33:46.000Z (3 months ago)
- Last Synced: 2024-11-16T02:16:00.768Z (3 months ago)
- Topics: dark-mode, portfolio, react, reactjs, responsive, tailwindcss
- Language: JavaScript
- Homepage: https://portfolio-template-dark-mode.netlify.app/
- Size: 2.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 Portfolio Template with Dark/Light Mode
Welcome to my portfolio template built using **React.js** and **Tailwind CSS**! 🌟 This sleek and minimalist portfolio comes with both **dark** 🌑 and **light** 🌞 modes, making it perfect for developers looking to showcase their work in a modern, dynamic way.
🔗 Check out the live demo here: [Portfolio Live](https://portfolio-template-dark-mode.netlify.app/)
# Preview
## ✨ Features
- 💻 **Modern Design**: Clean, responsive, and easy to navigate.
- 🌗 **Dark/Light Mode**: Toggle between dark and light themes for a personalized experience.
- 📱 **Fully Responsive**: Works seamlessly on all devices, from desktops to smartphones.
- ⚡ **Built with React.js**: Leveraging React components for smooth performance.
- 🎨 **Styled with Tailwind CSS**: Easy to customize styles using utility-first CSS framework.
## 🛠️ Installation & Setup
Follow these simple steps to clone, install, and run the portfolio template locally.
### 1. Clone the Repository
First, clone the repository to your local machine:
```bash
git clone https://github.com/your-username/portfolio-template.git
```
### 2. Navigate to the Project Directory
```bash
cd portfolio-template
```
### 3. Install Dependencies
Make sure you have **Node.js** installed. Then, run the following command to install the required dependencies:
```bash
npm install
```
### 4. Start the Development Server
To view the portfolio locally, start the development server:
```bash
npm run dev
```
The portfolio should now be running at `http://localhost:3000` in your browser.
### 5. Build for Production
When you're ready to deploy the portfolio, create a production build:
```bash
npm run build
```
This will create an optimized build in the `build/` folder.
### 6. Customize Your Portfolio
- Update the **content**: Modify the JSX components in the `src/components` folder to add your personal details, projects, and links.
- **Change the styles**: The project is styled with Tailwind CSS. You can easily update styles by modifying the `tailwind.config.js` file or applying utility classes directly in the components.
### 7. Toggle Dark/Light Mode
The dark/light mode feature is built-in using Tailwind CSS's theme feature. Toggle between themes by clicking the **theme switcher** button on the top right corner of the site. The state is managed using `useState` and saved to `localStorage` so the preference persists between sessions.
## 🌍 Deployment
You can easily deploy this project using platforms like [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), or [GitHub Pages](https://pages.github.com/). Here's a quick guide to deploying on Netlify:
1. Push your project to a GitHub repository.
2. Sign in to Netlify and select **New site from Git**.
3. Choose your repository and branch (usually `main`).
4. Click **Deploy**! 🚀
## 🤝 Contributing
Feel free to fork this project and contribute. PRs are welcome!