gsasansol/girlscript-asansol

Github repository for the official website of GirlScript Foundation's Asansol Chapter using Vanilla JS

 GirlScript Asansol Community Website 

This is the student-run community site and event management webapp for GS's Asansol Students' Chapter using HTML, CSS and JavaScript. For any queries join our Discord.

💻 Getting started

• Star & fork this repo and join the Discord server (mandatory for communication with maintainers and for raising self-assigned issues).
• Clone repo locally using git clone https://github.com/gsasansol/GirlScript-Asansol.git.
• After cloning make sure you create a new branch by using git checkout -b my-branch.
• Add your name in the CONTRIBUTORS.md file.
• Add the modified/created files to the staging using git add .
• Commit the changes made into the checked out branch using git commit -m "commit message".
• Push the changes using git push origin my-branch.

Wow, you did it, happy codding!

Note 1:

We're observing beginners addressing bugs and creating feature updates without any assignment or prior approval from the maintainers. Even though we appreciate the enthusiasm, that is not how we are accepting contributions in our repository and we encourage all beginners to read and properly follow the contribution policies. Please ensure all ideas are thoroughly discussed and have received approval from the moderating team before collaborators begin working on the updates.

Note 2:

Once an issue is assigned to an individual (and one individual only at a time) we'll not reassign the same to anyone else unless the pull-request window expires (5 days from time of assignment) or the assignee unassign themselves. Any message from new-comers requesting assignment to an issue already claimed, will be ignored. First-time contributors are especially asked to take heed of this.

⚒️ Tools and Frameworks

✨ Contributing

By contributing to this repository, you adhere to the rules in our Code of Conduct. Here are a few general instructions for people willing to develop onto the codebase.

• Create issues to discuss your ideas with the maintainers

Creating issues before starting to work on your pull request helps you stay on the right track. Discuss your proposal well with the current maintainers.

• Keep the code clean

Follow the code formatting standards of the repository by referring to existing source files.

• Comments are the best

Make it clear what hacks you've used to keep this website afloat. Your work needs to be understood first, before getting appreciated.

• Keep the Contributors section up-to-date

To display your contributions to visitors and future contributors.

👨‍💻 Our valuable Contributors

This project is made possible by our valuable contributors .Thanks to all the People Who Contribute.

📜 License

MIT License Copyright (c) 2022 GirlScript Asansol

Hacktoberfest 2022

Repository designed for beginner to contribute to open-source

❓ What is Hacktoberfest 2022?

Hacktoberfest 2022 is a month long virtual festival event to celebrate open source contributions presented by Digital Ocean, Intel and DEV. It is the easiest way to get into open source! During the entire month of October 2022, all you have to do is contribute to any open source projects and open at least 4 pull requests. Yes, any project and any kind of contributions. You don’t need to be an expert in programming or coding. It can be a be a bug fix, improvement, or even a documentation change! And win an awesome T-shirt and awesome stickers. Get started!

😕 Why Should I Contribute?

The Hacktoberfest’s simple plain objective is:

Support open source and earn a limited edition T-shirt!

But, it’s not just about the T-shirts or stickers. Its about supporting open source. Its about celebrating open source, and giving it back. If you’ve never contributed to open source before, this is the perfect time to get started because Hacktoberfest provides a large list of available contribution opportunities (and yes, there are always plenty for beginners too).

👌 What Can I Contribute?

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

It doesn’t need to be code. It can be even documentation. Or spelling fix.

You can contribute to any open source project hosted on Github.com and contribute anything between October 1 to October 31 midnight in 2020. You will find plenty of issues labeled with hacktoberfest or good-first-issue etc on Github. These will be the simple ones most probably and easy to fix.

How to contribute

Submit your pull request here for Hacktoberfest-2022 in any language you prefer, if language folder not present, create one as a part of it, after script add your name and GitHub profile into Contributors.md file.

👕 Win Your T-Shirt

In past years, T-shirts have arrived in November or December, depending on how far you live from San Francisco.

The Digital Ocean team should eventually contact you asking for your shirt size and shipping address. (Keep in mind they are shipping 40,000 shirts so this process will take a while.) And yes, they will ship internationally.

Don’t miss this opportunity. Start contributing to open source and get a limited edition T-shirt for Free! And also, Stickers!

Event details

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

Hacktoberfest is open to everyone in our global community! Pull requests can be made in any GitHub-hosted repositories/projects. Sign up anytime between October 1 and October 31.

Rules

To qualify for the official limited edition Hacktoberfest T-shirt, you must register and make four pull requests (PRs) between October 1-31 (in any time zone). PRs can be made to any public repo on GitHub, not only the ones with issues labeled Hacktoberfest. If a maintainer reports your pull request as spam or behavior not in line with the project’s code of conduct, you will be ineligible to participate. This year, the first 70,000 participants who successfully complete the challenge will earn a T-shirt.

Do's and Don'ts of Hacktoberfest

Don't: open pull requests with minor text edits on other people's repositories

If you're looking for a faster way to open four PR's and win, there's a better way!

Do: Follow a repository's contribution guidelines

Almost every repo looking for help has a CONTRIBUTING.md file in it, read it first!

Don't: feel intimidated

Register for an event and learn with a group, or connect with others in the Discord chat.

girlscript-asansol's Issues

Create the custom cursor.

• you can use your creativity.

Create the About Us section

Changes are to be made in index.html, styles.html and index.js files.

About Us Section should contain:

• Image: Click here for the image link
• Title: About Us.
• Content: GirlScript Organization is a non-profit company registered under the government of India on 2nd June 2017. GirlScript aims to empower people and especially underrepresented groups in the field of technology.
  GirlScript Asansol's mission is to create opportunity, learning, growth and diversity in technology academia and industry.
• Social Media Button : link

---

• Title 2: Our Programs
• Content: Encourage people to learn to program and make them capable of writing a simple computer program to building a complex system. Empower people by providing an opportunity to showcase their technical skills.
• Card Section:
  - Career Guidance
  - Open Source
  - Workshops and Sessions

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Adding a preloader to the website

A preloader makes the first impression of the website and makes it look much better than blank screen.

Create the Past Event Section

Changes are to be made in index.html, styles.html and index.js files.

Past Event Section should contain:

• Title: Our Past Events.
• Check the linkedIn page to find the events or join discord : link of LinkedIn

---

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Revamp resource page (container for blogs #23)

• Do a figma design of the resouce page
• it will contain blogs/roadmaps
• refer to issue #23

Compose an original writeup Document/Roadmap on Introduction to Quantum Bits & Quantum Computing

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Test: Discord Webhook

Create a footer section

Changes are to be made in index.html, styles.html and index.js files.

Footer Section should contain:

• GirlScript logo
• All the hyperlinks
• All social media handles of Gs Asansol : links

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Make the Navbar Mobile responsive.

• Currently the navbar is not responsive. Make it responsive for all devices.
• You can use bootstrap or custom css.
• Also add a gap between the logo and the brandname. and in the brand name make it GirlScript Asansol in one line instead of 2 seperate lines.

Create a FAQ Section

Changes are to be made in index.html, styles.html and index.js files.

FAQ Section should contain:

• What is GS Asansol: GirlScript Asansol is a non-profit student run community registered under the GirlScript Foundation on 23rd April, 2022. We aim to empower people and especially underrepresented groups in the field of technology. GirlScript Asansol's mission is to create opportunity, learning, growth and diversity in technology academia and industry.
• How to join the community: Link to the discord
• Benifits of joining the community:
  ► GUIDE & SUPPORT
  ► HELP EVERYONE TO LEARN & GROW
  ► WORKSHOPS AND MEETING SESSIONS
  ► HACKATHONS & INTERNSHIP OPPORTUNITY

---

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Make a form for contact us section

I will make a form for contact us section

Please assign this issue to me and add the 'hacktoberfest' label to it. @girlscript-asansol

Create a preloader for the website

• You can design your own or take inspiration from the internet.

Compose an original writeup Document/Roadmap on Blockchain

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Compose an original writeup Document/Roadmap on Cryptography

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Compose an original writeup Document/Roadmap on Artificial Intelligence and Machine Learning

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Compose an original writeup Document/Roadmap on Operating System

• Write it in either Google Docs or on Ms Word
• Make sure to add flowcharts/images.
• Share the article link in PR.

Create a 404 Page

Changes are to be made in index.html, styles.html and index.js files.

404 Page should contain:

• Don't have to create the discord chat bot.
• Links:
  - Explore our site: redirect to the home page.
  - Create hylerlinks to different home page component, refer to issue #1.

---

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Addition : Issue Templates 🛠

What i am suggesting to add ?

I am suggesting to add Issue Templates to the repository, it can be as many categories as needed - primary categories of issues are mostly : bugs, docs, general feature and so on.

Why to add it ?

Adding an issue Template allows you to organize the issues made by folks in a much better way.

• We can know if someone wants to add a feature.
• We can know if someone wants to write a test or maybe fix something in the website
• Here's a general idea :

Can i work on it ?

Yes, i will be glad to help an Opensource project grow more !

Create a Contact Us form

Changes are to be made in index.html, styles.html and index.js files.

Contact Us Section should contain:

• Title: Contact Us
• Name
• Email
• Message
• Submit Button

---

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Please join the Discord to discuss design of the components.

Create a Header Section

Changes are to be made in index.html, styles.html and index.js files.

Header Section should contain:

• Image: Click here for the image link
• Title: Welcome to GirlScript Asansol. Education First.
• Join Us Button (with the discord server link)

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Note: The header section will be below the navbar. Navbar is a separate issue so no need to make a separate navbar.

Please join the Discord to discuss design of the components.

Compose an original writeup Document/Roadmap on Web Development

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Compose an original writeup Document/Roadmap on Data Structures

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Compose an original writeup Document/Roadmap on Android Development.

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Create a Navbar

Follow this Guidelines:

• Theme: [orange,black,white,beige] (Can by any of the two)
• Font: Lato

Changes are to be made in index.html and styles.html files.

Navbar should contain:

• Logo
• Home
• About Us
• Resources
• Past Events
• Our Team
• FAQ
• Contact Us

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

• Link for the inspo

Please join the Discord to discuss design of the components.

Migrate the past evemts section

Make 404 mobile responsive

• Fix the overflow in the 404 page
• Make it mobile responsive
• Increase the image size for the mobile view

Dumming Issue for testing

• subhangi practice karo

Add links to the navbar

• redirect the navbar to the proper links when clicked on it.

Faq clickability

• faq section should expand on clicking anywhere in the question
• change the colour in the dark mode.

Fix the Navbar

• The navbar in the mobile has some bugs
• The options should be at the bottom and also the logo and brand name should stick together.
  

Adding Favicons in each Pages and Sub-Pages

Hey, a site without favicon looks like unprofessional,
I can add favicon dedicated to girlscript asansol, in each pages and further coming sub-pages.

Please assign this to me

Fix the faq sec in the mobile view

• add a bit of padding outside the faq boxes.
• space it out a bit
• also fix the overflow at the y axis
  

Fix the components folders

Adding a About Us Page

We can have a page about us where contributors can add their details and name with a small image.
If this sounds good, please assign this to me.

Making Navigation Bar of Main Page

Hello, I am HacktoberFest participant, I want to work on this section,
once event gets started.

Past Event Section Changes

• Add clickable links to the cards: Links should redirect to the linkedIn post
• Add 3 cards at a time
• Image allignment
• Add a bit of border radius
• Also the card title, example Portfolio competition change the colour to match the theme.

Compose an original writeup Document/Roadmap on DBMS (brief introduction to SQL/NoSQL)

• Write it in either Google Docs or on Ms Word.
• Make sure to add flowcharts/images.
• Share the article link in PR.

Theme change button doesn't work

The Theme change button on the NavBar has no functionality

Create a universal blog post page.

Sample: A medium article container

Sample 2: Refer to the design

1. Must contain legible title, small body text, image attachment provisions
2. Must display GirlScript Asansol Social hyperlinks
3. Must credit the author and editors
4. Anonymous comment section (with options to add Display Name & Email) only the design.

Make the past event section responsive

• Currently the past event is nor responsive make it responsive in all devices
• add a shawdow to the carousel items
• add the arrow buttons of the carousel
  

Create a Custom ScrollBar.

Changes are to be made in index.html, styles.html and index.js files.

The Scrollbar should be syncing with the dark and light mode.

Please join the Discord to discuss design of the components.

Create the our team section

Changes are to be made in index.html, styles.html and index.js files.

Our Section should contain:

• Core Team: Refer to the link to get the details
• Volunteers: Refer to the link to get the details
• Make sure to add social media links of each team member (linkedIn and Github)
• Our team section is divided into two sub section thats core and volunteers.
• There will be carousel for the core team and volunteers will be displays in cards 3 in a row.

---

Design

Inspo: (You can refer to it and can make your own interpretations too, Creativity is welcomed.)

Links:

• Core Inspo
• Volunteers Inspo

Please join the Discord to discuss design of the components.

Create a webpack for deployment

Create a webpack file for the netlify bot which will ci/cd.

Preloader fixes

• Change the font-style
• Change the background colour add a pretty image

Fix blog card

• Shift the image to the center
• Give some margin at the bottom of the image
• Style the add comment box a bit.
• Change the post commet button to square.
• Change the background from grey to this

Dismissable top notification bar with mutable content

• Notif. bar must be versatile with these properties defined:
  • background color
  • smooth collapse transition
  • a notif-bar-btn class with tunable background and text: hover, on-click effects (Material UI recommended)
  • center alignment of all content other than the dismissing cross on the extreme right (appropriate margins please)

Inspo:

PS: form field not required

Add a scroll-to-top button

Title says it all.

Smooth FAQ transition

Add a Dark theme to the website.

Add a toggle button to switch between the themes.

Fix the toggle button in mobile view

• Fix the button in the middle so that it looks good.