🛠 Technologies Used

Frontend

• Next.js 13+: React framework with hybrid rendering (SSG/SSR)
• React 18+: Main UI library
• Tailwind CSS: Utility-first CSS framework for styling
• Context API: Global state management for the application

APIs and Services

• GitHub REST API: Retrieve user and repository data
• GitHub GraphQL API: Specific queries for detailed data

Utilities and Libraries

• React Loadable: Lazy loading of components
• QR Code Generation: Generate QR codes for sharing
• PDF Generation: Create PDF documents for export
• Chart Libraries: Data visualization in charts

📋 System Requirements

Minimum Requirements

• Node.js 16.8.0 or higher
• npm 7.0 or higher
• Personal GitHub access token with the appropriate scopes

Required GitHub Token Scopes

The token must have the following permissions:

• repo (including all sub-permissions)
• read:user
• user:email
• project
• read:project
• workflow

💻 Installation and Setup

1. Clone the Repository

   git clone https://github.com/marichu-kt/PortfolioHub
   cd portfoliohub
   

2. Install Dependencies

   npm install
   

3. Get and Configure the GitHub Token
   To run the script, you must create and configure a .env.local file in the root of the project with the content:

   NEXT_PUBLIC_GITHUB_TOKEN=XXXXXXXXXXXXXXXXXXX
   

   Replace XXXXXXXXXXXXXXXXXXX with:

   • GITHUB_TOKEN: your personal access token from GitHub Settings → Developer settings → Personal access tokens

4. Run the Application

   npm run dev
   

   The application will be available at http://localhost:3000

5. Build for Production

   npm run build
   npm start
   

📁 Project Structure

portfoliohub/
├── public/                 # Static files
│   ├── images/            # General images
│   │   └── logo.png       # Application logo
│   └── textures/          # Textures for components
│       ├── earth.jpg
│       ├── jupiter.jpg
│       ├── mars.jpg
│       ├── moon.jpg
│       └── venus.jpg
├── src/
│   ├── components/        # React components
│   │   ├── Achievements.js
│   │   ├── AdvancedStats.js
│   │   ├── AnimatedSection.js
│   │   ├── GitHubCalendarS.js
│   │   ├── LanguageChart.js
│   │   ├── LiveCodeEditor.js
│   │   ├── LoginButton.js
│   │   ├── PdfExportButton.js
│   │   ├── QRShare.js
│   │   ├── RepoFilters.js
│   │   ├── RotatingPlanet.js
│   │   ├── Skills.js
│   │   └── ThemeSwitch.js
│   ├── context/           # React contexts
│   │   └── ThemeContext.js
│   ├── hooks/             # Custom Hooks
│   │   └── useAuth.js
│   ├── pages/             # Next.js pages
│   │   ├── _app.js        # Main app component
│   │   ├── customize.js   # Customization page
│   │   ├── dashboard.js   # Main dashboard
│   │   └── index.js       # Home page
│   ├── services/          # Services and APIs
│   ├── styles/            # Global styles
│   │   └── globals.css
│   └── utils/             # Utilities
│       └── languageicons.js
├── next.config.js         # Next.js configuration
├── tailwind.config.js     # Tailwind CSS configuration
├── postcss.config.js      # PostCSS configuration
├── package.json           # Dependencies and scripts
└── README.md              # This file

🔮 Upcoming Features

• Predefined templates for different portfolio styles
• More detailed commit and contribution analysis
• Plugin system for extended features
• More ideas comment here: Discussions

🔖 Use of Author References for Planet Textures

To respect the copyright and attributions of the images used (exclusively for the planet texture images), I have used the tool:

👉 SaferLayer

This tool allows embedding the author reference or the intended activity into the images, ensuring proper credit attribution clearly within the website and preventing their removal with Artificial Intelligence.

📫 Contact

If you have questions or want to provide suggestions, you can write to me at:
marichu.private@proton.me

📄 License

This project is licensed under the MIT License. See the file LICENSE for more details.