Namit2111 / bible-verse-finder

https://bible-verse-finder.vercel.app
GNU General Public License v3.0
24 stars 32 forks source link

Add Tech Stack Section to About Us Page #24

Closed JustinhSE closed 3 weeks ago

JustinhSE commented 1 month ago

Overview

We need to enhance our About Us page by including a dedicated section that showcases the tech stack used in our current project. This will help visitors and potential collaborators understand the technologies that power our application.

Task

  1. Review Project: Go through our current project to identify all the technologies we are actively using. This includes programming languages, frameworks, libraries, tools, and any other relevant technologies.

  2. Curate List: Create a concise and accurate list of these technologies. Ensure that only the technologies currently in use are included, removing any unused technologies.

  3. Design Section: Based on the curated list, design a visually appealing section for the About Us page that highlights these technologies. Use the Icon Cloud to create engaging visuals.

  4. Implement Changes: Update the About Us page to include the new tech stack section. Ensure that the section is responsive and maintains the overall design aesthetics of the page.

JustAdi10 commented 1 month ago

Could you assign this to me

JustinhSE commented 1 month ago

@JustAdi10 do you mind discussing your approach quickly?

JustinhSE commented 1 month ago

sorry wrong commit # lol

anjali-vaish commented 1 month ago

@JustinhSE Hi, I'd like to work on this. Could you please assign it to me. Thanks!

Namit2111 commented 1 month ago

hi @anjali-vaish please use discord to describe your approach and design choices first

maiHydrogen commented 1 month ago

Hi @JustinhSE i think i can try to help on this one. here is my approach and please correct me if i'm wrong- step 1. listing the used tech stack i.e. Backend: Flask (Python) Frontend: HTML, CSS, JavaScript Machine Learning: Python libraries such as scikit-learn (according to contribute doc in this repo, i'll try to find more like SQLAlchemy for database interactions,etc if any)
step 2. filtering unused tech stack step 3. adding an About page in project step 4. adding icon visuals using iconcloud and iconslugs from magicui and using css and adding some more visual effects like hovering or something else using magicui or javascript can i work on this one ??

Namit2111 commented 1 month ago

Hi @maiHydrogen you can work on it but before making any PR in future related to this get your design reviewed by @JustinhSE

maiHydrogen commented 1 month ago

@Namit2111 thanks for this one question how can i get my design checked before making any PR because he will review my work only after he sees my PR isn't it?? please don't mind as i'm new to this opensource thing.

JustinhSE commented 1 month ago

@maiHydrogen when you run it on your local host, you can send a photo of what it looks like. And yes you would have to create an about us page. If you are uncomfortable doing that, I can just create a blank page for you if you want. Let me know

maiHydrogen commented 1 month ago

@JustinhSE thanks for clarifying Firstly I'll try to do that all by myself and if I feel I'm unable to do something I think I can let you know here afterall we are all here learn new things isn't it???

JustinhSE commented 1 month ago

@maiHydrogen true! Great to see you pushing out of your comfort zone

JustinhSE commented 1 month ago

@maiHydrogen and @d-beloved please communicate on the About us page, you have related issues now so make sure you are in communication regarding the build of this page

maiHydrogen commented 1 month ago

Sure Sir

JustinhSE commented 1 month ago

@maiHydrogen any updates?

maiHydrogen commented 1 month ago

@JustinhSE i have talked with d-beloved and we agreed upon building the page togather after discussing some designs and he will do his part first and then he will help me out meanwhile i have listed all the techstack used in this project via dependencies and all but i'm still figuring out how to filter them out. these are the ones what i have found - Backend Frameworks - Flask (Python) Python Libraries - blinker,click,colorama,Flask,itsdangerous,Jinja2,joblib,MarkupSafe,nltk,numpy,regex,scikit-learn,scipy,threadpoolctl,tqdm,Werkzeug ,python-dotenv,pymongo,langchain_community,langchain_google_genai,fitz,qdrant,groq Frontend Languages & Frameworks - HTML,CSS,JavaScript,TypeScript,React,Next.js (next) Libraries & Tools - react-dom,tailwindcss,postcss,lucide, react,clsx,radix ui,eslint,eslint-config-next Utilities - json,NextResponse please correct me if i'm wrong anywhere

JustinhSE commented 1 month ago

Thanks for the update. That’s mostly what we used. But now consolidate that down into images that the tech cloud component supports @maiHydrogen

JustinhSE commented 4 weeks ago

@maiHydrogen any updates? Only a few days left for this issue

maiHydrogen commented 4 weeks ago

@JustinhSE sorry for this delay on this issue,i have seen the PR raised by d-beloved as i was waiting for that and i'm working on mine too.. i hope i'll raise the PR by this time tomorrow. thanks for the patience

JustinhSE commented 4 weeks ago

@maiHydrogen thanks for your response, just make sure its in accordance with his pr code wise

maiHydrogen commented 4 weeks ago

alright!

JustinhSE commented 4 weeks ago

@maiHydrogen it has been merged

maiHydrogen commented 4 weeks ago

@JustinhSE check if this works - Screenshot 2024-10-29 211157 on small screens it looks pretty good - Screenshot 2024-10-29 201127 Screenshot 2024-10-29 201154 however on big screens there are some issues with sizes of these divs with resizing windows and there are some icons which are unavailable in icon cloud

JustinhSE commented 3 weeks ago

Are you able to have a transparent background instead of white? @maiHydrogen

maiHydrogen commented 3 weeks ago

Are you able to have a transparent background instead of white? @maiHydrogen

yes i am but some icons have black/dark shade so they will not be visible properly here are some screenshots with transparent,black and a lighter shade of black background just tell me what you like Screenshot 2024-10-29 211811 Screenshot 2024-10-29 212110 Screenshot 2024-10-29 212301 erly

d-beloved commented 3 weeks ago

@maiHydrogen try to make the white background transparent...something like bg-white/30, try varying the degree of transparency to see how the icons with black outlines look.

maiHydrogen commented 3 weeks ago

@maiHydrogen try to make the white background transparent...something like bg-white/30, try varying the degree of transparency to see how the icons with black outlines look.

i think instead of going into darker shade of white we should go with lighter shade of black as it will go along with the theme of page otherwise it will be too bright colours due to background gradient

maiHydrogen commented 3 weeks ago

Screenshot 2024-10-29 215925 Screenshot 2024-10-29 220800 - Copy which one will be better?

JustinhSE commented 3 weeks ago

2