Add a TechDisplay page in DevDisplay 🌟 #level3

[codeaashu]

What feature?

Add a TechDisplay page is DevDisplay
check out the UI Click here

⚠️ This issue will be closed on 31 October 🚧

When click on Tech Display button then a page "devdisplay/techdisplay" is open

In this page - Overall Design:

• Create a clean, modern, and responsive web application UI named TechDisplay.
• Use a sidebar layout similar to Peerlist's, with simple, intuitive icons and labels for each menu item.
• Use a minimal color scheme with accent colors to highlight active sections, buttons, and important interactions.

---

Sidebar Layout:

• Position the sidebar on the left, featuring 8 main menu buttons, each labeled with an icon and text.
• Menu Items:
  1. Home
  2. Opportunities
  3. Tech Resources
  4. Projects
  5. Idea Submission
  6. Discussions
  7. Portfolio Builder
  8. Resume Builder
• Add a profile section at the bottom with options for profile picture, name, and follower count. Include an "Add New" button for quick actions.

---

Menu Descriptions and Page Layouts

1. Home Page

   • Display an introductory banner section for TechDisplay, outlining its mission and how it meets tech-related needs.
   • Showcase a preview of each feature in a grid or card format with short descriptions and links to individual sections.
   • Include a trending projects section to highlight top community projects with images, upvotes, and a summary.

2. Opportunities Page

   • Design a list-style layout for various opportunity categories:

     • Hybrid & Onsite Jobs
     • Remote Jobs
     • Internships
     • Freelance Work
     • Hackathons
     • Open Source
     • Tech Events
     • BootCamps
     • Devfest

   • Allow users to filter and search opportunities.

   • Each opportunity card should show the title, type (e.g., Remote, Freelance), brief description, and details button to expand information.

3. Resources

   • include all the tech resources listed below
     • Tech-related Notes
     • Programming language courses
     • Top Github Repository
     • Top AI Tools
     • Paid Course video in Free

4. Projects Page

   • Divide this page into two sections: Project Showcase and Project Spotlight.
   • Project Showcase: Display user-submitted projects as cards with images, brief descriptions, tags, and an "Upvote" button.
   • Project Spotlight: Highlight top-voted projects in a larger section, with the top project prominently displayed.
   • Provide options for users to submit a project and create profiles with project information and images.

inspiration of “Projects” Features - https://www.projectshut.tech/

5. Idea Submission Page
   • Create a form where users can submit new ideas with a title, description, tags, and category.
   • Implement a voting system for ideas, displaying the highest-voted ideas at the top.
   • Each idea card should show the title, description, submitter's name, and upvote count.

inspiration of “idea sumbission” Features - take by peerlist.io and also by https://www.projectshut.tech/

6. Discussions Page
   • Design a discussion forum layout with post threads where users can start or join discussions.
   • Add comment and reply functionality for each post, similar to a social media feed.
   • Include options to directly message users (Inbox feature) to encourage community interaction.

inspiration of “Discussions” Features - take by peerlist.io

7. Portfolio Builder Page
   • Provide a form-based layout for users to enter details (e.g., skills, experience, projects, and education).
   • Include template selection options to preview different portfolio styles.
   • Offer a "Publish Portfolio" button to host their portfolio on TechDisplay, with options for custom URLs.

inspiration of “Portfolio Builder” Features - take by https://github.com/Ujjwal2327/Angstrom & also https://portfoliobuilder.vercel.app/

8. Resume Builder Page
   • Display a step-by-step form where users can fill in personal details, skills, experience, and education.
   • Allow users to select from multiple templates and preview their resume as they build it.
   • Provide an option to download the resume as a PDF.

inspiration of “Resume Builder” Features - take by https://resume-builder-pro.vercel.app/ & also take inspiration from other resume builder

---

Additional UI Elements:

• Top Navigation Bar with options for Search, Notifications, and Settings.
• Right Sidebar featuring project spotlight, trending discussions, and active users.

---

• Adopt a clean, spacious, and organized look for each page.
• Use a card-based layout for showcasing projects, opportunities, and discussions.
• Incorporate hover effects on buttons and cards to improve interactivity.
• Keep a consistent iconography style for menu items and buttons.

---

Take some UI inspiration of peerlist.io

also take some inspiration from - https://digitomize.com/

For this feature needs a bunch of contributors.

You can choose any one feature as per your choice and create a new issue accordingly.
I will assign it to you but before that you will have to create a page for Tech Display.

⚠️ This issue will be closed on 31 October 🚧

Add screenshots

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[amanver45]

Want to work on this issue

[w0wayush]

Would like to work on this.

[ishap11]

Kindly assign this to me @codeaashu

[codeaashu]

Would like to work on this.

lets's start

[codeaashu]

Kindly assign this to me @codeaashu

I have already assigned you
This feature is huge
Can you do it all alone

[codeaashu]

Want to work on this issue

let's start

[w0wayush]

@codeaashu you can distribute the work to different assignees it would be better that way.

[PARVNEMA]

Yeah @codeaashu @w0wayush is right break the issue in small and distribute it

[codeaashu]

You can choose any one feature as per your choice and create a new issue accordingly.
I will assign it to you but before that you will have to create a page for Tech Display.

Remember that ⚠️ This issue will be closed on 31 October 🚧

[Brijeshthummar02]

@codeaashu i'm new to repo kindly assign me the task.

[SrishtiChamoli]

@codeaashu Can I be assigned the task as well?

[Hemraj-7]

@codeaashu I want to work on this issue please assign me

[achintyasrivastav]

@codeaashu Can I get the chance to contribute to these tasks alongside the team?

[codeaashu]

Hello everyone,

I'd like to invite you to a meeting today on 9PM to discuss the updates on this issue. We’ll be covering the progress made so far, clarifying tasks, and confirming which features each of you is working on.

Please join the Development Team using the following DevDisplay Whatsapp community link
DevDisplay Community

Assignees:
@ishap11
@PARVNEMA
@w0wayush
@SrishtiChamoli
@amanver45
@Hemraj-7
@Brijeshthummar02
@achintyasrivastav

Looking forward to collaborating with all of you in today’s meeting!
Thanks!