page: team and individual team member pages

[Drew-Macgibbon]

This will be a root page on the web-facing side of the application. We will start basic and expand upon functionality.

Instructions:

• checkout a new branch page/team from the dev branch
• find a few designs you like online, we will base ours on the best one.
• take your time and try to use best practices
• reuse code when able

ask any questions below.

[aayu5hgit]

Key Points (Do’s)

• Keep it simple
• Provide Transparency
• Highlight the personalities / skills
• Interactive designs / functionality
• Build a connection with visiting user

Attaching a roughly formatted JSON template:

[
    {
        "id": 1,
    "bio": "A short 2/3 lines bio to depict the personality of the team member. [keep it short and clean]",
    "avatar": "/images/team/drew-macgibbon.jpg",
        "name": {
             "first": "Drew",
             "last": "MacGibbon",
             "nickname": "Mac"
         },
        "socials" : [
         { "platform": "twitter", "link": "https://twitter.com/AstronEra"},
             { "platform": "linkedin", "link": "https://www.linkedin.com/company/astronera/"},
             { "platform": "instagram", "link": "https://www.instagram.com/astronera"}
        ],
    "position": { 
         "title" : "CTO",
             "description": "Information about the position, responsibilities etc.",
             "start-date":  "timestamp from day",
        },
    "achievements": [ 
       { "title": "Add highest education here if wanted", "body": "elaborate", "link": "optional" },
       { "title": "Previous experience as well", "body": "elaborate", "link": "optional" },
    ],
    "publicity": [
       { "title": "", "body": "elaborate", "link": "optional" }
    ],
    },
]

[Drew-Macgibbon]

I have updated the structure a bit, happy to proceed with it as is @aayu5hgit . Find a few designs you like and post them here.

"articles": "thumbnail or link of article(s) published by the user" This is a good idea, eventually we will connect it to the database and store all employee information as users there, then we can easily link to the posts etc.

We may also use nuxt/content for the website blog, as I like the control MDC (Markdown Components) gives us. Yet to be finalized.

for now, we will store it as a JSON file.

[Drew-Macgibbon]

• [x] create a new branch from develop feature/team-page
• [x] team and individual team member page (dynamic routing)
• [ ] finalize design - your own or a design you like, mobile-first design
• [x] update website.json to have team page
• [ ] components for team/achievements/publicity
• [x] we use heroicons/mdi/material-symbols icons - https://icones.js.org/
• [ ] our component library - https://ui.nuxtlabs.com/

[aayu5hgit]

I've made a sample UI of the member card, sharing below. Review it whenever you get time and suggest the changes Sample Card UI

[Drew-Macgibbon]

@aayu5hgit I like it.

My initial thoughts are that I'm not sure how this will translate to web design, the star bg and glass design might give you issues, especially with light/dark. Also note, we don't have well defined branding at this stage, so don't get too attached to colours.

That being said, if you're confident, I'm happy for you to try.

[aayu5hgit]

@Drew-Macgibbon I am ready to give it a try. Let's see where I face any challenge, we can discuss on that and find a replacement/solution. Talking about the colour scheme, I'll use the one in that design (for now) and later we can work on that.

[aayu5hgit]

@Drew-Macgibbon I gave a try and achieved this so far. I personally feel like the bio section should not be displayed on the card, instead we can depict some other information. Share your thoughts

[Drew-Macgibbon]

@aayu5hgit love it.

Agreed, I think we could just have an outline button to link to the individual page in place of the bio. Possibly semibold/bold for the name and slightly more contrast in size between name and role, I'd also suggest all black/dark text on the light design.

Keep it up, very impressed!

[aayu5hgit]

@Drew-Macgibbon thank you.

I'll change the required and also thinking to add on some minor detailing such as transition animations (like when a user hovers the card, the stars should move slowly and something like that).

[aayu5hgit]

@Drew-Macgibbon review the individual member page design (attached below) and suggest the changes.

[aayu5hgit]

@Drew-Macgibbon here's the variation of the above, making it simple to understand and code.

[aayu5hgit]

@Drew-Macgibbon This is what is achieved so far, socials have to be added, but have a look at the rest and suggest if there are changes to be made.

[Drew-Macgibbon]

@aayu5hgit looks good, this page should not be inside the app though, should be https://www.astronera.org/team then team/id. Once that's changed I'm happy for you to create a pull request.

[aayu5hgit]

@Drew-Macgibbon noted. I'll move the directory outside /astrotribe and then create a PR.

[aayu5hgit]

@Drew-Macgibbon I made the design 100% responsive, updated website.json and filtered the code. You can refer the following video for the functioning and suggest changes if there are to be made, else I can create a new Pull Request.

https://github.com/incubrain/astrotribe/assets/86314754/5ad4f5aa-e8dc-4580-9b4f-66c6aa0a12d9

[Drew-Macgibbon]

made some changes to make it more consistent with the current design and merged the pull request.