MyMind-Portal Tailwind Templates

Mymind Portal

šŸš€ Dynamic portal to manage Bio, Skills, Experience, Projects, and Education for MyMind | Portfolio. Built with React, Tailwind CSS & Firebase. Fully responsive with Google Auth & PWA support.

MyMind | Portal šŸš€

Welcome to MyMind | Portal šŸŽØ, your one-stop solution for dynamically managing and updating the Bio, Skills, Experience, Projects, and Education sections of your personal portfolio. Designed with simplicity and efficiency in mind, this portal lets you keep your portfolio content fresh and up to date.

šŸ”— Access the portal here: MyMind | Portal

🌐 Check out the live portfolio: MyMind | Portfolio

Key Features ✨

1. Google Authentication šŸ”’

  • Secure login via Google Authentication.
  • The login page includes:
    • Heading: MyMind | Portal
    • Inputs: Email and Password (with a show/hide toggle šŸ‘ļø)
    • Login Button to proceed to the portal.

Desktop View:

MyMind Portal Login Page
MyMind Portal Login Page

Mobile View:

MyMind Portal Login Page Mobile MyMind Portal Login Page Mobile MyMind Portal Login Page Mobile

2. Customizable Pages šŸ› ļø

Upon logging in, you are greeted with a Welcome Message šŸŽ‰ and given options to manage the following pages:

Bio šŸ“

  • Edit and save your:

    • Name āœļø
    • Description šŸ—’ļø
    • Roles šŸ’¼
    • Profile Picture šŸ“ø
    • GitHub URL šŸ”—
    • LinkedIn URL šŸ”—
    • Instagram URL šŸ“·
    • Resume (with upload functionality šŸ“„)
  • Delete all bio data with the Delete Button šŸ—‘ļø.

    Desktop View:

MyMind Portal Bio Page
MyMind Portal Bio Page

Mobile View:

MyMind Portal Bio Page Mobile MyMind Portal Bio Page Mobile MyMind Portal Bio Page Mobile

Skills šŸ› ļø

  • Add, edit, or delete skills.

  • Inputs include:

    • Skill Name šŸ’”
    • Skill Type (Frontend, Backend, AI/ML, Others) šŸ–„ļø
    • Upload Skill Image šŸ–¼ļø

    Desktop View:

MyMind Portal Skills Page
MyMind Portal Skills Page

Mobile View:

MyMind Portal Skills Page Mobile MyMind Portal Skills Page Mobile MyMind Portal Skills Page Mobile

Experience šŸ’¼

  • Add, edit, or delete experiences.

  • Experience is displayed as cards šŸƒ with Edit and Delete options.

  • Input fields include:

    • Company Name šŸ¢
    • Date šŸ“…
    • Role šŸ‘”
    • Description šŸ“
    • Company Link šŸ”—
    • Skills Gained šŸ’”
    • Company Logo šŸ™ļø

    Desktop View:

MyMind Portal Experience Page
MyMind Portal Experience Page

Mobile View:

MyMind Portal Experience Page Mobile MyMind Portal Experience Page Mobile MyMind Portal Experience Page Mobile

Projects šŸ’»

  • Manage projects with options to add, edit, or delete.
  • Projects are displayed as cards šŸƒ with:
    • Title šŸ·ļø

    • Category (Web, Deep Learning, Machine Learning, etc.) šŸ“‚

    • Date šŸ“…

    • Description šŸ“

    • GitHub URL šŸ”—

    • Web App URL 🌐

    • Tags šŸ·ļø

    • Project Image šŸ–¼ļø

    • Team Members šŸ‘„ (add/delete team members with inputs for their name, GitHub URL, LinkedIn URL, profile picture)

    • Checkbox to "Show Project on Home Page" šŸ  of the portfolio.

      Desktop View:

MyMind Portal Projects Page
MyMind Portal Projects Page

Mobile View:

MyMind Portal Projects Page Mobile MyMind Portal Projects Page Mobile MyMind Portal Projects Page Mobile

Education šŸŽ“

  • Manage education with options to add, edit, or delete.

  • Displayed as cards šŸƒ with edit and delete features.

  • Input fields include:

    • School/College Name šŸ«
    • Degree šŸŽ“
    • Date šŸ“…
    • Grade šŸ“Š
    • Description šŸ“
    • School/College Logo šŸ«

    Desktop View:

MyMind Portal Education Page
MyMind Portal Education Page

Mobile View:

MyMind Portal Education Page Mobile MyMind Portal Education Page Mobile MyMind Portal Education Page Mobile

3. Portal Page šŸ 

After login, navigate the portal using:

  • Five Buttons šŸ”˜ leading to the respective pages (Bio, Skills, Experience, Projects, Education)

  • Logout Button 🚪 to securely log out.

    Desktop View:

MyMind Portal Portal Page
MyMind Portal Portal Page

Mobile View:

MyMind Portal Portal Page Mobile MyMind Portal Portal Page Mobile

4. Reusable Components šŸ”

  • Header šŸ”: Includes navigation back to the portal.
  • Footer šŸ”»: Includes the MyMind | Portfolio logo, your name, and social icons for GitHub, LinkedIn, and Instagram, along with a copyright message.

5. Modals and Loaders ā³

  • Confirmation modals šŸ›‘ to prevent accidental deletions.

  • Loaders ā³ for a smooth user experience during data and image uploads.

    Mobile View:

MyMind Portal Modals MyMind Portal Modals MyMind Portal Modals MyMind Portal Loaders

6. Responsive Design šŸ“±šŸ’»

  • The entire portal is optimized for both desktop and mobile use, providing a seamless experience across devices.

7. PWA Support šŸ“²

  • The portal can be installed as a web app with a custom icon via the manifest.json.
  • Includes meta tags, Open Graph (OG) tags, and Twitter tags 🐦 for SEO optimization and social media integration.

Tech Stack šŸ› ļø

  • Frontend: React.js, Tailwind CSS šŸŽØ
  • Hosting: GitHub Pages šŸ–„ļø
  • Backend: Firebase (Realtime Database for data, Storage for images, and Authentication for login) šŸ”„
  • Authentication: Google Sign-In šŸ”’

Collaboration šŸ¤

We are open to contributions! If you're interested in collaborating or enhancing this project, feel free to fork this repository šŸ“ and submit a pull request šŸ”„. Let's build something great together!


Top categories

Loading Svelte Themes