Repository: FrancescoXX/4c-site Branch: main Commit: 393aa48df093 Files: 81 Total size: 152.3 KB Directory structure: gitextract_sgk63q96/ ├── .editorconfig ├── .eslintrc.js ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.yml │ │ ├── config.yml │ │ ├── documentation.yml │ │ ├── feature_request.yml │ │ └── other.yml │ ├── PULL_REQUEST_TEMPLATE/ │ │ └── pull_request_template.md │ ├── dependabot.yml │ └── workflows/ │ ├── greetings.yml │ ├── json-syntax-check.yml │ ├── lint.yml │ └── release.yml ├── .gitignore ├── .gitpod.yml ├── .husky/ │ ├── commit-msg │ └── pre-commit ├── .releaserc.js ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── docs/ │ └── theme/ │ └── README.md ├── jsconfig.json ├── next.config.mjs ├── package.json ├── postcss.config.js ├── renovate.json ├── src/ │ ├── 4c.config.js │ ├── components/ │ │ ├── ActiveMembers.js │ │ ├── BlogCard.js │ │ ├── CommunityPartners.js │ │ ├── FaqAccordian.js │ │ ├── Footer.jsx │ │ ├── Form/ │ │ │ ├── JoinUsForm.js │ │ │ └── validation/ │ │ │ └── formSchema.js │ │ ├── GetActivemembers.js │ │ ├── GetActivities.js │ │ ├── GetProjects.js │ │ ├── GetStaff.js │ │ ├── GetVideos.js │ │ ├── GoToTop.js │ │ ├── Header.js │ │ ├── JoinOurTeam.jsx │ │ ├── Layout.js │ │ ├── Loading.jsx │ │ ├── Main.js │ │ ├── ProfileCard.jsx │ │ ├── SocialLink.jsx │ │ ├── Staff.js │ │ ├── Title.js │ │ ├── Users.js │ │ ├── blog-posts.js │ │ └── faq.js │ ├── data/ │ │ ├── activemembers.js │ │ ├── blog.js │ │ ├── events.json │ │ ├── faq.json │ │ ├── homepage.js │ │ ├── navbar.js │ │ ├── partnerCommunities.json │ │ ├── projects.json │ │ ├── stacks.json │ │ ├── staff.js │ │ └── videos.json │ ├── pages/ │ │ ├── _app.js │ │ ├── _document.js │ │ ├── active-members.js │ │ ├── index.js │ │ ├── joinourteam.js │ │ ├── projects.js │ │ └── staff.js │ ├── public/ │ │ └── manifest.json │ ├── scripts/ │ │ └── img.js │ ├── styles/ │ │ └── global.css │ └── utils/ │ └── filterUsers.js └── tailwind.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # editorconfig.org root = true [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true ================================================ FILE: .eslintrc.js ================================================ /** * @type {import("eslint").Linter.Config} */ const eslintConfig = { env: { browser: true, commonjs: true, es2022: true, node: true, }, extends: [ "eslint:recommended", "plugin:eslint-comments/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jsx-a11y/strict", "next/core-web-vitals", "plugin:@typescript-eslint/recommended", "standard", "standard-with-typescript", ], overrides: [], parserOptions: { ecmaVersion: "latest", ecmaFeatures: { jsx: true, }, }, plugins: [ "const-case", "editorconfig", "filenames", "simple-import-sort", "import", "react", "jsx-a11y", "json-format", "tailwindcss", ], rules: { "comma-dangle": ["warn", "always-multiline"], "no-console": "warn", quotes: ["warn", "double"], "space-before-function-paren": ["warn", "never"], }, settings: { react: { version: "detect", }, }, } module.exports = eslintConfig ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.yml ================================================ name: Bug Report description: Create a report to help us improve title: "[Bug]: " labels: ["🚦 status: awaiting triage"] body: - type: textarea id: description attributes: label: Description description: A clear and concise description of what the bug is. placeholder: When I go to the home page, the image doesn't load and returns a 404 error code validations: required: true - type: textarea id: reproduce attributes: label: To Reproduce description: Steps to reproduce the behavior you were facing. placeholder: How can someone reproduce the behavior you were facing? value: | 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error validations: required: true - type: textarea attributes: label: Anything else? description: | Links? References? Anything that will give us more context about the issue you are encountering! Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. validations: required: false - type: checkboxes id: guidelines attributes: label: Code of Conduct options: - label: I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) required: true - type: markdown attributes: value: | ### Call to Action To Commit on this project you should use `npm run commit`. Do not use `git commit` to avoid unwanted issues. ================================================ FILE: .github/ISSUE_TEMPLATE/config.yml ================================================ # blank_issues_enabled: false # contact_links: # - name: 4C Discussions # url: https://github.com/FrancescoXX/4c-site/discussions # about: Please ask and answer questions here. # - name: Discord Community # url: https://4c.rocks/join # about: Join 4C Community, here ================================================ FILE: .github/ISSUE_TEMPLATE/documentation.yml ================================================ name: "Documentation Report" description: Suggest improvements for the docs title: '[Docs]: ' labels: ['🚦 status: awaiting triage'] body: - type: textarea id: description attributes: label: Description description: A clear and concise description of what have to be updated. placeholder: When I go to the commands.md doc, I notice that it doesn't have a table of contents validations: required: true - type: textarea attributes: label: Anything else? description: | Links? References? Anything that will give us more context about the issue you are encountering! Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. validations: required: false - type: checkboxes id: guidelines attributes: label: Code of Conduct options: - label: I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) required: true - type: markdown attributes: value: | ### Call to Action To Commit on this project you should use `npm run commit`. Do not use `git commit` to avoid unwanted issues. ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.yml ================================================ name: Feature Request description: Suggest an idea for this project title: '[Feat]: ' labels: ['🚦 status: awaiting triage'] body: - type: textarea id: description attributes: label: Description description: Is your feature request related to a problem? Please describe. placeholder: "I'm always frustrated when [...]" value: "I'm always frustrated when [...]" validations: required: true - type: textarea id: solution attributes: label: Solution description: A clear and concise description of what you want to happen. placeholder: I want a discord command `!server` to be added where we can view the server member count value: 'I want' validations: required: false - type: textarea attributes: label: Anything else? description: | Links? References? Anything that will give us more context about the issue you are encountering! Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. validations: required: false - type: checkboxes id: guidelines attributes: label: Code of Conduct options: - label: I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) required: true - type: markdown attributes: value: | ### Call to Action To Commit on this project you should use `npm run commit`. Do not use `git commit` to avoid unwanted issues. ================================================ FILE: .github/ISSUE_TEMPLATE/other.yml ================================================ name: Other description: Use this, Please DO NOT create blank issues title: '[Other]: ' labels: ['🚦 status: awaiting triage'] body: - type: textarea id: description attributes: label: Description description: A clear and concise description of what this issue is about. placeholder: If you are not using the wiki tab, please hide it validations: required: true - type: textarea attributes: label: Anything else? description: | Links? References? Anything that will give us more context about the issue you are encountering! Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in. validations: required: false - type: checkboxes id: guidelines attributes: label: Code of Conduct options: - label: I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) required: true - type: markdown attributes: value: | ### Call to Action To Commit on this project you should use `npm run commit`. Do not use `git commit` to avoid unwanted issues. ================================================ FILE: .github/PULL_REQUEST_TEMPLATE/pull_request_template.md ================================================ ## Related Issue Closes: # ### Describe the changes you've made ## How has this been tested? ## Checklist - [ ] I have performed a self-review of my own code. - [ ] I have commented on my code, particularly wherever it was hard to understand. - [ ] I have made corresponding changes to the documentation. - [ ] I have followed the code style of the project - [ ] I have tested my code, and it works without errors ## Additional Information ## Code of Conduct - [ ] I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md)## Related Issue Closes: # ### Describe the changes you've made ## How has this been tested? ## Checklist - [ ] I have performed a self-review of my own code. - [ ] I have commented on my code, particularly wherever it was hard to understand. - [ ] I have made corresponding changes to the documentation. - [ ] I have followed the code style of the project - [ ] I have tested my code, and it works without errors ## Additional Information ## Code of Conduct - [ ] I agree to follow this project's [Code of Conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) **Please keep up with the [Discord Conversation](https://discord.gg/4c) for more information.** ================================================ FILE: .github/dependabot.yml ================================================ version: 2 updates: # Update GitHub Actions - package-ecosystem: "github-actions" directory: "/" schedule: interval: "daily" ================================================ FILE: .github/workflows/greetings.yml ================================================ name: Greetings on: [pull_request_target, issues] jobs: greeting: runs-on: ubuntu-latest permissions: issues: write pull-requests: write steps: - uses: actions/first-interaction@v1 with: repo-token: ${{ secrets.GITHUB_TOKEN }} issue-message: "Congratulations, ${{ github.actor }}! 🎉 Thank you for creating your first issue in 4C. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!" pr-message: "Great job, ${{ github.actor }}! 🎉 Thank you for submitting your first pull request to 4C. Your contribution is valuable and we appreciate your efforts to improve our project. We'll review your changes and provide feedback as soon as possible. Keep up the great work!" ================================================ FILE: .github/workflows/json-syntax-check.yml ================================================ name: JSON Syntax Check on: push: paths: - "**.json" pull_request: jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: json-syntax-check uses: limitusus/json-syntax-check@v2 with: pattern: "\\.json$" ================================================ FILE: .github/workflows/lint.yml ================================================ name: Lint on: - push - pull_request jobs: lint: name: Lint Before Release runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install dependencies run: yarn install --frozen-lockfile - name: Lint run: yarn lint ================================================ FILE: .github/workflows/release.yml ================================================ name: Release on: push: branches: - main jobs: lint: name: Lint Before Release if: github.repository_owner == 'FrancescoXX' runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install dependencies run: yarn install --frozen-lockfile - name: Lint run: yarn lint build: name: Try to Build Before Release if: github.repository_owner == 'FrancescoXX' runs-on: ubuntu-latest needs: lint steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install dependencies run: yarn install --frozen-lockfile - name: Build run: yarn build release: name: Create GitHub Release if: github.repository_owner == 'FrancescoXX' runs-on: ubuntu-latest needs: build steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v4 with: node-version: 18.x - name: Install dependencies run: yarn install --frozen-lockfile - name: Release package run: yarn release env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} ================================================ FILE: .gitignore ================================================ package-lock.json # Created by https://www.toptal.com/developers/gitignore/api/git,node,react,nextjs,vercel,dotenv,yarn,fish,linux,zsh,windows,osx,macos,emacs,vim,visualstudiocode,sublimetext,notepadpp,ssh,tower,storybookjs,now,replit # Edit at https://www.toptal.com/developers/gitignore?templates=git,node,react,nextjs,vercel,dotenv,yarn,fish,linux,zsh,windows,osx,macos,emacs,vim,visualstudiocode,sublimetext,notepadpp,ssh,tower,storybookjs,now,replit ### dotenv ### .env ### Emacs ### # -*- mode: gitignore; -*- *~ \#*\# /.emacs.desktop /.emacs.desktop.lock *.elc auto-save-list tramp .\#* # Org-mode .org-id-locations *_archive # flymake-mode *_flymake.* # eshell files /eshell/history /eshell/lastdir # elpa packages /elpa/ # reftex files *.rel # AUCTeX auto folder /auto/ # cask packages .cask/ dist/ # Flycheck flycheck_*.el # server auth directory /server/ # projectiles files .projectile # directory configuration .dir-locals.el # network security /network-security.data ### Fish ### fishd.* fish_history fish_variables config.local.fish ### Git ### # Created by git for backups. To disable backups in Git: # $ git config --global mergetool.keepBackup false *.orig # Created by git when using merge tools for conflicts *.BACKUP.* *.BASE.* *.LOCAL.* *.REMOTE.* *_BACKUP_*.txt *_BASE_*.txt *_LOCAL_*.txt *_REMOTE_*.txt ### Linux ### # temporary files which can be created if a process still has a handle open of a deleted file .fuse_hidden* # KDE directory preferences .directory # Linux trash folder which might appear on any partition or disk .Trash-* # .nfs files are created when an open file is removed but is still being accessed .nfs* ### macOS ### # General .DS_Store .AppleDouble .LSOverride # Icon must end with two \r Icon # Thumbnails ._* # Files that might appear in the root of a volume .DocumentRevisions-V100 .fseventsd .Spotlight-V100 .TemporaryItems .Trashes .VolumeIcon.icns .com.apple.timemachine.donotpresent # Directories potentially created on remote AFP share .AppleDB .AppleDesktop Network Trash Folder Temporary Items .apdisk ### macOS Patch ### # iCloud generated files *.icloud ### NextJS ### # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # local env files .env*.local # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts ### Node ### # Logs logs *.log lerna-debug.log* # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage *.lcov # nyc test coverage .nyc_output # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # Snowpack dependency directory (https://snowpack.dev/) web_modules/ # TypeScript cache # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional stylelint cache .stylelintcache # Microbundle cache .rpt2_cache/ .rts2_cache_cjs/ .rts2_cache_es/ .rts2_cache_umd/ # Optional REPL history .node_repl_history # Output of "npm pack" *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variable files .env.development.local .env.test.local .env.production.local .env.local # parcel-bundler cache (https://parceljs.org/) .cache .parcel-cache # Next.js build output .next out # Nuxt.js build / generate output .nuxt dist # Gatsby files .cache/ # Comment in the public line in if your project uses Gatsby and not Next.js # https://nextjs.org/blog/next-9-1#public-directory-support # public # vuepress build output .vuepress/dist # vuepress v2.x temp and cache directory .temp # Docusaurus cache and generated files .docusaurus # Serverless directories .serverless/ # FuseBox cache .fusebox/ # DynamoDB Local files .dynamodb/ # TernJS port file .tern-port # Stores VSCode versions used for testing VSCode extensions .vscode-test # yarn v2 .yarn/cache .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz .pnp.* ### Node Patch ### # Serverless Webpack directories .webpack/ # Optional stylelint cache # SvelteKit build / generate output .svelte-kit ### NotepadPP ### # Notepad++ backups # *.bak ### now ### .now ### OSX ### # General # Icon must end with two \r # Thumbnails # Files that might appear in the root of a volume # Directories potentially created on remote AFP share ### react ### .DS_* **/*.backup.* **/*.back.* node_modules *.sublime* psd thumb sketch ### replit ### # Replit config file .replit # Replit Nix config file replit.nix ### SSH ### **/.ssh/id_* **/.ssh/*_id_* **/.ssh/known_hosts ### StorybookJs ### # gitignore template for the Storybook, UI guide for front apps # website: https://storybook.js.org/ storybook-static/ ### SublimeText ### # Cache files for Sublime Text *.tmlanguage.cache *.tmPreferences.cache *.stTheme.cache # Workspace files are user-specific *.sublime-workspace # Project files should be checked into the repository, unless a significant # proportion of contributors will probably not be using Sublime Text # *.sublime-project # SFTP configuration file sftp-config.json sftp-config-alt*.json # Package control specific files Package Control.last-run Package Control.ca-list Package Control.ca-bundle Package Control.system-ca-bundle Package Control.cache/ Package Control.ca-certs/ Package Control.merged-ca-bundle Package Control.user-ca-bundle oscrypto-ca-bundle.crt bh_unicode_properties.cache # Sublime-github package stores a github token in this file # https://packagecontrol.io/packages/sublime-github GitHub.sublime-settings ### Tower ### # Tower.app - http://www.git-tower.com/ Icon.png ### Vercel ### ### Vim ### # Swap [._]*.s[a-v][a-z] !*.svg # comment out if you don"t need vector files [._]*.sw[a-p] [._]s[a-rt-v][a-z] [._]ss[a-gi-z] [._]sw[a-p] # Session Session.vim Sessionx.vim # Temporary .netrwhist # Auto-generated tag files tags # Persistent undo [._]*.un~ ### VisualStudioCode ### .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json !.vscode/*.code-snippets # Local History for Visual Studio Code .history/ # Built Visual Studio Code Extensions *.vsix ### VisualStudioCode Patch ### # Ignore all local history of files .history .ionide ### Windows ### # Windows thumbnail cache files Thumbs.db Thumbs.db:encryptable ehthumbs.db ehthumbs_vista.db # Dump file *.stackdump # Folder config file [Dd]esktop.ini # Recycle Bin used on file shares $RECYCLE.BIN/ # Windows Installer files *.cab *.msi *.msix *.msm *.msp # Windows shortcuts *.lnk ### yarn ### # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored .yarn/* !.yarn/releases !.yarn/patches !.yarn/plugins !.yarn/sdks !.yarn/versions # if you are NOT using Zero-installs, then: # comment the following lines !.yarn/cache # and uncomment the following lines # .pnp.* ### Zsh ### # Zsh compiled script + zrecompile backup *.zwc *.zwc.old # Zsh completion-optimization dumpfile *zcompdump* # Zsh zcalc history .zcalc_history # A popular plugin manager"s files ._zinit .zinit_lstupd # zdharma/zshelldoc tool"s files zsdoc/data # robbyrussell/oh-my-zsh/plugins/per-directory-history plugin"s files # (when set-up to store the history in the local directory) .directory_history # MichaelAquilina/zsh-autoswitch-virtualenv plugin"s files # (for Zsh plugins using Python) .venv # Zunit tests" output /tests/_output/* !/tests/_output/.gitkeep # End of https://www.toptal.com/developers/gitignore/api/git,node,react,nextjs,vercel,dotenv,yarn,fish,linux,zsh,windows,osx,macos,emacs,vim,visualstudiocode,sublimetext,notepadpp,ssh,tower,storybookjs,now,replit ================================================ FILE: .gitpod.yml ================================================ # List the start up tasks. Learn more https://www.gitpod.io/docs/config-start-tasks/ tasks: - name: Development Server init: yarn install command: yarn dev # List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/ ports: - port: 3000 onOpen: open-browser github: prebuilds: master: true branches: true pullRequests: true pullRequestsFromForks: true addCheck: true addComment: false addBadge: true ================================================ FILE: .husky/commit-msg ================================================ #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx --no -- commitlint --edit "$1" ================================================ FILE: .husky/pre-commit ================================================ #!/usr/bin/env sh . "$(dirname "$0")/_/husky.sh" npm run lint:fix ================================================ FILE: .releaserc.js ================================================ module.exports = { branches: [{ name: "main" }], plugins: [ [ "@semantic-release/commit-analyzer", { preset: "angular", }, ], "@semantic-release/release-notes-generator", "@semantic-release/changelog", [ "@semantic-release/git", { assets: ["CHANGELOG.md", "package.json", "yarn.lock"], message: "chore(release): 🤖 ${nextRelease.version} [skip ci]", }, ], [ "@semantic-release/github", { assets: ["CHANGELOG.md"], }, ], ], preset: "angular", ci: true, debug: true, }; ================================================ FILE: .vscode/extensions.json ================================================ { "recommendations": ["evolution-gaming.evolution-gaming--vscode-eslint"] } ================================================ FILE: .vscode/settings.json ================================================ { "eslint.enable": true, "editor.formatOnSave": false, "eslint.validate": [ "javascript", "javascriptreact", "json" ], "githubPullRequests.ignoredPullRequestBranches": [ "main" ] } ================================================ FILE: CHANGELOG.md ================================================ # [0.22.0](https://github.com/FrancescoXX/4c-site/compare/v0.21.4...v0.22.0) (2024-10-22) ### Features * add detailed readme ([b00381a](https://github.com/FrancescoXX/4c-site/commit/b00381a96bc728d69e5e2e0923c2e4552b10b9e2)) ## [0.21.4](https://github.com/FrancescoXX/4c-site/compare/v0.21.3...v0.21.4) (2023-11-18) ### Bug Fixes * image in activitie ([2d11869](https://github.com/FrancescoXX/4c-site/commit/2d11869601019af5f255a43694192dfa2713d74f)) ## [0.21.3](https://github.com/FrancescoXX/4c-site/compare/v0.21.2...v0.21.3) (2023-11-18) ### Bug Fixes * checkout to new branch ([4d87342](https://github.com/FrancescoXX/4c-site/commit/4d87342175259e2b7baa3a3b8e9eeb92d2aba189)) ## [0.21.2](https://github.com/FrancescoXX/4c-site/compare/v0.21.1...v0.21.2) (2023-11-05) ### Bug Fixes * next image issue ([09d79b6](https://github.com/FrancescoXX/4c-site/commit/09d79b62af95ffa43556956bb338a137f3f0080a)) * next image issue ([39a5660](https://github.com/FrancescoXX/4c-site/commit/39a56609bb6cca3a12e7efb17363399091350234)) * next image issue ([f7294e8](https://github.com/FrancescoXX/4c-site/commit/f7294e8415150d68cbcaacdcdb0abd9ade783de7)) ## [0.21.1](https://github.com/FrancescoXX/4c-site/compare/v0.21.0...v0.21.1) (2023-10-24) ### Bug Fixes * lint issue ([6bceaaf](https://github.com/FrancescoXX/4c-site/commit/6bceaaf0e3cdeb6174d00b51be59f2a18f7b99fc)) # [0.21.0](https://github.com/FrancescoXX/4c-site/compare/v0.20.1...v0.21.0) (2023-10-24) ### Features * **plugin:** commitizen-support-782 ([8c6af10](https://github.com/FrancescoXX/4c-site/commit/8c6af1067383c79cc95d51d9102a30377bbaa7ff)) ## [0.20.1](https://github.com/FrancescoXX/4c-site/compare/v0.20.0...v0.20.1) (2023-10-15) ### Bug Fixes * **ActiveMembers.js and Staff.js:** added feedback message if search input does not find a match ([9373549](https://github.com/FrancescoXX/4c-site/commit/937354979799de0605c3390f62c1973e4b47dc51)) # [0.20.0](https://github.com/FrancescoXX/4c-site/compare/v0.19.2...v0.20.0) (2023-10-15) ### Features * Filter staff by name and description ([48bbafa](https://github.com/FrancescoXX/4c-site/commit/48bbafa88e285d0f20f9770b7142e669e009ebf8)) ## [0.19.2](https://github.com/FrancescoXX/4c-site/compare/v0.19.1...v0.19.2) (2023-05-28) ### Bug Fixes * improve user experience ([cb7b237](https://github.com/FrancescoXX/4c-site/commit/cb7b237f952d0a789024a6068ad5e3e1a0bc5fac)) * user interface ([45a6a52](https://github.com/FrancescoXX/4c-site/commit/45a6a52620b152f0c036f8c616b2bcdfc5a1deea)) ## [0.19.1](https://github.com/FrancescoXX/4c-site/compare/v0.19.0...v0.19.1) (2023-05-15) ### Bug Fixes * og image url ([f7e1afa](https://github.com/FrancescoXX/4c-site/commit/f7e1afa7c9cf693c3415d9fa8b7e674b43488be6)) * remove trailing space ([a7d102d](https://github.com/FrancescoXX/4c-site/commit/a7d102d9b495c66df813ec4b886c7c1cb05855be)) # [0.19.0](https://github.com/FrancescoXX/4c-site/compare/v0.18.9...v0.19.0) (2023-04-26) ### Features * testing ([7d16d27](https://github.com/FrancescoXX/4c-site/commit/7d16d27b8c82e1cd1a17ac065fd3a2646aa0a38f)) * testing ([8d64761](https://github.com/FrancescoXX/4c-site/commit/8d64761e7abb354f1d788f83d3fedcd2ce6a545f)) ## [0.18.9](https://github.com/FrancescoXX/4c-site/compare/v0.18.8...v0.18.9) (2023-04-11) ### Bug Fixes * centered the menu-item! ([baea93d](https://github.com/FrancescoXX/4c-site/commit/baea93d1f3ae40eb342efbaaea053a5ccd53bfdd)) ## [0.18.8](https://github.com/FrancescoXX/4c-site/compare/v0.18.7...v0.18.8) (2023-04-08) ### Bug Fixes * activities section a bit far from previous section ([cb9dbf2](https://github.com/FrancescoXX/4c-site/commit/cb9dbf25d9644370f1018663e0e1330440af22be)) ## [0.18.7](https://github.com/FrancescoXX/4c-site/compare/v0.18.6...v0.18.7) (2023-03-31) ### Bug Fixes * added to the card title ([4b9b06b](https://github.com/FrancescoXX/4c-site/commit/4b9b06b31bdb47b2942694bf164ecb1c5b9c2642)) * blog card size(height to full) ([fc04ac4](https://github.com/FrancescoXX/4c-site/commit/fc04ac46e6b44566e6473f257473bfcc1642af85)) * image replaced ([3a2c0b5](https://github.com/FrancescoXX/4c-site/commit/3a2c0b5c4cd5af203130fdd045f4dd6c11cf256b)) * image replaced & blog card problem fixed ([84d4761](https://github.com/FrancescoXX/4c-site/commit/84d476155625cd12b5d7e813248334c72dd12aba)) ## [0.18.6](https://github.com/FrancescoXX/4c-site/compare/v0.18.5...v0.18.6) (2023-03-28) ### Bug Fixes * **project-link-centered:** centered links in the project card ([4b339ca](https://github.com/FrancescoXX/4c-site/commit/4b339caf6fda586836d2955fcd2a0f92cc4d3ef4)) ## [0.18.5](https://github.com/FrancescoXX/4c-site/compare/v0.18.4...v0.18.5) (2023-03-26) ### Bug Fixes * **comments:** removed commented code ([f77cb5c](https://github.com/FrancescoXX/4c-site/commit/f77cb5c893c56cca170fca09d3fb71b513392fc9)) * **search-tab:** improved user experience and icon-positioning issue in search-tab of projects page ([83f1d1f](https://github.com/FrancescoXX/4c-site/commit/83f1d1f90c33537e54f3d45d57f2b21e6f6d767b)) ## [0.18.4](https://github.com/FrancescoXX/4c-site/compare/v0.18.3...v0.18.4) (2023-03-20) ### Bug Fixes * search icon added in projects search bar ([608c163](https://github.com/FrancescoXX/4c-site/commit/608c163e6cadc0fdb09fbcc0a60dd165b3423317)) ## [0.18.3](https://github.com/FrancescoXX/4c-site/compare/v0.18.2...v0.18.3) (2023-03-12) ### Bug Fixes * **search-tab:** Improved search-tab of the projects page ([13a0c15](https://github.com/FrancescoXX/4c-site/commit/13a0c1508ee98ba85030e99c3846bb477a28a103)) ## [0.18.2](https://github.com/FrancescoXX/4c-site/compare/v0.18.1...v0.18.2) (2023-03-08) ### Bug Fixes * **Back To Top Button:** Solves back to top button overlapping footer icons in mobile-devices ([33a8198](https://github.com/FrancescoXX/4c-site/commit/33a8198bee66f6697c7e9ba912568cce1e4c6f8a)) ## [0.18.1](https://github.com/FrancescoXX/4c-site/compare/v0.18.0...v0.18.1) (2023-03-08) ### Bug Fixes * **incorrect link:** fix incorrect link ([c8b9a29](https://github.com/FrancescoXX/4c-site/commit/c8b9a292e81eae4d1909973d351b7d1510d6e20d)) # [0.18.0](https://github.com/FrancescoXX/4c-site/compare/v0.17.0...v0.18.0) (2023-03-04) ### Features * change px to rem in global css ([d73b797](https://github.com/FrancescoXX/4c-site/commit/d73b7975d34a984a8b27f90a6511e385aa26d294)) * mobile font size reduced for home page ([d3fd2fc](https://github.com/FrancescoXX/4c-site/commit/d3fd2fcb88d106f0a8a2e4baa3a3d01cc547d99e)) * mobile font size reduced for home page ([34b4cbe](https://github.com/FrancescoXX/4c-site/commit/34b4cbea68eda254cce83aae7423397192cb0afa)) * nav bar background color ([b06ec05](https://github.com/FrancescoXX/4c-site/commit/b06ec05e4cadd76f0e3ed8f8d3b927b02ab54ee4)) # [0.17.0](https://github.com/FrancescoXX/4c-site/compare/v0.16.0...v0.17.0) (2023-03-04) ### Features * add LBD profile to active members page ([b47f445](https://github.com/FrancescoXX/4c-site/commit/b47f4459e2124ba5c42e29e10ab9e4281ba643bd)) # [0.16.0](https://github.com/FrancescoXX/4c-site/compare/v0.15.3...v0.16.0) (2023-03-04) ### Features * remove unnecessary pages ([aceb834](https://github.com/FrancescoXX/4c-site/commit/aceb834dfe8f09f506f424d15bd3e67574eaea70)) ## [0.15.3](https://github.com/FrancescoXX/4c-site/compare/v0.15.2...v0.15.3) (2023-02-16) ### Bug Fixes * fixed linting issues ([ee84210](https://github.com/FrancescoXX/4c-site/commit/ee84210fc9b75c6fa944768ca720eb340f05cd41)) ## [0.15.2](https://github.com/FrancescoXX/4c-site/compare/v0.15.1...v0.15.2) (2023-02-12) ### Bug Fixes * **data/activemembers.js:** fix social links for singh-vaibhav08 ([899568e](https://github.com/FrancescoXX/4c-site/commit/899568e3fd870be56f42de3640a696a68504cff1)), closes [sin#vaibhav08](https://github.com/sin/issues/vaibhav08) ## [0.15.1](https://github.com/FrancescoXX/4c-site/compare/v0.15.0...v0.15.1) (2023-02-12) ### Bug Fixes * **ui:** enhanace search bar UI ([75baf95](https://github.com/FrancescoXX/4c-site/commit/75baf95a43dd85eeefb4159921aa674662d2769b)) # [0.15.0](https://github.com/FrancescoXX/4c-site/compare/v0.14.6...v0.15.0) (2023-02-10) ### Features * add background for navbar ([abd132c](https://github.com/FrancescoXX/4c-site/commit/abd132c8d66b3204d308802078b99abe7f629f9c)) ## [0.14.6](https://github.com/FrancescoXX/4c-site/compare/v0.14.5...v0.14.6) (2023-02-07) ### Bug Fixes * **scrollable sidebar:** fix scrollable sidebar ([59cd24a](https://github.com/FrancescoXX/4c-site/commit/59cd24a320124b3d65c1722d14a4945f9d70c82f)) * **sidebar:** fix scrollable sidebar ([c9adf70](https://github.com/FrancescoXX/4c-site/commit/c9adf70b552eb6ad3de24d7281b7372b82fc99df)) ## [0.14.5](https://github.com/FrancescoXX/4c-site/compare/v0.14.4...v0.14.5) (2023-02-05) ### Bug Fixes * **bug:** fixed faq accordion answer not taking entire width ([a952dde](https://github.com/FrancescoXX/4c-site/commit/a952dde93138625cff7847e28fdd44588fb6bbfa)) ## [0.14.4](https://github.com/FrancescoXX/4c-site/compare/v0.14.3...v0.14.4) (2023-01-28) ### Bug Fixes * **homepage:** mobile responsiveness ([5652922](https://github.com/FrancescoXX/4c-site/commit/56529226283f011642c7f4f9c699e5a8d9a796be)) * **homepage:** remove deprecated frame ([752cb38](https://github.com/FrancescoXX/4c-site/commit/752cb38f687112810ab970208327171aa28d1190)) ## [0.14.3](https://github.com/FrancescoXX/4c-site/compare/v0.14.2...v0.14.3) (2023-01-27) ### Bug Fixes * **cards:** fixes for activity, blog card ([d69a4f4](https://github.com/FrancescoXX/4c-site/commit/d69a4f4a50ef6c0c41ea243bcdee075db67605ea)) * **cards:** removing extra code ([60dc4c4](https://github.com/FrancescoXX/4c-site/commit/60dc4c41e2a6dd56b346eaaccf3eb7c0d552f11d)) ## [0.14.2](https://github.com/FrancescoXX/4c-site/compare/v0.14.1...v0.14.2) (2023-01-25) ### Bug Fixes * **activemembers.js:** fix ([3dedc9d](https://github.com/FrancescoXX/4c-site/commit/3dedc9d29a5dd04da09fe39be41e94a261093ada)) ## [0.14.1](https://github.com/FrancescoXX/4c-site/compare/v0.14.0...v0.14.1) (2023-01-24) ### Bug Fixes * adding favicon ([d341718](https://github.com/FrancescoXX/4c-site/commit/d34171892c730dd471498fbc972ba8b001675270)) # [0.14.0](https://github.com/FrancescoXX/4c-site/compare/v0.13.6...v0.14.0) (2023-01-24) ### Features * made navbar good ([7217471](https://github.com/FrancescoXX/4c-site/commit/7217471a9544083feb1dff2c369ac6653fae2cf7)) ## [0.13.6](https://github.com/FrancescoXX/4c-site/compare/v0.13.5...v0.13.6) (2023-01-20) ### Bug Fixes * fix lint error ([08331f0](https://github.com/FrancescoXX/4c-site/commit/08331f0adf623c54e4accea8b482cd940b8ead94)) * lint ([f523c99](https://github.com/FrancescoXX/4c-site/commit/f523c9971410381127c8e3a6e671d171cf52756a)) * lint error ([0b2019f](https://github.com/FrancescoXX/4c-site/commit/0b2019fab89422fb1e968a62ca1dd54b745b643b)) ## [0.13.5](https://github.com/FrancescoXX/4c-site/compare/v0.13.4...v0.13.5) (2023-01-18) ### Bug Fixes * activities card width fixed for md lg xl device ([505a607](https://github.com/FrancescoXX/4c-site/commit/505a6078840804df630191c054252f353aed06cf)) ## [0.13.4](https://github.com/FrancescoXX/4c-site/compare/v0.13.3...v0.13.4) (2023-01-17) ### Bug Fixes * activities card design improvd and card broke fixed" ([12c1ce7](https://github.com/FrancescoXX/4c-site/commit/12c1ce72287be676322feaf83c1311addf67383b)) ## [0.13.3](https://github.com/FrancescoXX/4c-site/compare/v0.13.2...v0.13.3) (2023-01-14) ### Bug Fixes * **readme:** fix readme ([d3954ef](https://github.com/FrancescoXX/4c-site/commit/d3954ef11059d598069bb14af6e360c0de606ad6)) ## [0.13.2](https://github.com/FrancescoXX/4c-site/compare/v0.13.1...v0.13.2) (2023-01-14) ### Bug Fixes * **readme:** fix readme ([57ce88d](https://github.com/FrancescoXX/4c-site/commit/57ce88d446443eff2bc7ab4c1962ca75c277f384)) * **readme:** fix readme ([5895762](https://github.com/FrancescoXX/4c-site/commit/5895762c735b5915b218d41d53ce0407097c2b88)) ## [0.13.1](https://github.com/FrancescoXX/4c-site/compare/v0.13.0...v0.13.1) (2023-01-09) ### Bug Fixes * **fix responsivenes:** responsivenes and image width changed for a better look ([b50c5a5](https://github.com/FrancescoXX/4c-site/commit/b50c5a56acd453a0bbf052a143a4409e33d9128a)) * **video page:** fixed videos page responsivenes by addjusting and adding tailwind classes ([4bc85ef](https://github.com/FrancescoXX/4c-site/commit/4bc85ef962e968e63a86dc0f99ca5f3212d058d2)), closes [#578](https://github.com/FrancescoXX/4c-site/issues/578) # [0.13.0](https://github.com/FrancescoXX/4c-site/compare/v0.12.0...v0.13.0) (2023-01-08) ### Features * remove tobiloba's event ([147114e](https://github.com/FrancescoXX/4c-site/commit/147114eae048f249bbe0d436f1282ea21303e57e)) # [0.12.0](https://github.com/FrancescoXX/4c-site/compare/v0.11.0...v0.12.0) (2023-01-08) ### Features * super performance 4c (nuke) ([75e617f](https://github.com/FrancescoXX/4c-site/commit/75e617f077db1c0b33f50291cf1f2cd7e6e68456)) # [0.11.0](https://github.com/FrancescoXX/4c-site/compare/v0.10.0...v0.11.0) (2023-01-05) ### Features * github magic (1/2) ([480c1fa](https://github.com/FrancescoXX/4c-site/commit/480c1fa1cfacab19cf83705a7fbd1bce8e1ab673)) * gitthub magic (2/2) ([9f106c2](https://github.com/FrancescoXX/4c-site/commit/9f106c2be67612afdcdf639ef7e49ff0a7ce8cef)) ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: * Demonstrating empathy and kindness toward other people * Being respectful of differing opinions, viewpoints, and experiences * Giving and gracefully accepting constructive feedback * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience * Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: * The use of sexualized language or imagery, and sexual attention or advances of any kind * Trolling, insulting or derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or email address, without their explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement in the [Discord community](https://4c.rocks/join). All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: ### 1. Correction **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. ### 2. Warning **Community Impact**: A violation through a single incident or series of actions. **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. ### 3. Temporary Ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder][Mozilla CoC]. For answers to common questions about this code of conduct, see the FAQ at [https://www.contributor-covenant.org/faq][FAQ]. Translations are available at [https://www.contributor-covenant.org/translations][translations]. [homepage]: https://www.contributor-covenant.org [v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html [Mozilla CoC]: https://github.com/mozilla/diversity [FAQ]: https://www.contributor-covenant.org/faq [translations]: https://www.contributor-covenant.org/translations ================================================ FILE: CONTRIBUTING.md ================================================ # ✨ Contributing to this project First of all, thanks for taking the time to contribute! 🎉👍 ## 💣 Reporting Bugs This section guides you through submitting a bug report. Following these guidelines helps maintainers and the community understand your report 📝, reproduce the behavior 💻, and find related reports. 🔎 Since the new GitHub Issue forms, we only suggest you include the most information possible. But you can also **Perform a [cursory search](https://github.com/FrancescoXX/4c-site/issues)** to see if the report/request has already been raised. If it has, adds a comment to the existing issue instead of opening a new one. > **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one. ### How Do I Submit A (Good) Bug Report? Explain the problem and include additional details to help maintainers reproduce the problem: - **Use a clear and descriptive title** for the issue to identify the problem. - **Describe the exact steps which reproduce the problem** in as many details as possible. - **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. - **Explain which behavior you expected to see instead and why.** - **Include screenshots or animated GIFs** which show you following the described steps and clearly demonstrate the problem. If you use the keyboard while following the steps, use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://gitlab.gnome.org/Archive/byzanz) on Linux. ## 🛠 Suggesting Enhancements Feature requests are tracked as [GitHub issues](https://guides.github.com/features/issues/). Create an issue on that repository and provide the following information: - **Use a clear and descriptive title** for the issue to identify the suggestion. - **Provide a in detail description of the suggested enhancement** in as many details as possible. - **Explain why this enhancement would be useful** to the website and the community. ## 📝 Cloning the project & creating PR ### Fork the repository. Click on the fork button on the top of the page. This will create a copy of this repository in your account. Instead click [here](https://github.com/FrancescoXX/4c-site/fork) to fork the repository. ### Clone the forked repository. ```bash git clone https://github.com//4c-site.git ``` or if use the github cli ```bash gh repo clone /4c-site ``` ### Navigate to the project directory. ```bash cd 4c-site ``` ### Create a new branch (naming convention: type-description-issueNo) Kindly give your branch a more descriptive name like `docs-contributing-guide-2` instead of `patch-1`. You could follow this convention. Some ideas to get you started: - Feature Updates: `feat--` - Bug Fixes: `fix--` - Documentation: `docs--` - And so on... To create a new branch, use the following command: ```bash git checkout -b your-branch-name ``` ### Make the necessary changes. ### Stage your changes and commit. ```bash git add . # Stages all the changes git commit -m "" ``` Your commit message should be something which gives concise idea of the issue you are solving. We implement the Conventional Commits specification for commit messages. This specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages. The commit message should be structured as follows: ```bash (optional scope): ``` If you are not sure about how to structure your commit message, you can use the following command: ```bash npm run commit ``` ### Push your local commits to the remote repository. ```bash git push origin your-branch-name ``` **8.** Create a new [pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) from `your-branch-name` 🎉 Congratulations! You've made your first pull request! Now, you should just wait until the maintainers review your pull request. ## ✨ Understanding the project The project is divided into two main folders: - `src` - This folder contains all the code related to the website. - `docs` - This folder contains everything related to the 4C community ### `src` folder The `src` folder contains all the code related to the website. The website is built using [Next.js](https://nextjs.org/), a React framework. The website is hosted on [Vercel](https://vercel.com/). The source code is divided into two main folders: - `pages` - This folder contains all the pages of the website. - `components` - This folder contains all the components of the website. I suggest you to read the [Next.js documentation](https://nextjs.org/docs) to understand the project structure. To run the website locally, you need to install the dependencies and run the development server: ```bash npm i -g yarn # Install yarn yarn # Install dependencies yarn dev # Run the development server ``` ### `docs` folder This folder contains markdown files describing the design of the main website and some detail about the 4C community ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2021 - Present, Francesco Ciulla Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # 4C (The Cool Community of Content Creators) Imagine **The Cool Community For Content Creators** or **4C**, as a chill coffee shop (cooler even 💣). An inclusive and helpful environment, where we help content creators reach their goals by sharing experiences. Gain access to exclusive talks/workshops with popular content creators, and hence, opportunities to collaborate. We have games too! 🎮 ## 👋 Join Us : Join our amazing community on Discord and Twitter. Discord CommunityTwitter Account
4C logo ## 📷 Website overview This repository concerns the 4C community [website](https://www.4c.rocks/). Visit the website to stay up to date with community members' projects, active members, and other amazing content! ## 🎉 Want to contribute? Whether you are a community member or not, we would love your point of view! Feel free to first check out our [code of conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) and also the [contribution guidelines](https://github.com/FrancescoXX/4c-site/blob/main/CONTRIBUTING.md) for any missing steps. ### 💻 For Contributors #### 🔖 Tech Stack The code base of this repo uses - [NextJS](https://nextjs.org/) - [TailwindCSS](https://tailwindcss.com/) For contributing to the code, you will need - [Node](https://nodejs.org/en/) installed on your computer. - Basic knowledge of [Git](https://git-scm.com/) #### 🔖 Contribution steps You can directly work on this project on Gitpod! [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/FrancescoXX/4c-site) Or, to work on it locally, 1. [Fork](https://github.com/FrancescoXX/4c-site) this repository 2. Clone the repo ```console $ git clone git@github.com:/4c-site.git ``` 3. Navigate to the cloned directory ```console $ cd 4c-site ``` 4. Install dependencies ```console $ npm install ``` 5. Start the project on `localhost` ```console $ npm run dev ``` ##### Troubleshooting In the course of trying to set up the project locally, if you come across an error that says `PWA is not supported`, you can try the following steps below to fix it; > For Linux or Mac 👇 1. Go to 4c-site folder using `cd 4c-site` 2. In the terminal, ```console $ export NODE_OPTIONS=--openssl-legacy-provider ``` 3. If you get an error in the above code then use the option below ```console $ unset NODE_OPTIONS="" ``` 4. Start the development server with ```console $ npm run dev ``` > For Windows 👇 1. Go to 4c-site folder using `cd 4c-site` 2. In the terminal, ```console $ set NODE_OPTIONS=--openssl-legacy-provider ``` 3. Start the development server with ```console $ npm run dev ``` In order to run this project locally, you might require some additional configurations, such as downgrading your `node` version to v16. You may get an error similar to this: ![node version mismatch](https://media.discordapp.net/attachments/881808811344683028/1051093955518935060/image.png) To fix this, downgrade your `node` version to v16. Here is a simple way of doing that with the [`nvm` node version manager](https://github.com/nvm-sh/nvm): 1. Download and install `nvm`. Use [nvm-setup.exe](https://github.com/coreybutler/nvm-windows/releases) for windows, or [install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh) on other systems. 2. Install version v16 ```console $ nvm install 16.16.0 ``` 3. Make your system use version 16 of node ```console $ nvm use 16.16.0 ``` To check if everything has worked, restart your shell and run `node -v`. The output should be `v16.16.0`. If it is, you can continue working on the project! #### Run commit ```console $ git commit -m ``` #### 🔖 Adding a project to the project page > Note: _The project page is reserved to display projects for community members only. Each member can put up only one project._ To add your project to the project page, head over to the [`/data`](https://github.com/FrancescoXX/4c-site/tree/main/src/data) directory, and subsequently, the `projects.json` file. There, you will find objects for each project. For example, ```json { "name": "Francesco Ciulla", "title": "FREE Web3 Resources", "screenshot": "https://user-images.githubusercontent.com/18360871/199210192-f5599a23-f0b1-49ff-9c52-2554a72a2c14.png", "description": "A list of resources to learn Web3 for FREE", "link": "https://github.com/FrancescoXX/free-Web3-resources", "twitter": "https://twitter.com/FrancescoCiull4", "live_link": "https://www.freeweb3resources.com", "stack": ["React", "CSS", "Solidity"] } ``` - Create a new object similar to the one above. - Follow the example above and create project details like; - Your name - The project's title - A screenshot - A short description - A link to the GitHub repo (If it is open source) - A link to your Twitter profile - A live link to the project. - Open a pull request 👍 --- Notice anything odd and/or missing from this README or on the website itself? Feel free to raise an [issue](https://github.com/FrancescoXX/4c-site/issues). Join the amazing [4C community](https://discord.com/invite/cRjhjFRRre) on discord, and follow us on [Twitter](https://twitter.com/4ccommunityhq) to stay in the loop. # 🔑 License This repository is under the [MIT](./LICENSE) license. Please leave a star ⭐️ All support is highly appreciated. ================================================ FILE: commitlint.config.js ================================================ module.exports = { extends: ["@commitlint/config-conventional"] } ================================================ FILE: docs/theme/README.md ================================================ # 💎 4C style guide ## Introduction This document is a guide to the 4C style guide. It contains all the information you need to know about the 4C brand, colors, typography, and more. ## About 4C 4C is a community of creators, where you can connect with other like-minded creators, collaborate on ideas, and motivate each other to create and publish! Our community is focused on supporting content creators in general across all social media platforms. We are a community of creators, by creators, for creators. Our goal is to create a decentralized community, where everyone contributes to its growth, and that growth echoes back positively to every individual creator in the community. ## Assets ### 4C Logo ![4C Logo](https://raw.githubusercontent.com/FrancescoXX/4c-site/main/src/assets/logo.png) #### Square Variation ![4C Logo](https://raw.githubusercontent.com/FrancescoXX/4c-site/main/src/assets/logo-square.jpg) ### Banner ![4C Banner](https://raw.githubusercontent.com/FrancescoXX/4c-site/main/src/assets/banner.jpg) ## Typography Font Family: `Poppins` | Name | Weight | | -------------------- | --------- | | `Headings(h1,h2)` | `Bold` | | `Subheadings(h3,h4)` | `Medium` | | `Body Text` | `Regular` | Type scale: Following Tailwind CSS type scale system ## Colors ### 4C Brand Colors

#030e2c
#718fe9
#5fbec4
#49127b
#708fe6
### 4C Gradient CSS code ```css linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% ); ``` 4C gradient ## Buttons ### Call to Action Buttons 4C cta button ### Call to Action Guidelines | Style | Values | | --------------------------- | -------------------------------------- | | `padding-left` | `2rem` | | `padding-right` | `2rem` | | `padding-top` | `0.75rem` | | `display` | `inline-flex` | | `align-items` | `center` | | `justify-content` | `center` | | `gap` | `0.5rem` | | `background-color` | `rgb(17 24 39 / var(--tw-bg-opacity))` | | `font-weight` | `500` | | `border-radius` | `9999px` | | `border-bottom-left-radius` | `0px` | ### NavBar Buttons 4C cta button ### NavBar Button Guidelines | Style | Values | | ------------------ | -------- | | `padding-left` | `1rem` | | `padding-right` | `1rem` | | `padding-top` | `0.5rem` | | `padding-bottom` | `0.5rem` | | `background-color` | `white` | | `font-weight` | `bold` | | `color` | `black` | ## Effects ### Shadows ```css box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var( --tw-ring-shadow, 0 0 #0000 ), var(--tw-shadow); ``` ### Transitions ```css transition: PROPERTY_ANIMATING 150ms ease-out; ``` ================================================ FILE: jsconfig.json ================================================ { "compileOnSave": true, "compilerOptions": { "baseUrl": "src/", "rootDir": ".", "declaration": true, "moduleResolution": "node", "emitDecoratorMetadata": true, "esModuleInterop": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "importHelpers": true, "skipLibCheck": true, "skipDefaultLibCheck": true, "sourceMap": false, "strict": true, "strictNullChecks": true, "jsx": "react" }, "buildOptions": { "incremental": true } } ================================================ FILE: next.config.mjs ================================================ import million from 'million/compiler'; /** @type {import("next").NextConfig} */ const nextConfig = { images: { domains: ["avatars.githubusercontent.com", "user-images.githubusercontent.com", "cdn.discordapp.com", "i.ibb.co", "i.postimg.cc", "images2.imgbox.com", "raw.githubusercontent.com", "img.youtube.com"], formats: ["image/webp"], unoptimized: process.env.NODE_ENV === "development", }, async redirects() { return [ { destination: "https://discord.com/invite/TcmA2kbJeA", source: "/join", permanent: true, }, ] }, } const millionConfig = { auto: true, // if you're using RSC: // auto: { rsc: true }, } export default million.next(nextConfig, millionConfig); ================================================ FILE: package.json ================================================ { "name": "4c", "version": "0.0.0", "private": true, "description": "4C Community: Website, Media Kit and More", "homepage": "https://4c.rocks", "bugs": { "url": "https://github.com/FrancescoXX/4c-site/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc" }, "license": "MIT", "author": "4C Community", "scripts": { "build": "next build", "commit": "commit", "dev": "next dev", "lint": "eslint \"src/**/**/*.{js,json,jsx,ts,tsx}\"", "lint:fix": "yarn lint --fix", "prepare": "husky install", "release": "semantic-release", "start": "next start" }, "dependencies": { "@next/font": "^13.1.1", "@tailwindcss/line-clamp": "^0.4.2", "@tailwindcss/typography": "^0.5.8", "autoprefixer": "^10.4.13", "axios": "^1.2.2", "azelf": "^1.1.0", "classnames": "^2.3.2", "formik": "^2.2.9", "framer-motion": "^8.1.4", "million": "^2.6.0-beta.13", "multiselect-react-dropdown": "^2.0.25", "next": "^13.1.1", "next-seo": "^5.15.0", "postcss": "^8.4.20", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.12.0", "react-toastify": "^9.1.1", "sharp": "^0.31.3", "tailwindcss": "^3.2.4", "yup": "^0.32.11" }, "devDependencies": { "@commitlint/cli": "^17.3.0", "@commitlint/config-conventional": "^17.3.0", "@commitlint/prompt-cli": "^17.3.0", "@semantic-release/changelog": "^6.0.2", "@semantic-release/commit-analyzer": "^9.0.2", "@semantic-release/git": "^10.0.1", "@semantic-release/github": "^8.0.7", "@semantic-release/release-notes-generator": "^10.0.3", "@types/eslint": "^8.4.10", "@types/node": "^18.11.18", "@types/react": "^18.0.26", "@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/parser": "^5.48.0", "cz-conventional-changelog": "^3.3.0", "eslint": "^8.31.0", "eslint-config-next": "^13.1.1", "eslint-config-standard": "^17.0.0", "eslint-config-standard-with-typescript": "^26.0.0", "eslint-plugin-const-case": "^1.2.2", "eslint-plugin-diff": "^2.0.1", "eslint-plugin-editorconfig": "^4.0.2", "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-filenames": "^1.3.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-json-format": "^2.0.1", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-n": "^15.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.31.11", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-simple-import-sort": "^8.0.0", "eslint-plugin-tailwindcss": "^3.8.0", "husky": "^8.0.3", "semantic-release": "^19.0.5", "typescript": "^4.9.4", "yarn": "^1.22.19" }, "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } } } ================================================ FILE: postcss.config.js ================================================ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ================================================ FILE: renovate.json ================================================ { "extends": [ "config:recommended" ], "packageRules": [ { "matchUpdateTypes": [ "minor", "patch" ], "automerge": false } ], "timezone": "America/Toronto", "schedule": [ "After 11:30pm" ] } ================================================ FILE: src/4c.config.js ================================================ module.exports = { siteName: "4C", title: { short: "4C", long: "4C - Creator Community", }, description: { short: "The Cool Community For Content Creators", long: "The Cool Community For Content Creators or 4C is a community where different content creator from every domain have come together to help each other and grow.", }, url: "https://www.4c.rocks/", logo: "https://www.4c.rocks/logo.jpg", // Relative public path to Base URL or Absolute Path ogImage: "https://www.4c.rocks/_next/static/media/logo.9b920fc5.png", favicon: "/favicon.ico", } ================================================ FILE: src/components/ActiveMembers.js ================================================ import React, { useState } from "react" import GetActivemembers from "components/GetActivemembers" import Users from "components/Users" // import contributors data import activeMembers from "data/activemembers" import Title from "components/Title" import { FilterUsers } from "utils/filterUsers" const ActiveMembers = () => { // state for currentUsers const [currentUsers, setCurrentUsers] = useState(activeMembers) // filter handler const searchHandler = (event) => { event.preventDefault() const filterdUsers = FilterUsers( activeMembers, event.target.value, ) setCurrentUsers(filterdUsers) } const [tab] = useState("Active Members") return (
<div className="flex items-center justify-center "> <div className="break:w[500px] relative m-auto flex max-w-[800px] self-center mobile:mx-10 laptop:w-[600px] bigScreen:w-[800px]"> <input placeholder="Search here" className="h-10 w-full border-slate-200 px-5 py-3 text-white outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-white bg-opacity-[.2] p-8 shadow backdrop-blur-3xl" onInput={searchHandler} /> <svg xmlns="http://www.w3.org/2000/svg" className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 rotate-90 text-white sm:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="#000000" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </div> </div> {currentUsers.length ? <div className="m-2 flex flex-wrap items-center justify-center overflow-y-auto pb-4"> {tab === "Active Members" ? ( <GetActivemembers users={currentUsers} /> ) : ( <Users users={currentUsers} /> )} </div> : <p className="mt-3">User does not exist!</p>} </section> </div> ) } export default ActiveMembers ================================================ FILE: src/components/BlogCard.js ================================================ import React from "react" import { FaTwitter, FaLink } from "react-icons/fa" import blogs from "data/blog" import Image from "next/image" const styles = "transition-all ease-in cursor-pointer" const BlogCard = () => { return ( <section className="flex w-full flex-wrap items-center justify-center p-4 sm:p-10"> {blogs.map((blog, index) => ( <div key={index} className="hov-bg-theme m-5 h-full w-[330px] rounded-xl bg-[#f1f5f9] p-5 text-black shadow-md transition-all ease-out hover:-translate-y-1 xl:w-[380px]" > <div className="flex justify-between text-2xl"> <a href={blog.twitter} target="_blank" rel="noreferrer"> <FaTwitter className={styles} /> </a> <a href={blog.link} target="_blank" rel="noreferrer"> <FaLink className={styles} /> </a> </div> <div> <h2 className="title my-10 text-2xl">{blog.title}</h2> </div> <a href={blog.link} target="_blank" rel="noreferrer"> <Image alt={`Screenshot of ${blog.title}`} className="rounded-md object-contain " src={blog.screenshot} height={320} width={568.87} /> </a> <div> <p className="mt-5 text-[18px] leading-6 text-black/80 line-clamp-2"> {blog.description} </p> </div> </div> ))} </section> ) } export default BlogCard ================================================ FILE: src/components/CommunityPartners.js ================================================ import Image from "next/image" import Link from "next/link" import React from "react" import partnerCommunities from "../data/partnerCommunities.json" function CommunityPartners() { return ( <div className="container text-white flex items-center justify-center mt-20 mb-10"> <div className="p-3 max-w-bodyContainer w-full"> <header className="text-4xl font-semibold text-center"> Community Partners </header> <p className="text-center text-sm mt-2 italic"> Other great communities we collaborate with </p> <div className="flex items-center justify-center mt-8"> {partnerCommunities.map((community) => ( <div key={community.community_name} className="flex"> <div> <Link href={community.website}> <Image src={community.logo} alt={community.community_name} width={100} height={100} className="object-contain transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300" /> </Link> </div> <div className="flex items-center justify-center px-6 "> <div> <h1 className="text-2xl">{community.community_name}</h1> <h3>{community.sub_desc}</h3> <p>{community.bio}</p> </div> </div> </div> ))} </div> </div> </div> ) } export default CommunityPartners ================================================ FILE: src/components/FaqAccordian.js ================================================ import React, { useState } from "react" import { AnimatePresence, motion } from "framer-motion" import { IoIosArrowDown } from "react-icons/io" const FaqAccordian = ({ faq }) => { const [isOpen, setIsOpen] = useState(false) return ( <li className="flex items-center justify-center w-9/12 mb-8 flex-column sm:w-9/12 md:w-8/12 lg:w-1/2"> <div onClick={() => setIsOpen(!isOpen)} onKeyDown={() => setIsOpen(!isOpen)} tabIndex={0} role="button" className={`w-full p-8 rounded shadow cursor-pointer details backdrop-blur-lg ${ isOpen ? "bg-white/30" : "bg-white/20" }`} > <p className="relative flex items-center justify-between pr-4 text-base font-bold leading-none text-white list-none"> <span>{faq.questions}</span> <IoIosArrowDown className={`text-2xl duration-200 ${ isOpen && "rotate-180" }`} /> </p> <AnimatePresence> {isOpen && ( <motion.p initial={{ opacity: 0, height: 0, marginTop: 0 }} animate={{ opacity: 1, height: "auto", marginTop: 12 }} exit={{ opacity: 0, height: 0, margin: 0 }} className={"overflow-hidden text-base leading-normal text-white"} > {faq.answers} </motion.p> )} </AnimatePresence> </div> </li> ) } export default FaqAccordian ================================================ FILE: src/components/Footer.jsx ================================================ import React from "react" import { FaDiscord, FaGithub, FaLinkedin } from "react-icons/fa" import { FaXTwitter } from "react-icons/fa6" function Footer() { return ( <footer className="md:max-md flex flex-col items-center gap-4 bg-[#0d1117] p-4 py-8 text-center text-white/80 footer"> <div className="flex items-center"> <div className="flex gap-10"> <a className="text-2xl hover:text-white" href="https://github.com/FrancescoXX/4c-site" rel="noreferrer" target="_blank" > <span className="sr-only"> Github Repository </span> <FaGithub aria-hidden="true" /> </a> <a className="text-2xl hover:text-white" href="https://discord.com/invite/TcmA2kbJeA" rel="noreferrer" target="_blank" > <span className="sr-only"> Discord Server </span> <FaDiscord aria-hidden="true" /> </a> <a className="text-2xl hover:text-white" href="https://twitter.com/4ccommunityhq" rel="noreferrer" target="_blank" > <span className="sr-only"> X </span> <FaXTwitter aria-hidden="true" /> </a> <a className="text-2xl hover:text-white" href="https://www.linkedin.com/company/4ccommunity/about/" rel="noreferrer" target="_blank" > <span className="sr-only"> LinkedIn </span> <FaLinkedin aria-hidden="true" /> </a> </div> </div> <p className="md:max-md: text-xs font-medium text-white/80"> 4C | Developed by 4C Community © {" "} {new Date().getFullYear()} </p> </footer> ) } export default Footer ================================================ FILE: src/components/Form/JoinUsForm.js ================================================ import React from "react" import router from "next/router" import { useFormik } from "formik" import { formSchema } from "components/Form/validation/formSchema" import Loading from "components/Loading" import Axios from "axios" const JoinusForm = () => { const formik = useFormik({ initialValues: { fullName: "", email: "", github: "", twitter: "", question1: "", question2: "", question3: "", }, validationSchema: formSchema, }) const [loading, setLoading] = React.useState(false) const handleSubmit = () => { // console.log(formik.values); setLoading(true) Axios.post(process.env.NEXT_PUBLIC_SHEETS_API, formik.values) .then(function() { setLoading(false) alert("Thank you!! Your form has been submitted successfully!!") router.push("/") }) .catch(function(error) { setLoading(false) alert(error.message) }) } return ( <div className="container mx-auto"> <div className="mx-auto my-10 max-w-xl rounded-md bg-white p-5 shadow-sm"> <div className="pb-10 text-center"> <h1 className="my-3 text-base font-normal text-gray-700"> 4C is a community to connect with other like-minded creators, collaborate on ideas, and motivate each other to create and publish! </h1> </div> <div> <form id="loginform" onSubmit={formik.handleSubmit}> <div className="mb-4"> <label htmlFor="name" className="ml-2 block text-left text-sm text-gray-600" > Full Name </label> <input type="text" name="fullName" placeholder="John Doe" className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} /> {formik.errors.fullName && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.fullName}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="email" className="ml-2 block text-left text-sm text-gray-600" > Email Address </label> <input type="email" name="email" id="email" placeholder="you@email.com" required className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} /> {formik.errors.email && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.email}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="github" className="ml-2 block text-left text-sm text-gray-600" > Github Username </label> <input type="text" name="github" id="github" placeholder="@" required className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} /> {formik.errors.github && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.github}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="twitter" className="ml-2 block text-left text-sm text-gray-600" > Twitter Username </label> <input type="text" name="twitter" id="twitter" placeholder="@" required className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} /> {formik.errors.twitter && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.twitter}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="message" className="mb-2 ml-2 block text-left text-sm text-gray-600" > What do you know about 4C Community?{" "} </label> <textarea rows="5" name="question1" id="question1" placeholder="Your Message" className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} required ></textarea> {formik.errors.question1 && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.question1}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="message" className="mb-2 ml-2 block text-left text-sm text-gray-600" > Why do you want to join our staff team? </label> <textarea rows="5" name="question2" id="question2" placeholder="Your Message" className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} required ></textarea> {formik.errors.question2 && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.question2}</span> </p> )} </div> <div className="mb-4"> <label htmlFor="message" className="mb-2 ml-2 block text-left text-sm text-gray-600" > Tell us something cool about yourself </label> <textarea rows="5" name="question3" id="question3" placeholder="Your Message" className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm text-black placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" onChange={formik.handleChange} required ></textarea> {formik.errors.question3 && ( <p className="mt-2 ml-2 block text-left text-sm text-red-600 dark:text-red-500"> <span className="font-medium">{formik.errors.question3}</span> </p> )} </div> <div className="mb-4"> {loading ? ( <Loading /> ) : ( <button form="loginform" onClick={handleSubmit} className="w-full rounded-md bg-blue-500 px-2 py-4 text-sm text-white focus:bg-indigo-600 focus:outline-none" type="submit" > Submit your application </button> )} </div> </form> </div> </div> </div> ) } export default JoinusForm ================================================ FILE: src/components/Form/validation/formSchema.js ================================================ import * as Yup from "yup" export const formSchema = Yup.object().shape({ email: Yup.string().email().required("Required"), fullName: Yup.string().required("Required").min(3, "Too Short!"), location: Yup.string().required("Required"), github: Yup.string().required("Required"), twitter: Yup.string().required("Required"), question1: Yup.string().required("Required"), question2: Yup.string().required("Required"), question4: Yup.string().required("Required"), }) ================================================ FILE: src/components/GetActivemembers.js ================================================ import { motion, useReducedMotion } from "framer-motion" import ProfileCard from "components/ProfileCard" import React from "react" const GetActivemembers = ({ users }) => { const shouldReduceMotion = useReducedMotion() const hoverAnimation = shouldReduceMotion ? {} : { zIndex: 1, scale: [1, 1.1, 1.1], } return users.map((user, index) => ( <motion.div key={index} whileHover={hoverAnimation}> <ProfileCard username={user.name} avatar={user.avatar} socials={[ { type: "github", username: user.github }, { type: "twitter", username: user.twitter }, { type: "youtube", username: user.youtube }, { type: "twitch", username: user.twitch }, { type: "blog", username: user.blogUrl }, { type: "linkedin", username: user.linkedin }, ]} /> </motion.div> )) } export default GetActivemembers ================================================ FILE: src/components/GetActivities.js ================================================ import eventList from "../data/events.json" import Title from "./Title" import { FaTwitter, FaDiscord } from "react-icons/fa" import Image from "next/image" const events = eventList.events const styles = "transition-all ease-in cursor-pointer" const GetActivities = () => ( <div style={{ marginTop: "50px" }} className="flex flex-col items-center"> <Title heading="Activities" /> <section className="flex justify-center sm:w-[500px] xl:w-auto p-4 sm:p-10"> {events.map((event, idx) => { return ( event.isActive && ( <div key={idx} className="hov-bg-theme m-5 h-full w-[330px] rounded-xl bg-[#f1f5f9] p-5 text-black shadow-md transition-all ease-out hover:-translate-y-1 xl:w-[380px]" > <div> <h2 className="title mt-5 text-2xl">{event.name}</h2> <div className="w-full"> <p className="text-md text-[14px] text-gray-600 leading-[20px] mt-3"> By {event.organizer}{" "} <span className="block sm:inline text-sm font-[600] text-black"> {event.date} </span>{" "} </p> </div> <Image src={event?.image} alt={event.name} className="w-full mb-4 rounded-md object-cover my-4" width={100} height={100} /> <div className="flex justify-between text-2xl bottom-1 w-[100%]"> <a href={event.link} target="_blank" className="bg-theme my-4 rounded-md flex h-14 w-full items-center justify-center bg-[#70b7e6] text-4xl text-white" rel="noreferrer" > {event.venue === "Twitter" ? ( <FaTwitter className={styles} /> ) : ( <FaDiscord className={styles} /> )} </a> </div> </div> </div> ) ) })} </section> </div> ) export default GetActivities ================================================ FILE: src/components/GetProjects.js ================================================ import React, { useState, useEffect } from "react" import allProjects from "data/projects.json" import Title from "components/Title" import stackList from "data/stacks.json" import Multiselect from "multiselect-react-dropdown" import Image from "next/image" const multiselectRef = React.createRef() const stacks = stackList.stack.map((stack) => stack.name) const GetProjects = () => { const [selected, setSelected] = useState([]) const [filteredProjects, setFilteredProjects] = useState([]) // get options from stacks const options = [] for (let i = 0; i < stacks.length; i++) { const obj = {} obj.id = i obj.value = stacks[i] options.push(obj) } // useEffect for filtering the projects useEffect(() => { let arr = [] for (let i = 0; i < allProjects.projects.length; i++) { for (let j = 0; j < selected.length; j++) { if (allProjects.projects[i].stack?.includes(selected[j])) { arr.push(allProjects.projects[i]) } } } if (arr.length > 0) { arr = [...new Set(arr)] setFilteredProjects(arr) } else { setFilteredProjects(allProjects.projects) } }, [selected]) // get selected values in dropdown function getSelectedValues() { const items = multiselectRef.current.getSelectedItems() const newArray = items.map((element) => element.value) setSelected(newArray) } return ( <div className="mt-[3em] flex items-start justify-start"> <section className="flex-1 text-center text-white"> <Title heading="Projects" /> <p className="text-black/70 sm:text-white/70"> Projects by 4c community Members </p> <div className="flex items-center justify-center"> <div className="max-w-bodyContainer"> <div className="mx-4 mt-5 mb-10 flex list-none flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem]"> <div className="py-2"> <div className="before-multiselect bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl flex items-center flex-row "> <Multiselect options={options} displayValue={"value"} selectedValues={options.selectedValues} onSelect={getSelectedValues} onRemove={getSelectedValues} placeholder="Filter By Tech Stack" ref={multiselectRef} showCheckbox={true} closeOnSelect={true} avoidHighlightFirstOption={true} /> <svg xmlns="http://www.w3.org/2000/svg" className="searchIcon h-5 w-5 rotate-90 text-white sm:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="#000000" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </div> </div> </div> <div className="my-[1rem] flex flex-wrap items-center justify-center gap-[1.5rem] pt-4 text-left md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> {filteredProjects.map((project, index) => { return ( <div key={index} className="group flex w-[280px] shrink flex-col rounded-lg p-2 transition-all duration-300 ease-in-out hover:scale-110" > <div className="flex h-full w-full items-center justify-center rounded-t-xl text-center shadow-sm"> <Image alt={`Screenshot of ${project.title}`} className="h-full max-h-[8rem] w-full overflow-hidden rounded-t-xl object-cover transition-all duration-300 ease-in-out" src={project.screenshot} width={272} height={128} /> </div> <div className="flex h-full w-full flex-col gap-[.2rem] justify-self-end rounded-b-xl bg-[#f1f5f9] p-4"> <div className="text-black "> <h2 className="w-[30] text-base truncate " >{project.title}</h2> <h4 className="flex items-center gap-2 text-sm font-normal opacity-75"> <svg width="12" height="24" viewBox="0 0 30 34" fill="none" > <path d="M14.639 17.1666C18.863 17.1666 22.2872 13.7424 22.2872 9.51838C22.2872 5.29436 18.863 1.87012 14.639 1.87012C10.415 1.87012 6.99072 5.29436 6.99072 9.51838C6.99072 13.7424 10.415 17.1666 14.639 17.1666Z" stroke="black" strokeWidth="3.5" /> <path d="M22.2877 20.226H22.8262C23.9445 20.2263 25.0242 20.6349 25.8624 21.3752C26.7006 22.1154 27.2397 23.1362 27.3784 24.2459L27.9765 29.0245C28.0303 29.455 27.9919 29.892 27.8639 30.3065C27.7359 30.7211 27.5212 31.1036 27.234 31.4288C26.9469 31.754 26.5939 32.0144 26.1984 32.1928C25.8029 32.3711 25.374 32.4633 24.9401 32.4632H4.33878C3.90494 32.4633 3.47605 32.3711 3.08056 32.1928C2.68507 32.0144 2.33203 31.754 2.04488 31.4288C1.75772 31.1036 1.54301 30.7211 1.41501 30.3065C1.287 29.892 1.24862 29.455 1.30242 29.0245L1.89898 24.2459C2.03772 23.1357 2.57726 22.1144 3.41614 21.3741C4.25503 20.6338 5.33547 20.2255 6.45429 20.226H6.9912" stroke="black" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" /> </svg> {project.name} </h4> <div className="my-[.5rem] flex flex-auto"> <p className="w-full truncate text-sm"> {project.description} </p> </div> </div> <div className="bg-red my-[10px] mt-auto flex h-10 w-full items-center self-end justify-evenly pl-2.5"> <a className={ project.live_link === "" ? "mr-3 flex items-center gap-2 rounded-full bg-gray-500 px-4 py-1.5 text-sm transition-all ease-in hover:bg-sky-700" : "mr-3 flex items-center gap-2 rounded-full bg-[#1e293b] px-4 py-1.5 text-sm transition-all ease-in hover:bg-sky-700" } href={project.live_link} target="_blank" style={ project.live_link === "" ? { pointerEvents: "none" } : { pointerEvents: "auto" } } rel="noreferrer" > <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 16 16" height="1em" width="1em" > <path fillRule="evenodd" clipRule="evenodd" d="M1 10c0-3.9 3.1-7 7-7s7 3.1 7 7h-1c0-3.3-2.7-6-6-6s-6 2.7-6 6H1zm4 0c0-1.7 1.3-3 3-3s3 1.3 3 3-1.3 3-3 3-3-1.3-3-3zm1 0c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2z" ></path> </svg> View </a> <a className="mr-3 flex items-center gap-2 rounded-full bg-[#111827] px-3 py-1.5 text-sm transition-all ease-in hover:bg-sky-700" href={project.link} target="_blank" rel="noreferrer" > <svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 24 24" height="1em" width="1em" > <g> <path fill="none" d="M0 0h24v24H0z"></path> <path fillRule="nonzero" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588-.094-.117.34.427.433.539.19.227.33.365.44.438.204.137.587.196 1.15.14.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308 1.477-.933 2.613-1.226 3.422-1.096.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19.691.936 1.058 2.045 1.058 3.293 0 3.757-1.674 5.665-4.642 6.392.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716 1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446.005-.705c.005-.708.007-1.338.007-1.998 0-.697-.183-1.152-.425-1.36-.661-.57-.326-1.655.54-1.752 2.967-.333 4.337-1.482 4.337-4.66 0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66.865.097 1.201 1.177.544 1.748-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" ></path> </g> </svg> Repo </a> </div> </div> </div> ) })} </div> </div> </div> </section> </div> ) } export default GetProjects ================================================ FILE: src/components/GetStaff.js ================================================ import { motion, useReducedMotion } from "framer-motion" import ProfileCard from "components/ProfileCard" const GetStaff = ({ users }) => { const shouldReduceMotion = useReducedMotion() const hoverAnimation = shouldReduceMotion ? {} : { zIndex: 1, scale: [1, 1.1, 1.1], } return users.map((user) => ( <motion.div key={user.name} whileHover={hoverAnimation}> <ProfileCard username={user.name} avatar={user.avatar} description={user.description} socials={[ { type: "github", username: user.github }, { type: "twitter", username: user.twitter }, { type: "youtube", username: user.youtube }, { type: "twitch", username: user.twitch }, { type: "blog", username: user.blogUrl }, { type: "linkedin", username: user.linkedin }, ]} /> </motion.div> )) } export default GetStaff ================================================ FILE: src/components/GetVideos.js ================================================ import React from "react" import allVideos from "data/videos.json" import Title from "components/Title" import Image from "next/image" const GetVideos = () => { return ( <div className="flex items-center justify-center"> <section className="max-w-bodyContainer flex-1 text-center text-white"> <Title heading="Videos" /> <p className="text-white/70">Videos by 4c community Members</p> <div className="mx-4 lg:mx-12"> <div className="flex w-full flex-wrap justify-center mt-4"> {allVideos.videos.map((video, index) => ( <div key={index} className="details overflow-hidden hov-bg-theme medium:my-4 cursor-pointer rounded-md bg-white/10 text-white shadow-lg backdrop-blur-[30px] transition-all ease-out hover:-translate-y-2 m-4 w-[14rem] mobile:w-[17rem] medium:w-[20rem] laptop:w-[22rem]" > <a href={`https://www.youtube.com/watch?v=${video.videoId}`} target="_blank" rel="noreferrer" > <Image src={`https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`} className="mx-auto w-full" alt={video.videoTitle} width={272} height={153} /> <div className="py-3 px-2"> <h2>{video.videoTitle}</h2> <span className="text-sm font-thin text-gray-300"> {video.videoAuthor} </span> </div> </a> </div> ))} </div> </div> </section> </div> ) } export default GetVideos ================================================ FILE: src/components/GoToTop.js ================================================ import React, { useEffect, useState } from "react" import { FaArrowUp } from "react-icons/fa" const GoToTop = () => { // state to display toggler const [isVisible, setIsVisible] = useState(false) const goToBtn = () => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }) } const listenToScroll = () => { const heightToHidden = 20 const winScroll = document.body.scrollTop || document.documentElement.scrollTop if (winScroll > heightToHidden) { setIsVisible(true) } else { setIsVisible(false) } const footer = document.querySelector(".footer") const backToTopButton = document.querySelector(".backToTopButton") const mediaQuery = window.matchMedia("(max-width: 400px)") const footerIsVisible = footer.getBoundingClientRect().top <= window.innerHeight if (mediaQuery.matches) { if (footerIsVisible) { backToTopButton.style.bottom = `${footer.offsetHeight}px` backToTopButton.style.transition = "0.5s" } else { backToTopButton.style.bottom = "48px" } } } useEffect(() => { window.addEventListener("scroll", listenToScroll) return () => window.removeEventListener("scroll", listenToScroll) }, []) // classes for gototop button return ( <div onClick={goToBtn} onKeyDown={goToBtn} role="button" tabIndex={0} className={`backToTopButton fixed bg-gradient-to-b from-green-400 to-blue-600 animate-bounce cursor-pointer rounded-full p-3 right-12 bottom-12 ${!isVisible ? "hidden" : "backToTop"}`} > {isVisible && ( <div> <FaArrowUp className="text-black" /> </div> )} </div> ) } export default GoToTop ================================================ FILE: src/components/Header.js ================================================ import { RiMenu4Fill, RiCloseFill } from "react-icons/ri" import { useState, useEffect } from "react" import Link from "next/link" // import navbar data import navItems from "data/navbar" import Image from "next/image" import logoImage from "assets/logo.png" const Navbar = () => { const [menuActive, setMenuActive] = useState(false) const [activeButton, setActiveButton] = useState() useEffect(() => { const local = window.localStorage.getItem("active") setActiveButton(local) }, []) return ( <div className="container -ml-4 items-center justify-center left-0 right-0 z-[1] block fixed"> <header className="my-[0] w-[100vw] bg-[#314C89]/10 backdrop-blur-[2px] px-5 py-[0.7rem] md:px-[2rem]"> <div className="container max-w-bodyContainer px-1 sm:px-2"> <nav className="flex items-start justify-between md:justify-center"> <div className="relative flex w-full flex-wrap items-center justify-between gap-6 z-50"> <Link href="/"> <Image width={50} height={50} id="four-c-logo" className="hover:cursor-pointer" alt="4C Logo" src={logoImage} priority /> </Link> <button className="text-4xl lg:hidden text-white bg-[#030e2c] p-2 rounded" aria-label="Menu button" type="button" onClick={() => setMenuActive(true)} > <RiMenu4Fill /> </button> <div className={`w-full h-screen -z-40 fixed bg-[#030e2c] flex p-20 top-0 left-0 ${ menuActive ? "z-40" : "" } flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem] transition-all duration-1000 lg:w-max lg:h-max lg:!z-40 lg:static lg:bg-inherit lg:p-0 lg:top-auto lg:left-auto lg:![clip-path:unset] lg:transition-none`} style={{ clipPath: menuActive ? "circle(100% at 50% 50%)" : "circle(0% at 100% 0)", }} > <button className="text-4xl lg:hidden text-white bg-[#030e2c] p-2 rounded fixed top-[4rem] right-[5rem]" aria-label="Close button" type="button" onClick={() => setMenuActive(false)} > <RiCloseFill /> </button> {navItems.map((navItem, idx) => ( <Link href={navItem.href} key={idx} onClick={() => { window.localStorage.setItem("active", navItem.href) }} onKeyDown={() => { window.localStorage.setItem("active", navItem.href) }} role="menuitem" tabIndex={0} className={`hov-bg-theme w-full rounded px-4 py-2 font-bold transition-all ease-out hover:-translate-y-1 hover:cursor-pointer lg:w-auto text-center ${ activeButton === navItem.href ? "bg-theme bg-[#70b7e6] text-white" : "bg-[#111827] text-white" }`} > {navItem.pageName} </Link> ))} </div> </div> </nav> </div> </header> </div> ) } export default Navbar ================================================ FILE: src/components/JoinOurTeam.jsx ================================================ import React, { useState } from "react" import JoinUsForm from "components/Form/JoinUsForm" function JoinOurTeam() { const [tab] = useState("Join Our Team") return ( <div className="mt-18 flex items-start justify-start"> <section className="flex-1 text-center text-4xl font-bold text-white"> <h1>{tab}</h1> <JoinUsForm /> </section> </div> ) } export default JoinOurTeam ================================================ FILE: src/components/Layout.js ================================================ import Head from "next/head" import { NextSeo } from "next-seo" import Header from "components/Header" import config from "4c.config" import { motion } from "framer-motion" import Footer from "components/Footer" import favicon from "../public/favicon.ico" const Layout = ({ header, children, ...rest }) => { const variants = { hidden: { opacity: 0, x: 0, y: 200 }, enter: { opacity: 1, x: 0, y: 0 }, exit: { opacity: 0, x: 0, y: 0 }, } return ( <> <div className="bg-theme min-h-screen" id="get-projects-scroll"> <Header {...header} /> <Head> <link rel="shortcut icon" type="image/x-icon" href={favicon.src} /> </Head> <NextSeo title={config.title.short} description={config.description.short} canonical={config.url} openGraph={{ url: config.url, title: config.title.long, description: config.description.long, images: [ { url: config.ogImage, width: 1200, height: 630, alt: config.title.short, type: "image/jpeg", }, ], site_name: config.siteName, }} /> <motion.main {...rest} variants={variants} initial="hidden" animate="enter" exit="exit" transition={{ type: "linear" }} > {children} </motion.main> </div> <Footer /> </> ) } export default Layout ================================================ FILE: src/components/Loading.jsx ================================================ import React from "react" function Loading() { return ( <button disabled type="button" className="w-full rounded-md bg-blue-500 px-2 py-4 text-sm text-white focus:bg-indigo-600 focus:outline-none" > <svg role="status" className="mr-3 inline h-4 w-4 animate-spin text-white" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB" /> <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor" /> </svg> Loading... </button> ) } export default Loading ================================================ FILE: src/components/Main.js ================================================ const Main = ({ eyebrow, title, description, primaryLink, twitterLink }) => { return ( <div> <div className="flex items-center justify-center"> <section className="container mb-[4em] md:my-[4em] max-w-bodyContainer md:p-[2em] md:mb-[0em]"> <div className="grid items-center gap-12 md:grid-cols-1 lg:grid-cols-2"> <div className="col-span-1"> <p className="hidden text-2xl font-bold uppercase tracking-wide text-white md:block"> {eyebrow} </p> <h1 className="main-title mt-2 text-5xl font-extrabold tracking-tight text-white md:text-6xl text-center md:text-left "> {title} </h1> <div className="main-description prose-lg my-8 mx-[auto] text-slate-200 md:text-left text-center"> {description} </div> <ul className="my-8 flex flex-col flex-wrap gap-4 md:flex-row md:justify-start"> <li className="self-center break:self-start">{primaryLink}</li> <li className="self-center break:self-start">{twitterLink}</li> </ul> </div> <div className="flex justify-end"> <iframe title="Discord Widget" width="95%" height="500" allowtransparency="true" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" src="https://discord.com/widget?id=784142072763383858&theme=dark" ></iframe> </div> </div> </section> </div> </div> ) } export default Main ================================================ FILE: src/components/ProfileCard.jsx ================================================ import React from "react" import { FaBlog, FaGithub, FaYoutube, FaTwitch, FaLinkedin, } from "react-icons/fa" import { FaXTwitter } from "react-icons/fa6" import SocialLink from "components/SocialLink" import Image from "next/image" const socialMediaData = { github: { url: "https://github.com/", icon: FaGithub, }, twitter: { url: "https://twitter.com/", icon: FaXTwitter, }, blog: { icon: FaBlog, }, youtube: { icon: FaYoutube, }, twitch: { icon: FaTwitch, }, linkedin: { icon: FaLinkedin, url: "https://www.linkedin.com/in/", }, } const getSocials = (socials, username) => { socials = socials.filter((social) => social.username) return socials.map((social) => { const socialMedia = socialMediaData[social.type] if (social.type === "blog" && !social?.username?.includes("http")) { social.username = `http://${social.username}` } return ( <SocialLink link={[ socialMedia.url ? socialMedia.url + social.username : social.username, ]} Icon={socialMedia.icon} label={username + "'s " + social.type} key={social.type} /> ) }) } const ProfileCard = ({ username, avatar, socials = [], description }) => { return ( <div className="m-4 flex h-64 w-64 flex-col items-center justify-center rounded-md"> <div className="h-32 w-32 overflow-hidden rounded-full shadow-sm"> <Image src={avatar} alt={username} width={200} height={200} className="object-contain" /> </div> <span className="mt-3 text-lg text-white">{username}</span> {description?.length > 0 ? ( <div className="mt-[.2em] w-[20ch] truncate p-[.4em] text-sm hover:w-[30ch] hover:text-clip wrapper"> <p className="target">{description}</p> </div> ) : ( "" )} <div className="flex items-center justify-center space-x-3 rounded py-1 px-4"> {getSocials(socials, username)} </div> </div> ) } export default ProfileCard ================================================ FILE: src/components/SocialLink.jsx ================================================ import React from "react" const SocialLink = ({ link, Icon, label }) => ( <a href={link} target="_blank" rel="noopener noreferrer" className="text-white hover:text-slate-300"> <Icon className="text-2xl" /> <span className="sr-only">{label}</span> </a> ) export default SocialLink ================================================ FILE: src/components/Staff.js ================================================ import React, { useState } from "react" import GetStaff from "components/GetStaff" import Users from "components/Users" // import staff data import staff from "data/staff" import Title from "components/Title" import { FilterUsersByNameAndDesc } from "utils/filterUsers" const Staff = () => { const [tab] = useState("Staff") // state for currentUsers const [currentUsers, setCurrentUsers] = useState(staff) // filter handler const searchHandler = (event) => { event.preventDefault() const filterdUsers = FilterUsersByNameAndDesc(staff, event.target.value) setCurrentUsers(filterdUsers) } return ( <div className="flex items-center justify-center"> <div className="mt-[3em] flex max-w-bodyContainer items-start justify-start"> <section className="flex-1 text-center font-bold text-white"> <Title heading="Staff" /> <div className="flex items-center justify-center "> <div className="break:w[500px] relative m-auto flex max-w-[800px] self-center mobile:mx-10 laptop:w-[600px] bigScreen:w-[800px]"> <input placeholder="Search here" className="h-10 w-full border-slate-200 px-5 py-3 text-white outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 bg-white bg-opacity-[.2] p-8 shadow backdrop-blur-3xl rounded-3xl" onInput={searchHandler} /> <svg xmlns="http://www.w3.org/2000/svg" className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 rotate-90 text-white sm:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="#000000" strokeWidth={2} > <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </div> </div> {currentUsers.length ? ( <div className="m-2 flex flex-wrap items-center justify-center gap-[1.8rem] overflow-y-auto pt-5 pb-4"> {tab === "Staff" ? ( <GetStaff users={currentUsers} /> ) : ( <Users users={currentUsers} /> )} </div> ) : ( <p className="mt-3">User does not exist!</p> )} </section> </div> </div> ) } export default Staff ================================================ FILE: src/components/Title.js ================================================ import React from "react" function Title({ heading }) { // Main Heading component return ( <> <h1 className="headTitle mb-5 uppercase tracking-widest text-white"> {heading} </h1> </> ) } export default Title ================================================ FILE: src/components/Users.js ================================================ import ProfileCard from "components/ProfileCard" const Contributors = ({ users }) => { if (users.length === 0) { return ( <div className="flex h-64 flex-col items-center justify-start space-y-6 rounded-md bg-orange-300 p-8 text-lg text-gray-600 shadow-md"> None yet </div> ) } return users.map((user, index) => ( <ProfileCard key={index} username={user.name} avatar={user.avatar} socials={[ { type: "github", username: user.github }, { type: "twitter", username: user.twitter }, { type: "blog", username: user.blogUrl }, ]} /> )) } export default Contributors ================================================ FILE: src/components/blog-posts.js ================================================ import BlogCard from "components/BlogCard" import Title from "components/Title" const Blogs = () => { return ( <div className="flex items-center flex-col justify-center"> <Title heading="Blogs" /> <BlogCard /> </div> ) } export default Blogs ================================================ FILE: src/components/faq.js ================================================ import Faqs from "data/faq.json" import FaqAccordian from "components/FaqAccordian" import Title from "components/Title" const Faq = () => { return ( <div> <div className="page-title mb-16 mt-[30px] text-center text-white"> <Title heading="Frequently asked questions" /> </div> <ul className="flex flex-col items-center justify-center"> {Faqs.map((faq, idx) => ( <FaqAccordian key={idx} faq={faq} /> ))} </ul> </div> ) } export default Faq ================================================ FILE: src/data/activemembers.js ================================================ import AyushAvatar from "assets/sources/activemembers/Aayushd18.webp" import AdetoyeAvatar from "assets/sources/activemembers/adetoye-dev.webp" import AnishAvatar from "assets/sources/activemembers/AnishDe12020.webp" import AryanAvatar from "assets/sources/activemembers/AryanBabber.webp" import BaranAvatar from "assets/sources/activemembers/baranbbr.webp" import CodewithvoidAvatar from "assets/sources/activemembers/codewithvoid.webp" import CtofaninAvatar from "assets/sources/activemembers/ctoffanin.webp" import DevvSakibAvatar from "assets/sources/activemembers/devvsakib.webp" import EpicAdidashAvatar from "assets/sources/activemembers/epicadidash.webp" import HaiderAliAvatar from "assets/sources/activemembers/haideralipunjabi.webp" import JayNarayanAvatar from "assets/sources/activemembers/jaynarayan-vaishnav.webp" import JonnieAvatar from "assets/sources/activemembers/Jonnie-Dev.webp" import KrishAvatar from "assets/sources/activemembers/krshkun.webp" import MayankAvatar from "assets/sources/activemembers/Mayank-KS.webp" import PosanduAvatar from "assets/sources/activemembers/Posandu.webp" import RakeshAvatar from "assets/sources/activemembers/RakeshSangem.webp" import ShorunAvatar from "assets/sources/activemembers/ShorunTech.webp" import SiddharthAvatar from "assets/sources/activemembers/SiddharthShyniben.webp" import BobbyAvatar from "assets/sources/activemembers/thedevdojo.webp" import BigDogTristAvatar from "assets/sources/activemembers/thePlebDev.webp" import VaibhavAvatar from "assets/sources/activemembers/singh-vaibhav08.webp" import LBD from "assets/sources/activemembers/lbd.webp" import staff from "./staff" // const staff = [] /** * @typedef {Object} Profile * @property {string} name * @property {string} avatar * @property {string?} github * @property {string} description * @property {string?} twitter * @property {string?} blogUrl * @property {number?} contributions */ /** * @type {Profile[]} */ // export const base = [ const base = [ { name: "L.B.D", avatar: LBD, github: "lambeboluwatife", twitter: "Danibholie", blogUrl: "https://boluwatifeportfolio.netlify.app/", youtube: "https://www.youtube.com/@LBDmedia/videos", linkedin: "lambe-boluwatife-87b0b6136", contributions: 0, }, { name: "Aayush™", avatar: AyushAvatar, github: "Aayushd18", twitter: "aayushdeshmukh", blogUrl: "https://aayushd.in/", contributions: 0, }, { name: "Adetoye Adewoye", avatar: AdetoyeAvatar, github: "adetoye-dev", twitter: "adetoye_dev", blogUrl: "https://adetoye.vercel.app/", contributions: 0, }, { name: "AnishDe12020", avatar: AnishAvatar, github: "AnishDe12020", twitter: "AnishDe12020", blogUrl: "https://anishde.dev/", contributions: 0, }, { name: "AryanBabber", avatar: AryanAvatar, github: "AryanBabber", twitter: "ABgoneCoding", blogUrl: "https://linkfree.eddiehub.io/aryanbabber", contributions: 0, }, { name: "Baran", avatar: BaranAvatar, github: "baranbbr", twitter: "banf", blogUrl: "https://dev.to/banf", contributions: 3, }, { name: "bigdogtrist", avatar: BigDogTristAvatar, github: "thePlebDev", twitter: "AndroidTristan", blogUrl: "https://dev.to/theplebdev", contributions: 0, }, { name: "Bobby Iliev", avatar: BobbyAvatar, github: "thedevdojo", twitter: "bobbyiliev_", blogUrl: "https://devdojo.com/", contributions: 0, }, { name: "Codewithvoid", avatar: CodewithvoidAvatar, github: "codewithvoid", twitter: "codewithvoid", blogUrl: "", contributions: 0, }, { name: "epicadidash", avatar: EpicAdidashAvatar, github: "epicadidash", twitter: "epicadidash", youtube: "https://www.youtube.com/@epicadidash", twitch: "https://www.twitch.tv/epicadidash", linkedin: "epicadidash", blogUrl: "", contributions: 0, }, { name: "jaynarayan(Jay)", avatar: JayNarayanAvatar, github: "jaynarayan-vaishnav", twitter: "jaystwtt", blogUrl: "https://bio.link/jaynarayan", contributions: 0, }, { name: "jonnie", avatar: JonnieAvatar, github: "Jonnie-Dev", twitter: "JonnieDev", blogUrl: "", contributions: 0, }, { name: "Mayank", avatar: MayankAvatar, github: "Mayank-KS", twitter: "", blogUrl: "", contributions: 0, }, { name: "Posandu Mapa", avatar: PosanduAvatar, github: "Posandu", twitter: null, blogUrl: "https://www.tronic247.com", contributions: 3, }, { name: "Rakesh.js", avatar: RakeshAvatar, github: "RakeshSangem", twitter: "RakeshSangem8", blogUrl: "", contributions: 0, }, { name: "ShorunTech", avatar: ShorunAvatar, github: "ShorunTech", twitter: "shoruntech", blogUrl: "linkfree.eddiehub.io/ShorunTech", contributions: 0, }, { name: "Siddharth Shyniben", avatar: SiddharthAvatar, github: "SiddharthShyniben", twitter: "SiddharthShyn", blogUrl: "https://blog.siddu.tech/", contributions: 0, }, { name: "Vaibhav", avatar: VaibhavAvatar, github: "singh-vaibhav08", twitter: "singh_vaibhav08", blogUrl: "https://vaibhavsblog.hashnode.dev/", linkedin: "singh-vaibhav08", contributions: 1, }, { name: "DevvSakib", avatar: DevvSakibAvatar, github: "devvsakib", twitter: "devvsakib", blogUrl: "https://devvsakib.me", linkedin: "devvsakib", contributions: null, }, { name: "Ctofanin", avatar: CtofaninAvatar, github: "ctoffanin", twitter: "ctoffaninDev", blogUrl: "", linkedin: "", contributions: null, }, { name: "Haider Ali Punjabi", avatar: HaiderAliAvatar, github: "haideralipunjabi", twitter: "HAliPunjabi", blogUrl: "https://blog.haideralipunjabi.com", linkedin: "haideralipunjabi", contributions: 6, }, { name: "Krish Gupta 🥑", avatar: KrishAvatar, github: "krshkun", twitter: "krshkun", blogUrl: "https://links.krsh.eu.org", linkedin: "krshkun", contributions: null, }, ].sort((a, b) => (a.name > b.name ? 1 : -1)) // const staffMembersAlsoActive = [ // "InHuOfficial", // "avneesh0612", // "ardasevinc", // "AliReza1083", // "avie-dev", // "Dun-sin", // "Njong392", // "FrancescoXX", // "44jax44", // "naomi-lgbt", // "Pradumnasaraf", // "codewithshubhi", // "sumitsaurabh927", // "TechSquidTV", // "tobySolutions", // "Yudai-creator", // "MadhuSaini22", // "krupalitrivedi", // ] /** * @type {Profile[]} */ function sorting(arraytobesorted) { const names = [] const sortedarray = [] arraytobesorted.forEach((object) => { const name = object.name const updatedname = name[0].toUpperCase() + name.substring(1) names.push(updatedname) }) names.sort() names.forEach((object) => { const foundobject = arraytobesorted.find(searchedobject => object.localeCompare(searchedobject.name, undefined, { sensitivity: "accent" }) === 0) sortedarray.push(foundobject) }) return sortedarray } const activeMembers = sorting(staff.concat(base)) export default activeMembers // module.exports = activeMembers // module.exports.base = base ================================================ FILE: src/data/blog.js ================================================ import FreeWeb3Resources from "assets/sources/blog/free-web3-resources-demo-blog.webp" import ContentCreator from "assets/sources/blog/4c.png" const blogs = [ { name: "Francesco Ciulla", title: "FREE Web3 Resources (demo blog)", screenshot: FreeWeb3Resources, screenshotUrl: "https://user-images.githubusercontent.com/18360871/199210192-f5599a23-f0b1-49ff-9c52-2554a72a2c14.png", description: "A list of resources to learn Web3 for FREE", link: "https://github.com/FrancescoXX/free-Web3-resources", twitter: "https://twitter.com/FrancescoCiull4", }, { name: "Francesco Ciulla 2", title: "4C - Content Creator(demo blog)", screenshot: ContentCreator, screenshotUrl: "https://user-images.githubusercontent.com/88102392/229171789-7d74c9bd-946b-494a-97a9-86612fdf2f27.png", description: "The Cool Community of Content Creators", link: "https://github.com/FrancescoXX/4c-site", twitter: "https://twitter.com/FrancescoCiull4", }, ] export default blogs // module.exports = blogs ================================================ FILE: src/data/events.json ================================================ { "events": [ { "name": "4Call", "image": "https://user-images.githubusercontent.com/86878236/210950060-a1e5ec9f-e21f-4a83-97b7-7bb371d5c88a.png", "organizer": "4C Community", "venue": "Discord", "date": "every Saturday @ 1pm GMT", "link": "https://discord.com/channels/784142072763383858/1058733457112567828", "isActive": true } ] } ================================================ FILE: src/data/faq.json ================================================ [ { "questions": "What does \"4C\" stands for?", "answers": "4C stands for \"Cool Community of Content Creators\"." }, { "questions": "What is the goal of \"4C\"? ", "answers": "We discuss Content Creation using Videos, Articles and Social Media. Our goal is to create a decentralized community, where everyone can create some events related to the community on their channels." }, { "questions": "Is \"4C\" open-source and how can I contribute?", "answers": "4C is open source. All contributions are welcome. Visit our contributions page to learn how you can contribute." }, { "questions": "How can I join the community?", "answers": "Join our Discord Server and visit the #start-here channel." }, { "questions": "Is \"4C\" only for experienced content creators?", "answers": "Absolutely no. The community fosters growth on all levels, irrespective of prior experience —a platform where you can talk about your ideas and get opinions on how to execute them." }, { "questions": "What are the benefits of the \"4C\" community?", "answers": "You get support, activities, collaborations, free dedicated content creation webinars (yes, you got it right ! 😄), coffee chat, and a meme channel! " } ] ================================================ FILE: src/data/homepage.js ================================================ import { FaDiscord } from "react-icons/fa" import { FaXTwitter } from "react-icons/fa6" import "react-toastify/dist/ReactToastify.css" export const main = { eyebrow: "👋 ", title: ( <> <div className="">The Cool Community of Content Creators</div> {/* <div> <span className="text-primary"> <span className="text-theme">C</span>ool{" "} </span> <span className="text-primary"> <span className="text-theme">C</span>ommunity </span> </div> <div className="text-x">of</div> <div> <span className="text-primary"> <span className="text-theme">C</span>ontent{" "} </span> <span className="text-primary"> <span className="text-theme">C</span>reators </span> </div> */} </> ), description: ( <> <p> Creating content can be rewarding, but it can also be a challenge to come up with ideas, get your content out there, and get it noticed. </p> <p> Join our online community to connect with other like-minded creators, collaborate on ideas, and motivate each other to create and publish! </p> </> ), primaryLink: ( <a href="https://discord.com/invite/TcmA2kbJeA" className="btn btn-primary" target="_blank" rel="noreferrer" > <FaDiscord /> Join Discord Server </a> ), twitterLink: ( <a href="https://twitter.com/4ccommunityhq" className="btn btn-twitter" target="_blank" rel="noreferrer" > <FaXTwitter /> X (Twitter) </a> ), } ================================================ FILE: src/data/navbar.js ================================================ const pages = [ { href: "/active-members", pageName: "Active Members", }, { href: "/projects", pageName: "Projects", }, { href: "/staff", pageName: "Staff", }, ] export default pages ================================================ FILE: src/data/partnerCommunities.json ================================================ [ { "logo": "https://user-images.githubusercontent.com/81684710/215572719-5bbd7e27-24c4-43bb-a261-33dd368e93bf.png", "community_name": "EddieHub", "sub_desc": "Open Source", "bio": "Collaboration 1st, Code 2nd!!", "website": "https://www.eddiehub.org/" } ] ================================================ FILE: src/data/projects.json ================================================ { "projects": [ { "name": "Francesco Ciulla", "title": "FREE Web3 Resources", "screenshot": "https://user-images.githubusercontent.com/18360871/199210192-f5599a23-f0b1-49ff-9c52-2554a72a2c14.png", "description": "A list of resources to learn Web3 for FREE", "link": "https://github.com/FrancescoXX/free-Web3-resources", "twitter": "https://twitter.com/FrancescoCiull4", "live_link": "https://www.freeweb3resources.com", "stack": [ "All", "React", "CSS", "Others" ] }, { "name": "Pradumna Saraf", "title": "Open Source With Pradumna", "screenshot": "https://user-images.githubusercontent.com/51878265/198830989-51ac5f4c-92f1-4c75-b106-8f82e841a2d2.png", "description": "Contains resources to learn about Open Source, Git, and GitHub.", "link": "https://github.com/Pradumnasaraf/open-source-with-pradumna", "twitter": "https://twitter.com/pradumna_saraf", "live_link": "https://os.pradumnasaraf.dev/#/", "stack": [ "All", "Markdown", "HTML", "CSS", "Others" ] }, { "name": "Susmita Dey", "title": "Sukoon", "screenshot": "https://user-images.githubusercontent.com/98955085/184510782-3f699206-4768-4b3a-aa6d-40c924e13578.png", "description": "The one step solution to get relief from your stress. Live a stress-free life by using this website.", "link": "https://github.com/Susmita-Dey/Sukoon", "twitter": "https://twitter.com/its_SusmitaDey", "live_link": "https://sukoon-stress-free.netlify.app/", "stack": [ "All", "HTML", "CSS", "JS/TS" ] }, { "name": "thegeekyb0y", "title": "FREE Python Resources", "screenshot": "https://user-images.githubusercontent.com/18360871/199207091-a66dac6a-4397-4142-af56-87c941f9e1e3.png", "description": "Compiled list of Free resources to learn Python", "link": "https://github.com/thegeekyb0y/learnpython", "twitter": "https://twitter.com/thegeekyb0y", "live_link": "", "stack": [ "All", "Markdown" ] }, { "name": "Ali Reza", "title": "AniLearn.dev", "screenshot": "https://i.ibb.co/WzY25g1/banner-anilearn.png", "description": "Learning something with animation doesn't get easier than this", "link": "https://github.com/AliReza1083/AniLearn.dev", "twitter": "https://twitter.com/Ali_Developer05", "live_link": "https://www.anilearn.dev/", "stack": [ "All", "Next", "Tailwind", "Markdown", "JS/TS", "Others" ] }, { "name": "Aditya Bisht", "title": "BetterPoll", "screenshot": "https://i.postimg.cc/66Z6kmf0/Capture.png", "description": "A complete campus management android app.", "link": "https://github.com/adityabisht02/BetterPoll-Android", "twitter": "https://twitter.com/AdityaB35550332", "live_link": "", "stack": [ "All", "Others" ] }, { "name": "Akshita Gupta", "title": "Face-X", "screenshot": "https://user-images.githubusercontent.com/18360871/199206838-97ebea3b-a413-412c-ab72-ae7763315b31.png", "description": "Demonstration of different algorithms and operations on faces.", "link": "https://github.com/akshitagupta15june/Face-X", "twitter": "https://twitter.com/Akshita_archer", "live_link": "https://www.youtube.com/watch?v=VK-IaRY9szg", "stack": [ "All", "Others" ] }, { "name": "Krishnansh Agarwal", "title": "Library", "screenshot": "https://i.postimg.cc/P5mgxvDr/Screenshot-20221101-110821-Chrome.jpg", "description": "A basic library management system [only frontend]", "link": "https://github.com/krishnanshagarwal112/Library", "twitter": "https://twitter.com/KrishnanshDev", "live_link": "", "stack": [ "All", "HTML", "CSS", "JS/TS" ] }, { "name": "Becca Lyria", "title": "Becca Lyria", "screenshot": "https://user-images.githubusercontent.com/18360871/201510325-cfd1e1fb-e838-448a-895d-7bc1f492d97c.png", "description": "A community management and moderation bot for Discord.", "link": "https://github.com/beccalyria/discord-bot", "twitter": "https://twitter.com/becca_lyria", "live_link": "https://www.beccalyria.com", "stack": [ "All", "JS/TS" ] }, { "name": "Njong Emy", "title": "Abbreve", "screenshot": "https://images2.imgbox.com/02/5a/8MUFjojh_o.png", "description": "Open source dictionary for slang", "link": "https://github.com/Njong392/Abbreve", "twitter": "https://twitter.com/njong_emy", "live_link": "https://www.abbreve.tech", "stack": [ "All", "React", "Tailwind" ] }, { "name": "Tobiloba Adedeji", "title": "Million.js", "screenshot": "https://i.ibb.co/Hq16Q2L/tobiloba-portfolio.png", "description": "Virtual DOM that makes React faster", "link": "https://github.com/aidenybai/million", "twitter": "https://twitter.com/toby_solutions", "live_link": "https://million.dev", "stack": [ "All", "Javascript", "Typescript" ] }, { "name": "Yudai H", "title": "Yudai Creator Portfolio Website", "screenshot": "https://user-images.githubusercontent.com/18360871/201510239-78ddaa5d-f3d6-4a3b-a88c-d5a2eb324341.png", "description": "Building my portfolio of projects, where I going to turn this website into the center point of my brand.", "link": "https://github.com/Yudai-creator/yudai-creator-definitive", "twitter": "https://twitter.com/creator_yudai", "live_link": "https://yudaicreator.com", "stack": [ "All", "Others" ] }, { "name": "Dunsin", "title": "Code Magic", "screenshot": "https://user-images.githubusercontent.com/78784850/198844365-b79a5bb2-f3bc-47bc-94d6-b6389552b1a5.png", "description": "Get short css code you can use in your applications", "link": "https://github.com/Dun-sin/Code-Magic", "twitter": "https://twitter.com/DunsinWebDev", "live_link": "https://code-magic.vercel.app", "stack": [ "All", "JS/TS" ] }, { "name": "Tamal Das", "title": "Project Milan", "screenshot": "https://user-images.githubusercontent.com/18360871/201510488-73feeba6-b08c-42a0-a985-e8f159eaa869.png", "description": "A hub for users to collaborate with NGOs and make Earth a better place", "link": "https://github.com/IAmTamal/Milan", "twitter": "https://twitter.com/mrTamall", "live_link": "https://milaan.vercel.app", "stack": [ "All", "React", "Others" ] }, { "name": "Avie", "title": "SpacesLounge", "screenshot": "https://i.ibb.co/ZMpDrBM/Spaces-Lounge.png", "description": "Twitter Spaces Host and Speaker's Lounge", "link": "https://github.com/avie-dev/spaceslounge", "twitter": "https://twitter.com/AvieDev", "live_link": "https://spaceslounge.vercel.app", "stack": [ "All", "Tailwind", "Next" ] }, { "name": "J S Vignesh Kanna", "title": "TailwindCSS Bootstrap", "screenshot": "https://user-images.githubusercontent.com/42484705/197696771-9aaf4f6d-1928-4d66-9d2b-01ad479d289a.png", "description": "An opensource tailwindCSS UI component collection", "link": "https://github.com/jsvigneshkanna/tailwind_ui_components", "twitter": "https://twitter.com/jsvigneshkanna", "live_link": "https://tailwindcsscomponents.vercel.app", "stack": [ "All", "Tailwind", "Next" ] }, { "name": "Ibrahim", "title": "Frontend Resources", "screenshot": "https://i.ibb.co/BKt0kn2/Frontend-Resources-Banner.png", "description": "A curated list of resources for Frontend development", "link": "https://github.com/ibrahimraimi/frontend-resources", "twitter": "https://twitter.com/ibrahimraimi_", "live_link": "https://frontend-dev-resources.vercel.app/", "stack": [ "All", "Next", "Markdown" ] }, { "name": "Mahesh Kasbe", "title": "K-Dash", "screenshot": "https://raw.githubusercontent.com/Mahesh-Kasabe/K-Dash/master/Images/overview.png", "description": "Browser Based Kubernetes Real Time Monitoring Tool", "link": "https://github.com/Mahesh-Kasabe/K-Dash", "twitter": "https://twitter.com/maheshstwt", "live_link": "https://youtu.be/0oRW_ZetXoc", "stack": [ "All", "React" ] }, { "name": "Letam", "title": "Letam", "screenshot": "https://i.ibb.co/T4P9757/Letam-image.png", "description": "My portfolio website", "link": "https://github.com/Yagazie-davidson/Portfolio", "twitter": "https://twitter.com/LetamDavidson", "live_link": "https://letam.vercel.app/", "stack": [ "All", "React" ] }, { "name": "Soumyadeep Das Bhowmick", "title": "Santa-Funda", "screenshot": "https://user-images.githubusercontent.com/115442240/209482401-d4a57d6d-0b71-4b9b-8a36-8942ec2c87b8.png", "description": "Wish your friend via this site", "link": "https://github.com/SoumyadeepOSD/Christmas-Gift/tree/master", "twitter": "https://twitter.com/SoumyadeepDasB6", "live_link": "https://soumyadeeposd.github.io/Christmas-Gift/" }, { "name": "Ellams George", "title": "Ellams George", "screenshot": "https://avatars.githubusercontent.com/u/103334963?v=4", "description": "Ellams portfolio v2.0", "link": "https://github.com/Ellamsg/folio2", "twitter": "https://twitter.com/ellamsgeorge1", "live_link": "https://ellamsfolio.netlify.app/" }, { "name": "Suman Paik", "title": "Plant Store", "screenshot": "https://user-images.githubusercontent.com/93247057/214245266-3404f4b8-aa12-4529-86d8-8f2e02bb67db.png", "description": "Select and shop your favourite plant.", "link": "https://github.com/sumanpaikdev/Plant-Store-Online", "twitter": "https://twitter.com/sumanpaikdev", "live_link": "https://shop-plant.netlify.app/", "stack": [ "All", "React", "Tailwind" ] } ] } ================================================ FILE: src/data/stacks.json ================================================ { "stack": [ { "key": 0, "name": "All" }, { "key": 1, "name": "HTML" }, { "key": 2, "name": "CSS" }, { "key": 3, "name": "JS/TS" }, { "key": 4, "name": "React" }, { "key": 5, "name": "Tailwind" }, { "key": 6, "name": "Next" }, { "key": 7, "name": "Markdown" }, { "key": 8, "name": "Others" } ] } ================================================ FILE: src/data/staff.js ================================================ import JaxAvatar from "assets/sources/staff/44jax44.webp" import AliRezaAvatar from "assets/sources/staff/AliReza1083.webp" import AvieAvatar from "assets/sources/staff/avie-dev.webp" import DunsinAvatar from "assets/sources/staff/Dun-sin.webp" import FrancescoAvatar from "assets/sources/staff/FrancescoXX.webp" import GrahamAvatar from "assets/sources/staff/InHuOfficial.webp" import KrupaliAvatar from "assets/sources/staff/krupalitrivedi.webp" import LouellaAvatar from "assets/sources/staff/lovelacecoding.webp" import MadhuAvatar from "assets/sources/staff/MadhuSaini22.webp" import PradumnaAvatar from "assets/sources/staff/Pradumnasaraf.webp" import SumitAvatar from "assets/sources/staff/sumitsaurabh927.webp" import TobiAvatar from "assets/sources/staff/tobySolutions.jpeg" import ElderAvatar from "assets/sources/staff/Elder.webp" import TiyaAvatar from "assets/sources/staff/Tiya.webp" /** * @typedef {Object} Profile * @property {string} name * @property {string} avatar * @property {string?} github * @property {string} description * @property {string?} twitter * @property {string?} blogUrl * @property {number?} contributions */ /** * @type {Profile[]} */ const staff = [ { name: "Graham", avatar: GrahamAvatar, github: "InHuOfficial", description: "Open for new opportunities in 2023", twitter: "Grahamthedev", blogUrl: "https://dev.to/inhuofficial", contributions: 0, }, { name: "Ali Reza", avatar: AliRezaAvatar, github: "AliReza1083", description: "Passionate in Coding, Refugee Boy, Threads about Web Development", twitter: "Ali_Developer05", blogUrl: "https://linkfree.eddiehub.io/AliReza1083", contributions: 0, }, { name: "Avie", avatar: AvieAvatar, github: "avie-dev", description: "BrSE in Japan(YNS)🌸 | Community leader@ http://ossph.org | Community manager| @4ccommunityhq| open source | Spaces Host | Sharing about Tech💻, Japan🇯🇵 & Art", twitter: "AvieDev", blogUrl: "", contributions: 0, }, { name: "Dunsin", avatar: DunsinAvatar, github: "Dun-sin", description: "🧑‍💻18|⚙Building https://code-magic.vercel.app and https://whischat.vercel.app |☯Being real about stuff |🥑Open Source |🎖️Tweeting from my POV |🧒She/Her", twitter: "DunsinWebDev", blogUrl: "https://linktr.ee/DunsinCodes", contributions: 0, }, { name: "Francesco Ciulla", avatar: FrancescoAvatar, github: "FrancescoXX", description: "·Follow me, I will help you with Web3 & DevRel· Building a 1M Community 19%· Docker Captain |@dailydotdev · Public Speaker· 4C founder @4ccommunityhq", twitter: "FrancescoCiull4", youtube: "https://www.youtube.com/c/FrancescoCiulla", twitch: "https://www.twitch.tv/francesco_ciulla", blogUrl: "https://discord.com/invite/TcmA2kbJeA", contributions: 10, }, { name: "JAX", avatar: JaxAvatar, github: "44jax44", description: "I will help you become a better communicator | Tweets on all aspects of communication| Life Health & Fitness Coach | Can communicate in 🇬🇧 🇫🇷 🇱🇧 🇪🇸 🇵🇹", twitter: "44jax44", blogUrl: "https://linktr.ee/44jax44", contributions: 0, }, { name: "Pradumna Saraf", avatar: PradumnaAvatar, github: "Pradumnasaraf", description: "Open Source Advocate | EddieHub Ambassador", twitter: "pradumna_saraf", blogUrl: "", contributions: 0, }, { name: "Sumit", avatar: SumitAvatar, github: "sumitsaurabh927", description: "Explaining tech the way I wish I was taught | Tweets on Javascript, React, Open Source, and Web Development |🎙 Spaces | 🥑 Open Source advocate", twitter: "sumitsaurabh927", blogUrl: "https://sumitsaurabh.hashnode.dev/", contributions: 0, }, { name: "Tobiloba Adedeji", avatar: TobiAvatar, github: "tobySolutions", description: "Frontend Engineer | Accessibility Advocate l Developer Advocate at Million.js", twitter: "toby_solutions", blogUrl: "", linkedin: "tobiloba-adedeji", contributions: 34, }, { name: "Louëlla Creemers", avatar: LouellaAvatar, github: "lovelacecoding", linkedin: "louelladev", description: "Web Developer 🌍 | Public Speaker 🗣️ | .NET & C# 🖥️ | Dad Joke Enthusiast 🤓 | Learning and Joking With You While Working and Studying CS", twitter: "lovelacecoding", twitch: "https://www.twitch.tv/lovelacecoding", blogUrl: "https://lovelacecoding.hashnode.dev/", contributions: null, }, { name: "Madhu Saini", avatar: MadhuAvatar, github: "MadhuSaini22", description: "Full Stack Developer | Open Source Enthusiast", twitter: "MadhuSaini22", blogUrl: "https://madhusaini46810.wixsite.com/original", linkedin: "madhu-saini", contributions: 24, }, { name: "Krupali", description: "20 🚀 || talking about blogging and communities|| web3 and web dev learner | summarising spaces in threads | chillin' in discord servers |books 💜", avatar: KrupaliAvatar, github: "krupalitrivedi", twitter: "chai_really", blogUrl: "", linkedin: "", contributions: null, }, { name: "K. Eldreth aka Elder", github: "", description: "Just another bystander; Lead Dev in robotics", twitter: "Elder_Youth", blogUrl: "", avatar: ElderAvatar, linkedin: "", contributions: null, }, { name: "Tiya Bansal", github: "Tiyabansal", description: "SWE Intern @JPMC, UK | Cloud and Devops | IT Undergraduate", twitter: "TiyaTwts", blogUrl: "", avatar: TiyaAvatar, linkedin: "tiya-bansal", contributions: null, }, ].sort((a, b) => (a.name > b.name ? 1 : -1)) export default staff // module.exports = staff ================================================ FILE: src/data/videos.json ================================================ { "videos": [ { "videoId": "az-ILjdFCe8", "videoTitle": "4C Website - Let's code it", "videoAuthor": "Francesco Ciulla" }, { "videoId": "uIS3hlHJ05o", "videoTitle": "Communities & Content Creators - 4C", "videoAuthor": "Francesco Ciulla" }, { "videoId": "o5UxTeN6OCg", "videoTitle": "4Castle event - Let's GEEK out together", "videoAuthor": "Francesco Ciulla" } ] } ================================================ FILE: src/pages/_app.js ================================================ import "styles/global.css" import React, { useEffect } from "react" import Head from "next/head" import { AnimatePresence } from "framer-motion" import { Poppins, Red_Hat_Display as RedHatDisplay } from "@next/font/google" import pages from "data/navbar" import GoToTop from "components/GoToTop" const poppins = Poppins({ weight: ["400", "500", "600"], variable: "--font-poppins", subsets: ["latin"], display: "swap", }) const redHatDisplay = RedHatDisplay({ weight: ["700"], variable: "--font-redhat", subsets: ["latin"], display: "swap", }) export default function App({ Component, pageProps }) { useEffect(() => { const preloads = [ ...pages.map((page) => page.href), "/", ] preloads.forEach((href) => { const link = document.createElement("link") link.rel = "prefetch" link.href = href document.head.appendChild(link) }) }) return ( <div className={`${poppins.variable} ${redHatDisplay.variable} font-sans`}> <Head> <meta name="description" content="4C: The Cool Community for Content Creators" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </Head> <AnimatePresence mode="wait" onExitComplete={() => window.scrollTo(0, 0)} > <Component {...pageProps} /> </AnimatePresence> <GoToTop/> </div> ) } ================================================ FILE: src/pages/_document.js ================================================ import Document, { Html, Head, Main, NextScript } from "next/document" class MyDocument extends Document { render() { return ( <Html lang="en"> <Head> <link rel="manifest" crossOrigin="use-credentials" href="/manifest.json" /> <link rel="apple-touch-icon" href="/icon.png"></link> <meta name="theme-color" content="#fff" /> </Head> <body className="overflow-x-hidden"> <Main /> <NextScript /> </body> </Html> ) } } export default MyDocument ================================================ FILE: src/pages/active-members.js ================================================ import Layout from "components/Layout" import ActiveMembers from "components/ActiveMembers" export default function Home() { return ( <Layout className="flex flex-col justify-start mt-[7rem]"> <ActiveMembers /> </Layout> ) } ================================================ FILE: src/pages/index.js ================================================ import Blogs from "components/blog-posts" import CommunityPartners from "components/CommunityPartners" import Faq from "components/faq" import GetActivities from "components/GetActivities" import GetVideos from "components/GetVideos" import Layout from "components/Layout" import Main from "components/Main" import { main } from "data/homepage" import { useRouter } from "next/router" import React from "react" export default function Home() { const router = useRouter() if (typeof window !== "undefined") { if (router.pathname === "/") { localStorage.removeItem("active") } } return ( <div> <Layout className="flex flex-col justify-center mt-[13rem] md:mt-[5rem]"> <Main {...main} /> <div className="flex flex-col gap-16"> <GetActivities /> <GetVideos /> <Blogs /> <Faq /> </div> <CommunityPartners /> </Layout> </div> ) } ================================================ FILE: src/pages/joinourteam.js ================================================ import Layout from "components/Layout" import JoinOurTeam from "components/JoinOurTeam" export default function joinOurTeam() { return ( <Layout className="flex flex-col justify-center mt-[9rem]"> <JoinOurTeam /> </Layout> ) } ================================================ FILE: src/pages/projects.js ================================================ import Layout from "components/Layout" import GetProjects from "components/GetProjects" export default function joinOurTeam() { return ( <Layout className="flex flex-col justify-center mt-[7rem]"> <GetProjects /> </Layout> ) } ================================================ FILE: src/pages/staff.js ================================================ import Layout from "components/Layout" import Staff from "components/Staff" export default function Home() { return ( <Layout className="flex flex-col justify-start mt-[7rem]"> <Staff /> </Layout> ) } ================================================ FILE: src/public/manifest.json ================================================ { "theme_color": "#FFF7ED", "background_color": "#EA580C", "display": "standalone", "scope": "/", "start_url": "/", "name": "4c", "description": "The Cool Community For Content Creators", "short_name": "4c", "icons": [] } ================================================ FILE: src/scripts/img.js ================================================ /* eslint-disable eslint-comments/disable-enable-pair */ /* eslint-disable @typescript-eslint/no-var-requires */ const activemembers = require("../data/activemembers") const blogs = require("../data/blog.js") const projects = require("../data/projects.json") const staff = require("../data/staff") const { azelf } = require("azelf") const path = require("path") const { rm } = require("fs/promises") const trevenant = new (require("trevenant")).Trevenant() // a function that makes sentences become url friendly endpoints function urlify(text) { return text .toString() .toLowerCase() .replace(/\s+/g, "-") // Replace spaces with - .replace(/[^\w-]+/g, "") // Remove all non-word chars .replace(/--+/g, "-") // Replace multiple - with single - .replace(/^-+/, "") // Trim - from start of text .replace(/-+$/, "") // Trim - from end of text } async function megaAzelf(url, name, type) { trevenant.info(`Processing ${name}`) await azelf(url, name, { directory: path.join(__dirname, "..", "assets", "sources", type), webp: true, quality: 60, }) trevenant.success(`Finished processing ${name}`) } async function main() { trevenant.info("Cleaning up old images") await rm(path.join(__dirname, "..", "assets", "sources"), { recursive: true, force: true, }) for await (const member of activemembers.base) { megaAzelf( `https://github.com/${member.github}.png`, `${member.github}.webp`, "activemembers", ) } for await (const member of staff) { megaAzelf( `https://github.com/${member.github}.png`, `${member.github}.webp`, "staff", ) } for await (const post of blogs) { trevenant.info(`Processing ${post.title}`) if (post.screenshot === "") return trevenant.warn(`No screenshot for ${post.title}`) await azelf(post.screenshot, `${urlify(post.title)}.webp`, { directory: path.join(__dirname, "..", "assets", "sources", "blog"), webp: true, quality: 60, }) } for await (const project of projects.projects) { trevenant.info(`Processing ${project.titles}`) if (project.screenshot === "") return trevenant.warn(`No screenshot for ${project.titles}`) await azelf(project.screenshot, `${urlify(project.title)}.webp`, { directory: path.join(__dirname, "..", "assets", "sources", "projects"), webp: true, quality: 60, }) } } main() ================================================ FILE: src/styles/global.css ================================================ @tailwind base; @tailwind components; @tailwind utilities; h1, h2, h3, h4, h5, h6 { @apply font-sans; font-family: var(--font-redhat) } .hamburger { display: block; } .bg-theme { background: rgb(68, 18, 115); background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% ); } .hov-bg-theme:hover { box-shadow: 0 0 35px rgba(255, 255, 255, 0.8); } .text-theme { color: #fff; } @media (min-width: 768px) { .text-theme { color: #fff; } } @media (min-width: 1024px) { .hamburger { display: none; } } @media (max-width: 613px) { body .before-multiselect{ @apply bg-transparent shadow-none outline-none backdrop-blur-none; } body #multiselectContainerReact .searchWrapper input { @apply bg-[#FEFEFE] text-[#314c89] w-full border-slate-200 px-3 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500 rounded-3xl bg-opacity-[.2] shadow backdrop-blur-3xl ml-0 p-2; } body #multiselectContainerReact .searchWrapper .chip { @apply mb-3; } .searchIcon { @apply absolute right-8 bottom-[15px]; } } @media (max-width: 430px){ .backToTop{ right: 20px; } } @media (max-width: 400px) { .group { width: 339px; } .main-title { font-size: 2.1875rem; margin-top: 1.25rem; } .main-description { text-align: justify; font-size: 0.9375rem; } .backToTop{ right: 10px; } } @media (max-width: 358px) { .group { width: 310px; } } @media (max-width: 310px) { .projectContainer { width: 93vw; } .group { width: 95vw; } .projDetail { overflow-x: hidden; } } /* .details summary::after { content: ">"; } */ .headTitle { @apply text-2xl md:text-2xl lg:text-3xl; } .btn { @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-md px-8 py-3 font-semibold no-underline antialiased outline-none transition duration-200 ease-in-out focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2; } .btn-primary { @apply translate-x-0 transform rounded-full rounded-bl-none bg-gray-900 font-medium text-white shadow-2xl hover:translate-y-1 hover:bg-[#7289DA] hover:shadow-md; } .btn-twitter { @apply translate-x-0 transform rounded-full rounded-bl-none bg-gray-900 font-medium text-white shadow-2xl hover:translate-y-1 hover:bg-[rgb(29,161,242)] hover:shadow-md; } #multiselectContainerReact { @apply w-full border-slate-200 px-2 outline-none placeholder:text-slate-700 contrast-more:border-slate-400 contrast-more:placeholder:text-slate-500; } #multiselectContainerReact .searchWrapper{ @apply text-[#314c89] border-none flex flex-wrap items-center h-auto; } #multiselectContainerReact .searchWrapper .chip{ @apply mb-0; } #multiselectContainerReact .searchWrapper input{ @apply placeholder:text-slate-700 text-white font-bold ml-2 mt-0; } #get-projects-scroll{ overflow: hidden; } #four-c-logo{ height: auto; width: 56px; } ::-webkit-scrollbar { width: 12px; /* Width of the scrollbar */ } ::-webkit-scrollbar-track { background: #f1f1f1; /* Color of the track */ } ::-webkit-scrollbar-thumb { background-color: #7aace0 ; /* Color of the scroll thumb */ border-radius: 13px; } ================================================ FILE: src/utils/filterUsers.js ================================================ export const FilterUsers = (users, target) => { const filteredUsers = [] for (let i = 0; i < users.length; i++) { const name = users[i].name.toLowerCase() const matcher = target.toLowerCase() if (name.includes(matcher)) { filteredUsers.push(users[i]) } } return filteredUsers } export const FilterUsersByNameAndDesc = (users, target) => { const regex = new RegExp(target, "i") return users.filter((user) => regex.test(user.name) || regex.test(user.description)) } ================================================ FILE: tailwind.config.js ================================================ // eslint-disable-next-line @typescript-eslint/no-var-requires const { fontFamily: _fontFamily } = require("tailwindcss/defaultTheme") /** * @type {import("tailwindcss").Config} */ const tailwindConfig = { content: [ "./src/**/*.{js,ts,jsx,tsx}", ], theme: { container: { center: true, padding: "1rem", }, extend: { screens: { bigScreen: "1100px", laptop: "801px", medium: "450px", break: "500px", mobile: "300px", }, fontFamily: { sans: ["var(--font-poppins)", ..._fontFamily.sans], }, dropShadow: { "3xl": "0 0 10px #0000006e", }, maxWidth: { bodyContainer: "1300px", }, }, }, variants: {}, plugins: [ require("@tailwindcss/typography"), require("@tailwindcss/line-clamp"), ], } module.exports = tailwindConfig