Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamfrerot/frerot.dev
Welcome to my portfolio website! I built this using React, Vite, Framer Motion, Tailwind CSS, React Icons, and components from Aceternity UI to showcase my projects, skills, and contact details in a modern and engaging way.
https://github.com/iamfrerot/frerot.dev
framer-motion portfolio react tailwind typescript
Last synced: 10 days ago
JSON representation
Welcome to my portfolio website! I built this using React, Vite, Framer Motion, Tailwind CSS, React Icons, and components from Aceternity UI to showcase my projects, skills, and contact details in a modern and engaging way.
- Host: GitHub
- URL: https://github.com/iamfrerot/frerot.dev
- Owner: iamfrerot
- License: mit
- Created: 2024-06-10T19:16:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-27T15:44:04.000Z (11 days ago)
- Last Synced: 2025-01-27T16:39:52.668Z (11 days ago)
- Topics: framer-motion, portfolio, react, tailwind, typescript
- Language: TypeScript
- Homepage: https://frerot.dev
- Size: 252 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# My Portfolio Website
Welcome to my portfolio website! I built this using **React**, **Vite**, **Framer Motion**, **Tailwind CSS**, **React Icons**, and components from **Aceternity UI** to showcase my projects, skills, and contact details in a modern and engaging way.
## Features
- **React with Vite**: Super fast and efficient build setup.
- **Framer Motion**: Smooth animations that make the site feel alive.
- **Tailwind CSS**: A utility-first CSS framework for designing quickly and easily.
- **Aceternity UI**: Ready-to-use components for a polished design.
- **React Icons**: Beautiful and customizable icons for enhancing UI.
- **Dark Mode and Light Mode Support**: Seamlessly switch between light and dark themes for a personalized experience.
- **Responsive Design**: Looks great on desktops, tablets, and phones.
## Demo
Check out the live site [frerot.dev](https://frerot.dev).
## Installation
Here’s how you can run the site on your own machine:
1. **Clone the repo:**
```bash
git clone https://github.com/iamfrerot/portfolio.git
```
2. **Go to the project folder:**
```bash
cd portfolio
```
3. **Install the dependencies:**
```bash
npm install
```
4. **Start the development server:**
```bash
npm run dev
```
5. **Open the site in your browser:**
Head over to `http://localhost:3000`.
## How to Use
- Update the **projects** section with your own work by editing `src/utils/data.ts` (or wherever the project data lives).
- Customize styles and components in the `src/ui/` and `src/Components/` folders.
- Tweak animations using `Framer Motion` in the relevant components.
- Utilize **Aceternity UI** components for adding or modifying UI elements.
- Add icons using **React Icons** by importing them from the library and integrating them into your components.
- Switch between dark and light modes using the built-in theme toggle functionality.
## Technologies I Used
- **React**: For building the user interface.
- **Vite**: For faster development and builds.
- **Framer Motion**: To add animations.
- **Tailwind CSS**: For styling, including dark mode support.
- **Aceternity UI**: For pre-designed, high-quality UI components.
- **React Icons**: For easily integrating scalable icons.
## Deployment
Here’s how I deploy the site:
1. **Build the project:**
```bash
npm run build
```
2. **Deploy to hosting platforms** like Vercel, Netlify, or GitHub Pages:
- For **Vercel**, I push the repo to GitHub and import it into Vercel.
## Contributions
I’m open to suggestions! If you spot any bugs or have ideas for new features, feel free to open an issue or send a pull request.
## License
This project is under the [MIT License](https://opensource.org/license/mit).
## Acknowledgements
Big thanks to the tools that made this possible:
- [React](https://react.dev/)
- [Vite](https://vite.dev/)
- [Framer Motion](https://www.framer.com)
- [Tailwind CSS](https://tailwindcss.com/)
- [Aceternity UI](https://ui.aceternity.com/)
- [React Icons](https://react-icons.github.io/react-icons/)