A personal portfolio showcasing your GitHub profile with a custom-designed, dynamic interface, built with React, TypeScript, TailwindCSS, and DaisyUI. This project highlights your work, including your skills, experience, projects, and more. The website is designed to offer a sleek and responsive experience with a multiple choices of themes available mode toggle, perfect for professional use or showcasing your tech journey.
This project is a personal portfolio designed to dynamically display your GitHub profile and related data, such as repositories, skills, and experience. It’s built to highlight your journey as a Software Developer with a clean, modern design and user-friendly interface. It also integrates authentication, social media links, and more.
- Dynamic Profile Display: Automatically fetches and displays your GitHub profile data.
- Social Media Integration: Links to your social profiles such as LinkedIn, Twitter, and email.
- Theme Mode: Toggle between 33 different themes.
- Skills Section: Showcase your key programming skills with icons.
- Experience & Projects: Highlight your work history and major projects.
- Resume Download: Provide an option for users to download your resume as a PDF.
- Responsive Layout: Optimized for both desktop and mobile devices.
Prerequisites
- Node.js (v16.8 or later)
- npm (or yarn)
Steps to Install
- Clone the repository:
git clone https://github.com/munaciella/github-profile-portfolio.git- Navigate into the project directory:
cd github-profile-portfolio- Install dependencies: If you’re using npm:
npm installIf you’re using yarn:
yarn install- Start the development server: If you’re using npm:
npm run devIf you’re using yarn:
yarn dev- Open your browser and go to http://localhost:5173
After running the project, you can modify your GitHub profile details, resume URL, and social media links directly in the configuration files. The app will automatically update with your details.
Configuration
- GitHub: Add your GitHub username to the configuration to dynamically display your repositories and related information.
- Social Media: Update the social media links for platforms like LinkedIn and Twitter.
- Resume: Provide the URL for your resume file in the configuration for users to download it.
- React: For building the UI components and managing state.
- TypeScript: For adding type safety and improving developer experience.
- TailwindCSS: For rapid styling with utility-first CSS.
- Vite: For fast bundling and development experience.
- DaisyUI: For pre-built components and themes.
- GitHub API: For fetching GitHub profile and repository data.
Contributions are welcome! If you’d like to contribute, please fork the repository, create a new branch, and submit a pull request with your changes.
- Fork the repository
- Create your feature branch (git checkout -b feature-branch)
- Commit your changes (git commit -am 'Add new feature')
- Push to the branch (git push origin feature-branch)
- Create a new Pull Request