Skip to content

πŸš€ 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.

License

Notifications You must be signed in to change notification settings

sibisiddharth8/MyMind-Portal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

62 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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!