[![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat) ![Visitors](https://api.visitorbadge.io/api/visitors?path=dev-AshishRanjan%2FIdea-Arca%20&countColor=%23263759&style=flat) ![GitHub forks](https://img.shields.io/github/forks/dev-AshishRanjan/Idea-Arca) ![GitHub Repo stars](https://img.shields.io/github/stars/dev-AshishRanjan/Idea-Arca) ![GitHub contributors](https://img.shields.io/github/contributors/dev-AshishRanjan/Idea-Arca) ![GitHub last commit](https://img.shields.io/github/last-commit/dev-AshishRanjan/Idea-Arca) ![GitHub repo size](https://img.shields.io/github/repo-size/dev-AshishRanjan/Idea-Arca) ![Github](https://img.shields.io/github/license/dev-AshishRanjan/Idea-Arca) ![GitHub issues](https://img.shields.io/github/issues/dev-AshishRanjan/Idea-Arca) ![GitHub closed issues](https://img.shields.io/github/issues-closed-raw/dev-AshishRanjan/Idea-Arca) ![GitHub pull requests](https://img.shields.io/github/issues-pr/dev-AshishRanjan/Idea-Arca) ![GitHub closed pull requests](https://img.shields.io/github/issues-pr-closed/dev-AshishRanjan/Idea-Arca)
Idea Arca (Latin: "Idea Vault") is a Project Idea Bank. Unleash your tech creativity. Discover, collaborate, and bring to life innovative project ideas in various tech fields through this inspirational repository.
Astro | scss | JSON |
---|---|---|
Youtube Vid | Youtube Vid | Youtube Vid |
After going through these videos you're qualified enough to work on our codebase
Here are some ways you can contribute to this project:
If you are new to git and github, I will suggest you first go through this :
- YT video (Recommended) : https://www.youtube.com/watch?v=RGOj5yH7evk&pp=ygUOZ2l0IGFuZCBnaXRodWI%3D
- Docs : https://hacktoberfest.com/participation/#beginner-resources
If you are new to open-source, then you can go through : https://www.youtube.com/watch?v=yzeVMecydCE
The Two major types of Contribution are explained below (Add Theme, Add Ideas) :
Here we are talking about the theme for the website.
The process to add theme is (After Fork And Clone):
we are showing an eg by adding a theme called test
.
<option>
in ./src/components/ThemeSelector.astro
:<select name="themes" id={id} class="btn">
/* other options */
<option value="neon">Neon</option>
</select>
<select name="themes" id={id} class="btn">
/* other options */
<option value="neon">Neon</option>
/* Added code 👇 */
<option value="test">Test</option>
</select>
class
code in ./src/styles/themes.scss
:Name of the class is the value given to value
attribute of your <option>
tag
Here we used :
<option value="test">Test</option>
so our class is test
.
/* Other Codes*/
.neon {
--primary-1: #793fdf;
--primary-2: #7091f5;
--primary-3: #97fff4;
--primary-4: #ffffff;
--sidenav: #793fdfce;
--gradient: #e600ff;
}
/* Other Codes*/
.neon {
/*same*/
}
/* Added code 👇 */
.test {
--primary-1: #000000;
--primary-2: #000132;
--primary-3: #000245;
--primary-4: #ffffff;
--sidenav: #0000ce;
--gradient: #f690fa;
}
--primary-1
: is used as the main background--primary-3
: is mostly used my important texts--primary-4
: is used by detailed texts--sidenav
: is reduced opacity of --primary-1
, just append ce
of your --primary-1
;--gradient
: this is a random color
which suits the website, it's the color of the gradient circle at top of the websiteYou can use https://colorhunt.co/ for the 4 Primary Colors, and choose a nice color for gradient on your own
Here we are talking about the ideas displayed on the website. The process to add ideas is (After Fork And Clone):
we are showing an example by adding an idea in React
section.
./src/database/MainData.json
inside the data
of React section :[
{
section: 'React',
data: [
{
id: 1,
title: 'E-commerce Dashboard',
tags: ['React', 'Redux', 'CSS', 'API Integration'],
description: 'Lorem Ispum',
link: 'https://example-ecommerce-dashboard.com',
},
],
},
];
[
{
section: 'React',
data: [
{
// prev code
},
/* Added code 👇 */
{
id: 2,
title: 'Test',
tags: ['React', 'Redux', 'scss', 'API'],
description: 'Give Meaningful Description, there is no word limit',
link: 'Working Link',
},
],
},
];
we are showing an example by adding an idea in a new sectio : BackboneJs
section.
./src/database/sections.json
, to make your section/field appear in left navigation panel :['React', 'Vue', 'Svelte', 'Frontend', 'Backend'];
['React', 'Vue', 'Svelte', 'Frontend', 'Backend', 'BackboneJs'];
./src/database/MainData.json
inside the data
of React section :[
{
section: 'React',
data: [
{
id: 1,
title: 'E-commerce Dashboard',
tags: ['React', 'Redux', 'CSS', 'API Integration'],
description: 'Lorem Ispum',
link: 'Working Link',
},
],
},
// Similar Codes for Other Sections
];
[
// prev Codes
{
section: 'BackboneJs',
data: [
{
id: 1,
title: 'E-commerce Dashboard',
tags: ['Backbonejs'],
description: 'Give Meaningful Description, there is no word limit',
link: 'Working Link',
},
],
},
];
section
: the major Fieldslink
: It should be a working, non-broken link. It can be a figma, hosted website link. If your idea is based on any other already existing website (can be desings or any feature), then provide that website link.id
in each sections must be unique*