├── .npmrc ├── src ├── env.d.ts ├── components │ ├── ui │ │ ├── icons │ │ │ ├── index.js │ │ │ └── tick.astro │ │ ├── button.astro │ │ └── link.astro │ ├── container.astro │ ├── sectionhead.astro │ ├── newsletter.astro │ ├── ScrollToTop.astro │ ├── logos.astro │ ├── cta.astro │ ├── card.astro │ ├── footer.astro │ ├── pricing.astro │ ├── navbar │ │ ├── dropdown.astro │ │ └── navbar.astro │ ├── hero.astro │ ├── features.astro │ └── contactform.astro ├── assets │ ├── 2024.png │ ├── hero.png │ ├── favicon.ico │ ├── reacts.png │ ├── hero-alt.png │ ├── newsletter.png │ ├── Ninja-amico.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── mstile-150x150.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── arrowUp.svg │ ├── browserconfig.xml │ └── site.webmanifest ├── utils │ ├── all.js │ └── search.js ├── pages │ ├── index.astro │ ├── opensource │ │ ├── programs.md │ │ ├── projects.md │ │ ├── videos.md │ │ └── docs.md │ ├── webdev │ │ ├── docs.md │ │ └── videos.md │ ├── cybersecurity │ │ ├── videos.md │ │ └── books.md │ ├── computer_networks │ │ ├── videos.md │ │ ├── books.md │ │ └── docs.md │ ├── contact.astro │ ├── pricing.astro │ ├── css │ │ ├── books.md │ │ ├── games.md │ │ └── resources.md │ ├── python.astro │ ├── git.astro │ ├── aiml.astro │ ├── cloud.astro │ ├── javascript.astro │ ├── opensource.astro │ ├── frameworks.astro │ ├── blog │ │ ├── will-AI-replace-Humans.md │ │ ├── Top 10 AI-ML-tools and libraries.md │ │ ├── JavaScript Top 10 Tips & Tricks.md │ │ ├── A-Complete-Guide-to-React-Hooks-Discover-Their-Features.md │ │ ├── Here are some Tips That Will Keep You Motivated When Learning To Code As a Beginner In 2023.md │ │ └── creating-personal-blog-with-hugo-and-netlify.md │ ├── webdev.astro │ ├── css.astro │ ├── resource.astro │ ├── cybersecurity.astro │ └── computer_networks.astro └── layouts │ ├── BlogLayout.astro │ ├── ContentLayout.astro │ └── Layout.astro ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature_request.md │ ├── styles.yml │ ├── bug_report.md │ └── docs.yml ├── workflows │ ├── waiting-for-review-labeler.yml │ ├── label.yml │ ├── unassign.yml │ ├── greetings.yml │ ├── astro.yml │ └── codeql.yml ├── FUNDING.yml ├── Pull_Request_Template.md └── pull_request_template.yml ├── .prettierrc ├── public ├── favicon.ico ├── opengraph.jpg ├── screely.png ├── cloudflare.png ├── newsletter.png ├── favicon-16x16.png ├── favicon-32x32.png ├── mstile-150x150.png ├── apple-touch-icon.png ├── robots.txt ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── android-chrome-512x512.png ├── browserconfig.xml ├── site.webmanifest ├── favicon.svg └── safari-pinned-tab.svg ├── .vscode ├── extensions.json └── launch.json ├── .gitignore ├── astro.config.mjs ├── tailwind.config.cjs ├── tsconfig.json ├── package.json ├── LICENSE ├── CONTRIBUTION.md ├── README.md └── CODE_OF_CONDUCT.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true -------------------------------------------------------------------------------- /src/components/ui/icons/index.js: -------------------------------------------------------------------------------- 1 | export { default as Tick } from "./tick.astro"; 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "bracketSameLine": true 5 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/opengraph.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/opengraph.jpg -------------------------------------------------------------------------------- /public/screely.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/screely.png -------------------------------------------------------------------------------- /src/assets/2024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/2024.png -------------------------------------------------------------------------------- /src/assets/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/hero.png -------------------------------------------------------------------------------- /public/cloudflare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/cloudflare.png -------------------------------------------------------------------------------- /public/newsletter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/newsletter.png -------------------------------------------------------------------------------- /src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/favicon.ico -------------------------------------------------------------------------------- /src/assets/reacts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/reacts.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/hero-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/hero-alt.png -------------------------------------------------------------------------------- /src/assets/newsletter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/newsletter.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | 4 | Sitemap: https://resource-gallery.pages.dev/sitemap-index.xml -------------------------------------------------------------------------------- /src/assets/Ninja-amico.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/Ninja-amico.png -------------------------------------------------------------------------------- /src/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/mstile-150x150.png -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/android-chrome-256x256.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Astrodevil/resource-gallery/HEAD/src/assets/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/components/container.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { class: className } = Astro.props; 3 | --- 4 | 5 |
6 | 7 |
8 | -------------------------------------------------------------------------------- /src/assets/arrowUp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/utils/all.js: -------------------------------------------------------------------------------- 1 | /** */ 2 | export const getFormattedDate = (date) => 3 | date 4 | ? new Date(date).toLocaleDateString("en-us", { 5 | year: "numeric", 6 | month: "short", 7 | day: "numeric", 8 | }) 9 | : ""; 10 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.github/workflows/waiting-for-review-labeler.yml: -------------------------------------------------------------------------------- 1 | name: Waiting For Review Labeler 2 | 3 | on: 4 | schedule: 5 | # Crontab Every Hour 6 | - cron: '0 * * * *' 7 | 8 | jobs: 9 | action: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: kentaro-m/waiting-for-review-labeler@main 13 | with: 14 | hours-before-add-label: 24 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | 5 | # dependencies 6 | node_modules/ 7 | 8 | # logs 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | pnpm-debug.log* 13 | 14 | 15 | # environment variables 16 | .env 17 | .env.production 18 | 19 | # macOS-specific files 20 | .DS_Store 21 | 22 | #ignored package.json files 23 | package.json 24 | package-lock.json 25 | -------------------------------------------------------------------------------- /.github/workflows/label.yml: -------------------------------------------------------------------------------- 1 | name: Labeling new issue 2 | on: 3 | issues: 4 | types: ['opened'] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: Renato66/auto-label@v2 10 | with: 11 | repo-token: ${{ secrets.GITHUB_TOKEN }} 12 | ignore-comments: true 13 | labels-synonyms: '{"gssoc23":["gssoc","GSSoC23","GSSOC","Gssoc23","Gssoc"]}' 14 | -------------------------------------------------------------------------------- /src/components/sectionhead.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { align = "center" } = Astro.props; 3 | --- 4 | 5 |
6 |

7 | Title 8 |

9 |

10 | Some description goes here 11 |

12 |
13 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import tailwind from "@astrojs/tailwind"; 3 | import image from "@astrojs/image"; 4 | import mdx from "@astrojs/mdx"; 5 | import sitemap from "@astrojs/sitemap"; 6 | 7 | export default defineConfig({ 8 | site: "https://resourcegallery.live/", 9 | integrations: [ 10 | tailwind(), 11 | image({ 12 | serviceEntryPoint: "@astrojs/image/sharp", 13 | }), 14 | mdx(), 15 | sitemap(), 16 | ], 17 | 18 | }); 19 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | const defaultTheme = require("tailwindcss/defaultTheme"); 3 | module.exports = { 4 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 5 | theme: { 6 | extend: { 7 | zIndex: { 8 | '999': 999, 9 | }, 10 | fontFamily: { 11 | sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans], 12 | }, 13 | }, 14 | }, 15 | plugins: [require("@tailwindcss/typography")], 16 | }; 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/base", 3 | "compilerOptions": { 4 | "baseUrl": "src", 5 | "paths": { 6 | "@lib/*": [ 7 | "lib/*" 8 | ], 9 | "@utils/*": [ 10 | "utils/*" 11 | ], 12 | "@components/*": [ 13 | "components/*" 14 | ], 15 | "@layouts/*": [ 16 | "layouts/*" 17 | ], 18 | "@assets/*": [ 19 | "assets/*" 20 | ], 21 | "@pages/*": [ 22 | "pages/*" 23 | ] 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [Astrodevil] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: astrodevil 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | # custom: ['Replace with a link'] 13 | -------------------------------------------------------------------------------- /src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@components/container.astro"; 3 | import Cta from "@components/cta.astro"; 4 | import Features from "@components/features.astro"; 5 | import Footer from "@components/footer.astro"; 6 | import Hero from "@components/hero.astro"; 7 | import Logos from "@components/logos.astro"; 8 | import Layout from "@layouts/Layout.astro"; 9 | import Newsletter from "@components/newsletter.astro"; 10 | import ScrollToTop from "@components/ScrollToTop.astro"; 11 | --- 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/components/ui/icons/tick.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const { class: className } = Astro.props; 3 | --- 4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/opensource/programs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Programs" 3 | excerpt: "Resource Gallery - Open Source | We bring written resources realated to open source technoloy." 4 | publishDate: "2023-02-12T11:39:36.050Z" 5 | image: "https://images.unsplash.com/photo-1676049938069-c8ec461ab732?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" 6 | # category: "Document" 7 | author: "Mr. Ånand" 8 | layout: "@layouts/ContentLayout.astro" 9 | tags: [opensource,programs] 10 | --- 11 | 12 | ## [Google Summer of Code](https://summerofcode.withgoogle.com/) 13 | 14 | ## [GirlScript Summer of Code](https://gssoc.girlscript.tech/) 15 | 16 | ## [Hacktoberfest](https://hacktoberfest.com/) 17 | 18 | ## [MLH Fellowship](https://fellowship.mlh.io/) 19 | 20 | ## [Outreachy](https://www.outreachy.org/) 21 | 22 | ## [Season of KDE](https://season.kde.org/) 23 | -------------------------------------------------------------------------------- /src/pages/webdev/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Documentation" 3 | excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." 4 | publishDate: "2023-01-24T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1521405305633-c75900143740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80" 7 | category: "Tutorials" 8 | author: "Janette Lynch" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [webdev, tailwindcss, frontend] 11 | --- 12 | 13 | 14 | ## askjahjdsa 15 | sdfsafd 16 | dfddddfjkhsjsjkdhhhhhhhhhhhhhhhhhsakjdiwuqiljfskaef 17 | gfdgjkfdgfd 18 | c 19 | - dsskjsdnsdkfd 20 | 21 | ddsfsdfds 22 | [dsjfhdkjd](www.mranand.com) 23 | 24 | **kasdjad** -------------------------------------------------------------------------------- /src/components/newsletter.astro: -------------------------------------------------------------------------------- 1 |
2 | 6 |
7 | 8 | 32 | -------------------------------------------------------------------------------- /src/components/ui/button.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | size?: "md" | "lg"; 4 | block?: boolean; 5 | style?: "outline" | "primary" | "inverted"; 6 | class?: string; 7 | [x: string]: any; 8 | } 9 | 10 | const { 11 | size = "md", 12 | style = "primary", 13 | block, 14 | class: className, 15 | ...rest 16 | } = Astro.props; 17 | 18 | const sizes = { 19 | md: "px-5 py-2.5", 20 | lg: "px-6 py-3", 21 | }; 22 | 23 | const styles = { 24 | outline: "border-2 border-black hover:bg-black text-black hover:text-white", 25 | primary: 26 | "bg-black text-white hover:bg-slate-900 border-2 border-transparent", 27 | }; 28 | --- 29 | 30 | 41 | -------------------------------------------------------------------------------- /src/components/ScrollToTop.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Icon } from "astro-icon"; 3 | import { Picture } from "@astrojs/image/components"; 4 | import arrowUp from "assets/arrowUp.svg"; 5 | --- 6 | 7 |
8 |
9 | 18 |
19 |
20 | 27 | -------------------------------------------------------------------------------- /.github/workflows/unassign.yml: -------------------------------------------------------------------------------- 1 | name: Example 2 | 3 | on: 4 | schedule: 5 | - cron: '12 22 * * *' # Runs at 22:12 UTC every day 6 | 7 | jobs: 8 | # Best used in combination with actions/stale to assign a Stale label 9 | 10 | unassign-issues-labeled-waiting-for-contributor-after-7-days-of-inactivity: 11 | name: Unassign issues labeled "Wartet auf Contributor" after 7 days of inactivity. 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: boundfoxstudios/action-unassign-contributor-after-days-of-inactivity@main 15 | with: 16 | last-activity: 7 # After how many days the issue should get unassigned 17 | labels: 'Stale' # Only search for issues containing this labels (comma-separated) 18 | exempt-assignees: 'Octo,Cat' # Exempt some assignees from being unassigned 19 | labels-to-remove: 'Stale' # Labels to remove after unassigning an issue 20 | message: 'Automatically unassigned after 7 days of inactivity.' 21 | -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | on: 2 | fork: 3 | push: 4 | branches: [main] 5 | issues: 6 | types: [opened] 7 | pull_request_target: 8 | types: [opened] 9 | 10 | jobs: 11 | welcome: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v1 15 | - uses: EddieHubCommunity/gh-action-community/src/welcome@main 16 | with: 17 | github-token: ${{ secrets.GITHUB_TOKEN }} 18 | issue-message: "

Hey👋🏼, @${{ github.actor }}, thank you for opening an issue. You need to update or make PR in under 7 days

" 19 | pr-message: "

Hey👋🏼, @${{ github.actor }}, thank you for opening a pull request.

" 20 | footer: "Soon the maintainers/owner will review it and provide you with feedback/suggestions.
If you think it's something urgent, feel free to reach out to Anand on Twitter.


Give us a ⭐ to show some support
Keep Contributing 🚀" 21 | -------------------------------------------------------------------------------- /src/utils/search.js: -------------------------------------------------------------------------------- 1 | // Get the search input element and the list of blog posts 2 | const searchInput = document.querySelector('.search-bar input[type="text"]'); 3 | const blogList = document.querySelector('.grid'); 4 | 5 | // Function to handle the search 6 | function handleSearch(event) { 7 | const searchTerm = event.target.value.toLowerCase(); 8 | const posts = document.querySelectorAll('.grid li'); 9 | 10 | posts.forEach((post) => { 11 | const title = post.querySelector('h2').textContent.toLowerCase(); 12 | const author = post.querySelector('.text-gray-400').textContent.toLowerCase(); 13 | 14 | // Show or hide the post based on the search term 15 | if (title.includes(searchTerm) || author.includes(searchTerm)) { 16 | post.style.display = 'block'; 17 | } else { 18 | post.style.display = 'none'; 19 | } 20 | }); 21 | } 22 | 23 | // Attach the search event listener to the input field 24 | searchInput.addEventListener('input', handleSearch); 25 | -------------------------------------------------------------------------------- /src/pages/opensource/projects.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Projects" 3 | excerpt: "Resource Gallery - Open Source | We bring written resources realated to open source technoloy." 4 | publishDate: "2023-01-23T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1587620931276-d97f425f62b9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1331&q=80" 7 | # category: "Document" 8 | author: "Mr. Ånand" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [opensource,document] 11 | --- 12 | 13 | ## [GitHub Explore](https://github.com/explore) 14 | ## [Awesome Open Source](https://awesomeopensource.com/) 15 | ## [CodeTriage](https://www.codetriage.com/) 16 | ## [Good First Issue](https://goodfirstissue.dev/) 17 | 18 | 19 | 20 | ## [Up For Grabs](https://up-for-grabs.net/#/) 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/basics", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro build", 10 | "preview": "astro preview", 11 | "astro": "astro" 12 | }, 13 | "dependencies": { 14 | "16": "^0.0.2", 15 | "@astro-community/astro-embed-twitter": "^0.2.2", 16 | "@astro-community/astro-embed-youtube": "^0.2.2", 17 | "@astrojs/image": "^0.11.6", 18 | "@astrojs/mdx": "^0.11.6", 19 | "@astrojs/netlify": "^1.3.0", 20 | "@astrojs/sitemap": "^1.0.0", 21 | "@astrojs/tailwind": "^2.1.3", 22 | "@fontsource/inter": "^4.5.14", 23 | "astro": "^1.9.2", 24 | "astro-embed": "^0.2.1", 25 | "astro-feather-icons": "^1.0.2", 26 | "astro-icon": "^0.8.0", 27 | "astro-navbar": "^1.1.5", 28 | "astro-seo": "^0.6.1", 29 | "tailwindcss": "^3.2.4" 30 | }, 31 | "devDependencies": { 32 | "@tailwindcss/typography": "^0.5.8", 33 | "sharp": "^0.32.6", 34 | "typescript": "^5.3.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/components/logos.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // @ts-ignore 3 | import { Icon } from "astro-icon"; 4 | --- 5 | 6 |
7 |

Find Resources related to various technologies

8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /src/components/cta.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Link from "./ui/link.astro"; 3 | --- 4 | 5 |
7 |

8 | Learn technologies faster 9 |

10 |

11 | Access resource of any technology or field and learn at your own pace. 12 |

14 | 17 | Get Started 18 |
19 | 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 ZeroOctave 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "💡 Feature Request" 3 | about: Create a new ticket for a new feature request 4 | title: "💡 [REQUEST] - " 5 | labels: [ 6 | "new feature" 7 | ] 8 | --- 9 | 10 | - [ ] I am from GSSoC23. 11 | - [ ] I would like to be assigned this task. 12 | * fill [x] to check the boxes. 13 | --- 14 | 15 | | Section | Description | 16 | |----------------------------|-------------| 17 | | **Concise Description** |Write a concise and appropriate description of the feature request | 18 | | **Solution Proposed** |Describe the solution you would want| 19 | | **Alternative Solutions** |Describe any alternative solutions you can think of| 20 | | **Additional Context** |Write any other contexts related to the feature request| 21 | | **Screenshots** |[Provide screenshots here]| 22 | 23 | ### Code of Conduct 24 | 25 | By submitting this issue, you agree to follow our Code of Conduct. 26 | 27 | - [ ] I follow the Contributing Guidelines of this project. 28 | - [ ] I have checked the current issues for duplicate problems. 29 | - [ ] I have read the readme of this repository. 30 | -------------------------------------------------------------------------------- /src/components/ui/link.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | href: string; 4 | target:string; 5 | size?: "md" | "lg"; 6 | block?: boolean; 7 | 8 | style?: "outline" | "primary" | "inverted" | "muted"; 9 | class?: string; 10 | [x: string]: any; 11 | } 12 | 13 | const { 14 | href, 15 | block, 16 | target="_blank", 17 | size = "lg", 18 | style = "primary", 19 | class: className, 20 | ...rest 21 | } = Astro.props; 22 | 23 | const sizes = { 24 | lg: "px-5 py-2.5", 25 | md: "px-4 py-2", 26 | }; 27 | 28 | const styles = { 29 | outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ", 30 | primary: "bg-black text-white hover:bg-gray-800 border-2 border-transparent", 31 | inverted: "bg-white text-black border-2 border-transparent", 32 | muted: "bg-gray-100 hover:bg-gray-200 border-2 border-transparent", 33 | }; 34 | --- 35 | 36 | <a 37 | 38 | href={href} 39 | target={target} 40 | {...rest} 41 | class:list={[ 42 | "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200", 43 | block && "w-full", 44 | sizes[size], 45 | styles[style], 46 | className, 47 | ]} 48 | ><slot /> 49 | </a> 50 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/styles.yml: -------------------------------------------------------------------------------- 1 | name: Style Changing Request 2 | description: Suggest a style designs 3 | title: '[style]: ' 4 | labels: ['enhancement'] 5 | 6 | body: 7 | - type: markdown 8 | attributes: 9 | value: | 10 | Thanks for taking the time to fill out this template! 11 | - type: textarea 12 | id: style-idea 13 | attributes: 14 | label: What's the style idea? 15 | placeholder: Add descriptions 16 | validations: 17 | required: true 18 | - type: textarea 19 | id: screenshots 20 | attributes: 21 | label: Add screenshots 22 | description: Add screenshots to show the demo 23 | placeholder: Add screenshots 24 | - type: checkboxes 25 | id: terms 26 | attributes: 27 | label: Code of Conduct 28 | description: By submitting this issue, you agree to follow our Code of Conduct 29 | options: 30 | - label: I agree to follow this project's Code of Conduct 31 | required: true 32 | - label: I have read the [Contributing Guidelines](https://github.com/ZeroOctave/resource-gallery/blob/main/CONTRIBUTION.md) 33 | required: true 34 | - type: checkboxes 35 | id: additional-options 36 | attributes: 37 | label: Additional Options 38 | options: 39 | - label: I'm a GSSoC'23 contributor 40 | - label: I want to work on this issue 41 | -------------------------------------------------------------------------------- /CONTRIBUTION.md: -------------------------------------------------------------------------------- 1 | # Welcome to Resource Gallery contributing guide 2 | 3 | Firstly, Thanks for taking the time to contribute! Your contributions are greatly appreciated. 4 | 5 | ## New contributor guide 6 | 7 | To get an overview of the project, read the [README](README.md). 8 | ## Table of Content 9 | - [How To Contribute](#how-to-contribute) 10 | - [Ask Questions](#ask-questions) 11 | 12 | ## How To Contribute 13 | 14 | - Fork the project on GitHub, clone it on your PC. 15 | - If you spot a problem with the docs, [search if an issue already exists](https://github.com/ZeroOctave/resource-gallery/issues). If a related issue doesn't exist, you can open a new issue. 16 | - If you'd like to work on an issue, please ask the creator of the issue to assign it to you. This helps to keep the workflow streamlined. 17 | - Create a new branch for your contribution and make the changes you want to make. (Always check for updates on the main branch before creating a pull request to avoid merge conflicts.) 18 | - The pull request should mention the issue it is trying to solve and should be linked to it. 19 | - Make sure to make the appropriate changes in the README.md file if you are adding a new script or feature. 20 | 21 | ### Ask Questions 22 | If you want to ask a question, join the 'resource-gallery' project channel on the GSSoC discord server. You can self-assign it in the #self-roles channel. 23 | -------------------------------------------------------------------------------- /.github/Pull_Request_Template.md: -------------------------------------------------------------------------------- 1 | ## Related Issue 2 | <!-- 3 | Provide information about the issue or bug that is being addressed. 4 | --> 5 | 6 | Closes: #[issue number] 7 | 8 | 9 | ## Description of Changes 10 | <!-- 11 | Clearly and concisely describe the modifications made to successfully resolve the assigned issue. Include any pertinent information about new files or any other relevant details. 12 | 13 | For example: 14 | - Added a new function to handle XYZ. 15 | - Updated the ABC module to fix the bug. 16 | - Refactored code in the DEF class for improved performance. 17 | --> 18 | 19 | ## Checklist: 20 | 21 | <!-- 22 | Mark the checkboxes to indicate completion. Example: 23 | - [x] My code follows the style guidelines of this project. 24 | --> 25 | 26 | - [ ] My code adheres to the established style guidelines of this project. 27 | - [ ] I have conducted a self-review of my code. 28 | - [ ] I have included comments in areas that may be difficult to understand. 29 | - [ ] I have made corresponding updates to the project documentation. 30 | - [ ] My changes have not introduced any new warnings. 31 | 32 | 33 | ## Screenshots 34 | 35 | | Original | Updated | 36 | | :-----------------: | :------------------: | 37 | | ![Original screenshot](link) | ![Updated screenshot](link) | 38 | 39 | 40 | Please provide any necessary screenshots to illustrate the changes made. 41 | -------------------------------------------------------------------------------- /src/pages/cybersecurity/videos.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Videos" 3 | excerpt: "Resource Gallery - Computer Networks | We bring video resources realated to Cyber Security." 4 | publishDate: "2023-07-03T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://shorturl.at/wBFJ6" 7 | # category: "Tutorials" 8 | author: "Mr. Sanghdeep" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [cybersecurity,document] 11 | 12 | --- 13 | 14 | 15 | ## Essential Cybersecurity Tips !!! 16 | <iframe width="100%" src="https://www.youtube.com/embed/_0W-7FLef1E" title="Essential Cybersecurity Tips" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 17 | 18 | ## Cyber Security Full Course. 19 | 20 | <iframe width="100%" src="https://www.youtube.com/embed/videoseries?list=PL9ooVrP1hQOGPQVeapGsJCktzIO4DtI4_" title="Learn Cyber Security for FREE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 21 | 22 | ## Protect Your Digital Privacy 23 | <iframe width="100%" src="https://www.youtube.com/embed/qZE45J-MIUg" title="Digital Privacy & Security Online" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 24 | -------------------------------------------------------------------------------- /src/components/card.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string; 4 | body: string; 5 | href: string; 6 | } 7 | 8 | const { href, title, body } = Astro.props; 9 | --- 10 | 11 | <li class="link-card"> 12 | <a href={href}> 13 | <h2> 14 | {title} 15 | <span>→</span> 16 | </h2> 17 | <p> 18 | {body} 19 | </p> 20 | </a> 21 | </li> 22 | <style> 23 | .link-card { 24 | list-style: none; 25 | display: flex; 26 | padding: 0.15rem; 27 | background-color: white; 28 | background-image: var(--accent-gradient); 29 | background-size: 400%; 30 | border-radius: 0.5rem; 31 | background-position: 100%; 32 | transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 33 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 34 | } 35 | 36 | .link-card > a { 37 | width: 100%; 38 | text-decoration: none; 39 | line-height: 1.4; 40 | padding: 1rem 1.3rem; 41 | border-radius: 0.35rem; 42 | color: #111; 43 | background-color: white; 44 | opacity: 0.8; 45 | } 46 | h2 { 47 | margin: 0; 48 | font-size: 1.25rem; 49 | transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); 50 | } 51 | p { 52 | margin-top: 0.5rem; 53 | margin-bottom: 0; 54 | color: #444; 55 | } 56 | .link-card:is(:hover, :focus-within) { 57 | background-position: 0; 58 | } 59 | .link-card:is(:hover, :focus-within) h2 { 60 | color: rgb(var(--accent)); 61 | } 62 | </style> 63 | -------------------------------------------------------------------------------- /src/components/footer.astro: -------------------------------------------------------------------------------- 1 | <script src="https://kit.fontawesome.com/c27622f79f.js" crossorigin="anonymous"></script> 2 | <footer class="my-20"> 3 | <div class = ' flex gap-8 md:gap-10 items-center justify-center mb-10 flex-wrap'> 4 | <a target="_blank" href="https://twitter.com/astrodevil_" role="button"><i class="fa-brands fa-twitter fa-xl" style="color: #3e99d1; "></i></a> 5 | <a target="_blank" href="https://www.instagram.com/codes.astro/" role="button"><i class="fa-brands fa-instagram fa-xl" style="color: #ff2407e5;"></i></a> 6 | <a target="_blank" href="https://github.com/ZeroOctave/resource-gallery" role="button"><i class="fa-brands fa-github fa-xl" style="color: #000000;"></i></a> 7 | </a> 8 | 9 | </div> 10 | <p class="text-center text-sm text-slate-500"> 11 | Copyright © {new Date().getFullYear()} <a 12 | href="https://mranand.com" 13 | target="_blank" 14 | rel="noopener" 15 | class="hover:underline"> 16 | Mr. Ånand 17 | </a>. All rights reserved. 18 | </p> 19 | <!-- 20 | Can we ask you a favor 🙏 21 | Please keep this backlink on your website if possible. 22 | or Purchase a commercial license from https://web3templates.com 23 | --> 24 | <p class="text-center text-xs text-slate-500 mt-1"> 25 | Theme by <a 26 | href="https://web3templates.com" 27 | target="_blank" 28 | rel="noopener" 29 | class="hover:underline"> 30 | Web3Templates 31 | </a> 32 | </p> 33 | </footer> 34 | -------------------------------------------------------------------------------- /src/components/pricing.astro: -------------------------------------------------------------------------------- 1 | <!-- --- 2 | import { Tick } from "@components/ui/icons"; 3 | import Link from "@components/ui/link.astro"; 4 | 5 | const { plan } = Astro.props; 6 | --- 7 | 8 | <div> 9 | <div 10 | class="flex flex-col w-full order-first lg:order-none border-2 border-[#D8DEE9] border-opacity-50 py-5 px-6 rounded-md"> 11 | <div class="text-center"> 12 | <h4 class="text-lg font-medium text-gray-400">{plan.name}</h4><p 13 | class="mt-3 text-4xl font-bold text-black md:text-4xl"> 14 | { 15 | plan.price && typeof plan.price === "object" 16 | ? plan.price.monthly 17 | : plan.price 18 | } 19 | </p> 20 | { 21 | plan.price.original && ( 22 | <p class="mt-1 text-xl font-medium text-gray-400 line-through md:text-2xl"> 23 | {plan.price.original} 24 | </p> 25 | ) 26 | } 27 | 28 | 29 | </div><ul class="grid mt-8 text-left gap-y-4"> 30 | { 31 | plan.features.map((item) => ( 32 | <li class="flex items-start gap-3 text-gray-800"> 33 | <Tick class="w-6 h-6" /> 34 | <span>{item}</span> 35 | </li> 36 | )) 37 | } 38 | </ul><div class="flex mt-8"> 39 | <Link 40 | href={plan.button.link || "#"} 41 | block 42 | style={plan.popular ? "primary" : "outline"}> 43 | {plan.button.text || "Get Started"} 44 | </Link> 45 | </div> 46 | </div> 47 | </div> --> 48 | -------------------------------------------------------------------------------- /src/pages/computer_networks/videos.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Videos" 3 | excerpt: "Resource Gallery - Computer Networks | We bring video resources realated to Computer Networks." 4 | publishDate: "2023-06-03T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1334&q=80" 7 | # category: "Tutorials" 8 | author: "Mr. Kartik" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [computer-networks,document] 11 | 12 | --- 13 | 14 | 15 | ## What is Network ? 16 | 17 | <iframe width="100%" src="https://www.youtube.com/embed/S7MNX_UD7vY?list=PLIhvC56v63IJVXv0GJcl9vO5Z6znCVb1P" title="What is a Network?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 18 | 19 | ## Certifications in Computer Networking. 20 | 21 | <iframe width="100%" src="https://www.youtube.com/embed/APlR80rT6fU" title="Top 5 Networking Certs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 22 | 23 | ## Network Protocols 24 | <iframe width="100%" src="https://www.youtube.com/embed/Cahex02YJc8" title="What are protocols?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 25 | 26 | -------------------------------------------------------------------------------- /src/components/navbar/dropdown.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Dropdown, DropdownItems } from "astro-navbar"; 3 | const { title, lastItem, children } = Astro.props; 4 | --- 5 | 6 | <li class="relative"> 7 | <Dropdown class="group"> 8 | <button 9 | class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900"> 10 | <span>{title}</span> 11 | <svg 12 | xmlns="http://www.w3.org/2000/svg" 13 | fill="none" 14 | viewBox="0 0 24 24" 15 | stroke-width="3" 16 | stroke="currentColor" 17 | class="w-3 h-3 mt-0.5 group-open:rotate-180"> 18 | <path 19 | stroke-linecap="round" 20 | stroke-linejoin="round" 21 | d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path> 22 | </svg> 23 | </button> 24 | <DropdownItems> 25 | <div 26 | class:list={[ 27 | "lg:absolute w-full lg:w-48", 28 | lastItem 29 | ? "lg:right-0 origin-top-right" 30 | : "lg:left-0 origin-top-left", 31 | ]}> 32 | <div 33 | class="px-3 lg:py-2 bg-slate-300 bg-opacity-100 lg:rounded-md lg:shadow lg:border flex flex-col"> 34 | { 35 | children.map((item) => ( 36 | <a 37 | href={item.path} 38 | class="py-1 text-blue-600 hover:text-gray-900 39 | 40 | "> 41 | {item.title} 42 | </a> 43 | )) 44 | } 45 | </div> 46 | </div> 47 | </DropdownItems> 48 | </Dropdown> 49 | </li> 50 | -------------------------------------------------------------------------------- /public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | <?xml version="1.0" standalone="no"?> 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 3 | "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg" 5 | width="280.000000pt" height="280.000000pt" viewBox="0 0 280.000000 280.000000" 6 | preserveAspectRatio="xMidYMid meet"> 7 | <metadata> 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | </metadata> 10 | <g transform="translate(0.000000,280.000000) scale(0.100000,-0.100000)" 11 | fill="#000000" stroke="none"> 12 | <path d="M0 1400 l0 -1400 1400 0 1400 0 0 1400 0 1400 -1400 0 -1400 0 0 13 | -1400z m1757 465 c55 -16 120 -71 150 -127 25 -47 25 -179 -1 -230 -42 -85 14 | -137 -142 -254 -151 -41 -3 -55 -1 -59 10 -8 20 10 29 68 36 149 18 243 186 15 | 180 322 -36 77 -123 134 -206 136 -40 1 -45 3 -25 9 40 13 93 11 147 -5z m-68 16 | -101 c2 -2 -6 -4 -19 -4 -37 0 -112 -31 -142 -58 -28 -25 -58 -98 -58 -138 0 17 | -21 -17 -34 -44 -34 -22 0 1 118 32 167 19 30 77 65 121 73 33 6 100 2 110 -6z 18 | m-243 -321 c12 -27 18 -64 18 -128 1 -81 -2 -95 -28 -142 -17 -31 -35 -51 -45 19 | -51 -9 1 -27 -2 -41 -7 -24 -7 -24 -7 -9 11 9 11 28 49 43 86 22 56 26 82 26 20 | 167 0 56 4 101 9 101 5 0 17 -17 27 -37z m-252 1 c9 -3 16 -12 16 -20 0 -14 21 | -11 -17 -84 -29 -105 -17 -186 -116 -186 -227 0 -130 98 -226 233 -229 l52 -2 22 | -52 -10 c-70 -13 -132 -2 -186 34 -77 50 -117 126 -117 220 0 132 92 235 232 23 | 258 71 12 74 12 92 5z m187 -24 c5 0 9 -7 9 -16 0 -23 -44 -14 -48 10 -3 14 0 24 | 17 13 12 9 -3 21 -6 26 -6z m-76 -370 c0 -29 -117 -40 -170 -16 l-30 14 40 -5 25 | c23 -2 57 2 80 11 48 18 80 17 80 -4z"/> 26 | </g> 27 | </svg> 28 | -------------------------------------------------------------------------------- /src/pages/webdev/videos.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Videos" 3 | excerpt: "Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non potenti. Torquent hac sociosqu eleifend potenti." 4 | publishDate: "2023-01-24T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1521405305633-c75900143740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80" 7 | category: "Tutorials" 8 | author: "Janette Lynch" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [webdev, tailwindcss, frontend] 11 | 12 | --- 13 | 14 | ## askjahjdsa 15 | sdfsafd 16 | dfddddfjkhsjsjkdhhhhhhhhhhhhhhhhhsakjdiwuqiljfskaef 17 | gfdgjkfdgfd 18 | c 19 | - dsskjsdnsdkfd 20 | 21 | <iframe width="853" height="505" src="https://www.youtube.com/embed/PbjHxIuHduU" title="The best stack for your next project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 22 | 23 | 24 | 25 | <blockquote class="twitter-tweet" data-lang="en" data-theme="dark"><p lang="en" dir="ltr">Day 2 of <a href="https://twitter.com/hashtag/buildinpublic?src=hash&ref_src=twsrc%5Etfw">#buildinpublic</a> <br><br>✅Able to create page and layouts under resource section.<br><br>🧑🏼‍💻Will add proper home page and meta contents <a href="https://t.co/AYpzPycVQq">pic.twitter.com/AYpzPycVQq</a></p>— Mr. Ånand | JavaScript🟨🟩🟩 (@Astrodevil_) <a href="https://twitter.com/Astrodevil_/status/1617801941639364609?ref_src=twsrc%5Etfw">January 24, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 26 | 27 | 28 | ddsfsdfds 29 | [dsjfhdkjd](www.mranand.com) 30 | 31 | **kasdjad** -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "🐛 Bug Report" 3 | about: Create a new ticket for a bug. 4 | title: "🐛 [BUG] - <title>" 5 | labels: [ 6 | "bug" 7 | ] 8 | --- 9 | ## 🐛 Bug Report Form 10 | 11 | | | | 12 | |----------------|---------------------| 13 | | **Description** | Please provide a clear and concise description of the bug | 14 | | **Reproduction URL** | Please provide your GitHub URL to reproduce the issue | 15 | | **Reproduction Steps** | 1. Step 1...<br>2. Step 2...<br>3. Step 3...<br>4. Step 4... | 16 | | **Screenshots** | ![Screenshot 1](screenshot1.png) | 17 | | **Logs** | Relevant log output goes here | 18 | | **Additional Context** | Please provide any other relevant information about the problem | 19 | 20 | 🌐 **Browsers** 21 | Which browsers are you experiencing the problem on? (Select all that apply) 22 | 23 | - [ ] Chrome 24 | - [ ] Firefox 25 | - [ ] Safari 26 | - [ ] Microsoft Edge 27 | - [ ] Opera 28 | - [ ] Brave 29 | 30 | 💻 **OS** 31 | What is the impacted environment (operating system)? (Select all that apply) 32 | 33 | - [ ] Windows 34 | - [ ] Linux 35 | - [ ] Mac 36 | - [ ] iOS 37 | - [ ] Android 38 | 39 | 40 | 📝 **Sections Completed** 41 | Check the box of the sections you have completed: 42 | 43 | - [ ] Description 44 | - [ ] Reproduction URL 45 | - [ ] Reproduction Steps 46 | - [ ] Screenshots 47 | - [ ] Logs 48 | - [ ] Browsers 49 | - [ ] OS 50 | - [ ] Additional Context 51 | 52 | 🔍 **Priority** 53 | Please select the priority of the bug: 54 | - [ ] High 55 | - [ ] Medium 56 | - [ ] Low 57 | 58 | 📜 **Code of Conduct** 59 | By submitting this issue, you agree to follow our Code of Conduct: 60 | 61 | - [ ] I follow Contributing Guidelines of this project. 62 | - [ ] I have checked the current issues for duplicate problems. 63 | - [ ] I have read the readme. 64 | -------------------------------------------------------------------------------- /src/pages/opensource/videos.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Videos" 3 | excerpt: "Resource Gallery - Open Source | We bring video resources realated to open source technology." 4 | publishDate: "2023-01-24T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1569017388730-020b5f80a004?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" 7 | # category: "Tutorials" 8 | author: "Mr. Ånand" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [opensource,document,git,github] 11 | 12 | --- 13 | 14 | 15 | ## What is Open Source & How to Start? 16 | 17 | <iframe width="100%" height="" src="https://www.youtube.com/embed/msyGybzCKRs" title="What is Open Source & How to Start?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 18 | 19 | ## Github Star Eddie Jaoude: Why should you Open Source? 20 | 21 | <iframe width="100%" src="https://www.youtube.com/embed/XYA97AydLVs" title="Github Star Eddie Jaoude: Why should you Open Source?" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 22 | 23 | ## Complete Guide to Open Source - How to Contribute 24 | <iframe width="100%" src="https://www.youtube.com/embed/yzeVMecydCE" title="Complete Guide to Open Source - How to Contribute" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 25 | 26 | ## Complete Git and GitHub Tutorial 27 | <iframe width="100%" src="https://www.youtube.com/embed/apGV9Kg7ics" title="Complete Git and GitHub Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 28 | -------------------------------------------------------------------------------- /src/pages/contact.astro: -------------------------------------------------------------------------------- 1 | <!-- --- 2 | import { Icon } from "astro-icon"; 3 | import Layout from "@layouts/Layout.astro"; 4 | import Container from "@components/container.astro"; 5 | import Sectionhead from "@components/sectionhead.astro"; 6 | import Button from "@components/ui/button.astro"; 7 | import Contactform from "@components/contactform.astro"; 8 | --- 9 | 10 | <Layout title="Contact"> 11 | <Container> 12 | <Sectionhead> 13 | <Fragment slot="title">Contact</Fragment> 14 | <Fragment slot="desc">We are a here to help.</Fragment> 15 | </Sectionhead> 16 | 17 | <div class="grid md:grid-cols-2 gap-10 mx-auto max-w-4xl mt-16"> 18 | <div> 19 | <h2 class="font-medium text-2xl text-gray-800">Contact Astroship</h2> 20 | <p class="text-lg leading-relaxed text-slate-500 mt-3"> 21 | Have something to say? We are here to help. Fill up the form or send 22 | email or call phone. 23 | </p> 24 | <div class="mt-5"> 25 | <div class="flex items-center mt-2 space-x-2 text-gray-600"> 26 | <Icon class="text-gray-400 w-4 h-4" name="uil:map-marker" /> 27 | <span>1734 Sanfransico, CA 93063</span> 28 | </div><div class="flex items-center mt-2 space-x-2 text-gray-600"> 29 | <Icon class="text-gray-400 w-4 h-4" name="uil:envelope" /><a 30 | href="mailto:hello@astroshipstarter.com" 31 | >hello@astroshipstarter.com</a 32 | > 33 | </div><div class="flex items-center mt-2 space-x-2 text-gray-600"> 34 | <Icon class="text-gray-400 w-4 h-4" name="uil:phone" /><a 35 | href="tel:+1 (987) 4587 899">+1 (987) 4587 899</a 36 | > 37 | </div> 38 | </div> 39 | </div> 40 | <div> 41 | <Contactform /> 42 | </div> 43 | </div> 44 | </Container> 45 | </Layout> --> 46 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs.yml: -------------------------------------------------------------------------------- 1 | name: 📄 Blog Contribution 2 | description: Want to contribute an article? You can use this one! 3 | title: "[Blog] write a small description here" 4 | labels: 5 | [ 6 | "📃Blog Contribution", 7 | ] 8 | body: 9 | - type: textarea 10 | id: description 11 | attributes: 12 | label: Description 13 | description: A brief description of the question or issue, also include what you want to write in the blog 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: publishedlink 18 | attributes: 19 | label: Published Link 20 | description: Please add published link if applicable 21 | validations: 22 | required: false 23 | - type: dropdown 24 | id: browser 25 | attributes: 26 | label: "🔄️ Websites" 27 | description: "What website are you using to publish your blogs?" 28 | options: 29 | - Personal Website 30 | - Blogspot 31 | - Medium 32 | - Hashnode 33 | - Wordpress 34 | - Hackernoon 35 | - Dev Community 36 | - daily dev 37 | - Devdojo 38 | - Ghost 39 | - Other 40 | validations: 41 | required: true 42 | 43 | - type: checkboxes 44 | id: no-duplicate-issues 45 | attributes: 46 | label: "Checklist ✅" 47 | options: 48 | - label: "I checked and didn't find similar issue" 49 | required: true 50 | 51 | - label: "I am from GSSoC23" 52 | required: true 53 | 54 | - label: "I have read the [Contributing Guidelines](https://github.com/ZeroOctave/resource-gallery/blob/main/CONTRIBUTION.md)" 55 | required: true 56 | 57 | - label: "I am willing to work on this issue (blank for no)" 58 | required: false 59 | 60 | - type: markdown 61 | attributes: 62 | value: | 63 | Feel free to check out other cool repositories [here](https://github.com/ZeroOctave) 64 | -------------------------------------------------------------------------------- /src/layouts/BlogLayout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@components/container.astro"; 3 | import { getFormattedDate } from "@utils/all"; 4 | import { log } from "astro/dist/core/logger/core"; 5 | import Layout from "./Layout.astro"; 6 | import { Icon } from 'astro-icon' 7 | import { Tweet, Vimeo, YouTube } from 'astro-embed'; 8 | 9 | import { YouTube } from '@astro-community/astro-embed-youtube'; 10 | import { Tweet } from '@astro-community/astro-embed-twitter'; 11 | import Sectionhead from "@components/sectionhead.astro"; 12 | 13 | const { frontmatter } = Astro.props; 14 | --- 15 | 16 | <Layout title={frontmatter.title}> 17 | <Container> 18 | <div class="mx-auto max-w-[735px] mt-14"> 19 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 20 | {frontmatter.category} 21 | </span> 22 | <h1 23 | class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight"> 24 | {frontmatter.title} 25 | </h1> 26 | <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap"> 27 | <span class="text-gray-400"> 28 | {frontmatter.author} 29 | </span> 30 | <span class="text-gray-400">•</span> 31 | <time class="text-gray-400" datetime={frontmatter.publishDate}> 32 | {getFormattedDate(frontmatter.publishDate)} 33 | </time> 34 | <span class="text-gray-400 hidden md:block">•</span> 35 | <div class="w-full md:w-auto flex flex-wrap gap-3"> 36 | { 37 | frontmatter.tags.map((tag) => ( 38 | <span class="text-sm text-gray-500">#{tag}</span> 39 | )) 40 | } 41 | </div> 42 | </div> 43 | </div> 44 | 45 | <div class="mx-auto prose prose-lg mt-6"> 46 | <slot /> 47 | </div> 48 | <div class="text-center mt-8"> 49 | <a 50 | href="/blog" 51 | class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition" 52 | >← Back to Blog</a 53 | > 54 | </div> 55 | </Container> 56 | </Layout> 57 | -------------------------------------------------------------------------------- /src/pages/pricing.astro: -------------------------------------------------------------------------------- 1 | <!-- --- 2 | import Layout from "@layouts/Layout.astro"; 3 | import Container from "@components/container.astro"; 4 | import Sectionhead from "@components/sectionhead.astro"; 5 | import Pricing from "@components/pricing.astro"; 6 | 7 | const pricing = [ 8 | { 9 | name: "Personal", 10 | price: "Free", 11 | popular: false, 12 | features: [ 13 | "Lifetime free", 14 | "Up to 3 users", 15 | "Unlimited Pages", 16 | "Astro Sub domain", 17 | "Basic Integrations", 18 | "Community Support", 19 | ], 20 | button: { 21 | text: "Get Started", 22 | link: "/", 23 | }, 24 | }, 25 | { 26 | name: "Startup", 27 | price: { 28 | monthly: "$19", 29 | annual: "$16", 30 | discount: "10%", 31 | original: "$24", 32 | }, 33 | popular: true, 34 | features: [ 35 | "All Free Features", 36 | "Up to 20 users", 37 | "20 Custom domains", 38 | "Unlimited Collaborators", 39 | "Advanced Integrations", 40 | "Priority Support", 41 | ], 42 | button: { 43 | text: "Get Started", 44 | link: "#", 45 | }, 46 | }, 47 | { 48 | name: "Enterprise", 49 | price: "Custom", 50 | popular: false, 51 | features: [ 52 | "All Pro Features", 53 | "Unlimited Custom domains", 54 | "99.99% Uptime SLA", 55 | "SAML & SSO Integration", 56 | "Dedicated Account Manager", 57 | "24/7 Phone Support", 58 | ], 59 | button: { 60 | text: "Contact us", 61 | link: "/contact", 62 | }, 63 | }, 64 | ]; 65 | --- 66 | 67 | <Layout title="Pricing"> 68 | <Container> 69 | <Sectionhead> 70 | <Fragment slot="title">Pricing</Fragment> 71 | <Fragment slot="desc" 72 | >Simple & Predictable pricing. No Surprises.</Fragment 73 | > 74 | </Sectionhead> 75 | 76 | <div class="grid md:grid-cols-3 gap-10 mx-auto max-w-screen-lg mt-12"> 77 | {pricing.map((item) => <Pricing plan={item} />)} 78 | </div> 79 | </Container> 80 | </Layout> --> 81 | -------------------------------------------------------------------------------- /src/components/hero.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Picture } from "@astrojs/image/components"; 3 | import heroImage from "assets/Ninja-amico.png"; 4 | import Link from "@components/ui/link.astro"; 5 | import { Icon } from "astro-icon"; 6 | --- 7 | 8 | <main 9 | class="grid lg:grid-cols-2 place-items-center pt-16 pb-8 md:pt-12 md:pb-24"> 10 | <div class="py-6 md:order-1 hidden md:block"> 11 | <Picture className="animate__animated animate__zoomIn animation-duration: 3s; animate__slow" 12 | src={heroImage} 13 | alt="Astronaut in the air" 14 | widths={[200, 400, 600]} 15 | aspectRatio="4:3" 16 | sizes="(max-width: 800px) 100vw, 620px" 17 | loading="eager" 18 | format="avif" 19 | /> 20 | </div> 21 | <div class ="animate__animated animate__swing animation-duration: 3s; animate__delay-1s animate_slower"> 22 | <h1 23 | class="text-5xl lg:text-6xl xl:text-7xl font-bold lg:tracking-tight xl:tracking-tighter" > 24 | Resource Gallery 25 | </h1> 26 | <p class="text-lg mt-4 text-slate-600 max-w-xl"> 27 | Are you interested in pursuing a career in tech? Are you a newcomer? Don't sure where, how, or why to begin? 28 | <wbr/> You are in the right place. <strong>Resource Gallery</strong> provides the tools and resources you need to evolve into a skilled developer. 29 | </p> 30 | <div class="mt-6 flex flex-col sm:flex-row gap-3"> 31 | <Link 32 | href="#" 33 | href="./resource" 34 | class="flex gap-1 items-center justify-center" 35 | rel="noopener"> 36 | <Icon class="text-white w-5 h-5" name="bx:bxs-lock-open" /> 37 | 38 | Access for Free 39 | </Link> 40 | <Link 41 | size="lg" 42 | style="outline" 43 | rel="noopener" 44 | href="https://github.com/Astrodevil/resource-gallery" 45 | class="flex gap-1 items-center justify-center" 46 | target="_blank"> 47 | <Icon class="text-black w-4 h-4" name="bx:bxl-github" /> 48 | Github Repo 49 | </Link> 50 | </div> 51 | </div> 52 | </main> 53 | -------------------------------------------------------------------------------- /src/pages/cybersecurity/books.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Books" 3 | excerpt: "Resource Gallery - Cyber Security | We bring written resources realated to Cyber Security." 4 | publishDate: "2023-07-03T11:39:36.050Z" 5 | image: "https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 6 | 7 | author: "Mr.Sanghdeep" 8 | layout: "@layouts/ContentLayout.astro" 9 | tags: [cyber-security,books] 10 | 11 | --- 12 | 13 | ## 📚 Top Books for Cyber Security Learning 14 | 15 | ### 📕 Network Security Bible 16 | #### Author : Eric Cole 17 | This comprehensive guide covers network security principles, technologies, and best practices. It covers topics such as secure network design, intrusion detection systems, firewalls, and virtual private networks (VPNs). 18 | 19 | ### 📕 Hacking: The Art of Exploitation 20 | #### Author : Jon Erickson 21 | This book explores the fundamentals of hacking and teaches readers how to think like a hacker. It covers topics such as buffer overflow exploits, shellcode development, and network-based attacks. 22 | 23 | ### 📕 The Web Application Hacker's Handbook: Finding and Exploiting Security Flaws 24 | #### Author : Dafydd Stuttard and Marcus Pinto 25 | This book provides an in-depth understanding of web application security. It covers common vulnerabilities, attack techniques, and effective countermeasures to secure web applications. 26 | 27 | ### 📕 Practical Malware Analysis: The Hands-On Guide to Dissecting Malicious Software 28 | #### Author : Michael Sikorski and Andrew Honig 29 | Focusing on malware analysis, this book offers practical techniques and hands-on exercises to dissect and analyze malicious software. It covers behavioral analysis, code analysis, and reverse engineering of malware. 30 | 31 | ### 📕 Applied Cryptography: Protocols, Algorithms, and Source Code in C 32 | #### Author : Bruce Schneier 33 | This book provides a thorough introduction to the principles and practices of cryptography. It covers encryption, authentication, digital signatures, and other cryptographic protocols used in securing information. 34 | -------------------------------------------------------------------------------- /src/layouts/ContentLayout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@components/container.astro"; 3 | import { getFormattedDate } from "@utils/all"; 4 | import { log } from "astro/dist/core/logger/core"; 5 | import Layout from "./Layout.astro"; 6 | 7 | import { YouTube } from '@astro-community/astro-embed-youtube'; 8 | import { Tweet } from '@astro-community/astro-embed-twitter'; 9 | import { Icon } from 'astro-icon' 10 | import { Tweet, Vimeo, YouTube } from 'astro-embed'; 11 | 12 | const { frontmatter } = Astro.props; 13 | --- 14 | <!-- <YouTube id="https://youtu.be/xtTy5nKay_Y" /> --> 15 | <!-- <Tweet id="https://twitter.com/astrodotbuild/status/1511750228428435457" /> --> 16 | 17 | <Layout title={frontmatter.title}> 18 | <Container> 19 | <div class="mx-auto max-w-[735px] mt-14"> 20 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 21 | {frontmatter.category} 22 | </span> 23 | <h1 24 | class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight"> 25 | {frontmatter.title} 26 | </h1> 27 | <div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap"> 28 | <span class="text-gray-400"> 29 | {frontmatter.author} 30 | </span> 31 | <span class="text-gray-400">•</span> 32 | <time class="text-gray-400" datetime={frontmatter.publishDate}> 33 | {getFormattedDate(frontmatter.publishDate)} 34 | </time> 35 | <span class="text-gray-400 hidden md:block">•</span> 36 | <div class="w-full md:w-auto flex flex-wrap gap-3"> 37 | { 38 | frontmatter.tags.map((tag) => ( 39 | <span class="text-sm text-gray-500">#{tag}</span> 40 | )) 41 | } 42 | </div> 43 | </div> 44 | </div> 45 | 46 | 47 | <div class="mx-auto prose prose-lg mt-6"> 48 | <slot /> 49 | </div> 50 | <div class="text-center mt-8"> 51 | <a 52 | href="/resource" 53 | class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition" 54 | >← Back to ReGala</a 55 | > 56 | </div> 57 | </Container> 58 | </Layout> 59 | -------------------------------------------------------------------------------- /src/pages/computer_networks/books.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Books" 3 | excerpt: "Resource Gallery - Computer Networks | We bring written resources realated to Computer Networks." 4 | publishDate: "2023-06-03T11:39:36.050Z" 5 | image: "https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 6 | author: "Mr. Kartik" 7 | layout: "@layouts/ContentLayout.astro" 8 | tags: [computer-networks,books] 9 | --- 10 | 11 | ## 📚 Top Books for Computer Network Enthusiasts 12 | 13 | ### 📕 Computer Networking: A Top-Down Approach 14 | #### Author : James F. Kurose and Keith W. Ross 15 | This book provides a comprehensive introduction to computer networking concepts, protocols, and architectures. It is widely used in universities and covers topics from the application layer to the physical layer. 16 | 17 | ### 📕 TCP/IP illustrated, Volume 1: The Protocols 18 | #### Author : W. Richard Stevens 19 | This book dives deep into the TCP/IP protocol suite, providing detailed explanations and illustrations of how the protocols work. It is a valuable resource for understanding the inner workings of the internet protocols. 20 | 21 | ### 📕 Computer Networks: A Systems Approach 22 | #### Author : Larry L. Peterson and Bruce S. Davie 23 | This book takes a systems approach to computer networks, covering topics such as network architecture, routing, congestion control, and network security. It provides a practical understanding of network design and implementation. 24 | 25 | ### 📕 Network Warrior 26 | #### Author : Gary A. Donahue 27 | This book focuses on the practical aspects of network administration and provides real-world examples and case studies. It covers topics such as network design, troubleshooting, and configuration of network devices. 28 | 29 | ### 📕 Computer Networks 30 | #### Author : Andrew S. Tanenbaum and David J. Wetherall 31 | This book provides a comprehensive introduction to computer networks, covering topics such as network architectures, protocols, TCP/IP, network security, wireless networks, and more. It offers a blend of theory and practical examples, making it suitable for both beginners and intermediate learners. The book also includes numerous exercises and case studies to reinforce the concepts. 32 | -------------------------------------------------------------------------------- /src/components/features.astro: -------------------------------------------------------------------------------- 1 | --- 2 | // @ts-ignore 3 | import { Icon } from "astro-icon"; 4 | 5 | const features = [ 6 | { 7 | title: "Bring Your Own Resource", 8 | description: 9 | "Build your own resource hub and contribute to resource gallery. Get credits for the contributions.", 10 | icon: "bx:bxs-briefcase", 11 | }, 12 | { 13 | title: "Blogs", 14 | description: 15 | "Resource Gallery also have a fully responsive blog section with fresh articles by contributors", 16 | icon: "bx:bxs-window-alt", 17 | }, 18 | { 19 | title: "On-Demand Resource", 20 | description: 21 | "Need Tailwind Resources? Resource Gallery will bring it live in few days by the power of open source community. ", 22 | icon: "bx:bxs-data", 23 | }, 24 | { 25 | title: "Broad Collection", 26 | description: 27 | "Resource gallery brings contents related to Web Development, Open-Source, Data Structures and many more.", 28 | icon: "bx:bxs-bot", 29 | }, 30 | { 31 | title: "Categories", 32 | description: 33 | "Resources are divided into like articles, videos or codes.", 34 | icon: "bx:bxs-file-find", 35 | }, 36 | { 37 | title: "Community", 38 | description: 39 | "Resource Gallery is an open source project powered by hundreds of contributors making thousands of individual contributions.", 40 | icon: "bx:bxs-user", 41 | }, 42 | ]; 43 | --- 44 | 45 | <div class="mt-16 md:mt-0"> 46 | <h2 class="text-4xl lg:text-5xl font-bold lg:tracking-tight"> 47 | Everything you need to start in tech 48 | </h2> 49 | <p class="text-lg mt-4 text-slate-600"> 50 | Resource Gallery brings resources of different technologies. It contains best resources and tools to became pro in software development field. 51 | </p> 52 | </div> 53 | 54 | <div class="grid sm:grid-cols-2 md:grid-cols-3 mt-16 gap-16"> 55 | { 56 | features.map((item) => ( 57 | <div class="flex gap-4 items-start hover:bg-black hover:text-white group rounded-md duration-200 py-2"> 58 | <div class="mt-1 bg-black rounded-full ml-2 p-2 w-8 h-8 shrink-0 transform transition-all duration-700 group-hover:bg-white "> 59 | <Icon class="text-white group-hover:text-black" name={item.icon} /> 60 | </div> 61 | <div> 62 | <h3 class="font-semibold text-lg">{item.title}</h3>{" "} 63 | <p class="group-hover:text-white text-slate-500 mt-2 leading-relaxed">{item.description}</p> 64 | </div> 65 | </div> 66 | )) 67 | } 68 | </div> 69 | -------------------------------------------------------------------------------- /src/pages/css/books.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Books" 3 | excerpt: "Resource Gallery - CSS | We bring quality books related to Cascading Style Sheet." 4 | publishDate: "2023-08-05T20:32:30Z" 5 | image: "https://www.frontendmag.com/wp-content/uploads/2023/05/best-books-for-html-and-css.jpeg" 6 | author: "Ms.Parul" 7 | layout: "@layouts/ContentLayout.astro" 8 | tags: [css, books] 9 | --- 10 | 11 | ## Top Books for CSS Learning 12 | 13 | ### 💡HTML, XHTML, and CSS ALL-IN-ONE DESK REFERENCES FOR DUMMIES 14 | #### Author : Andy Harris & Chris McCulloch 15 | A comprehensive guide by Andy Harris & Chris McCulloch, this book equips beginners with essential knowledge on HTML, XHTML, and CSS. The user-friendly approach allows readers to learn web development effectively, making it an invaluable resource for building websites and designing web pages. 16 | 17 | ### 💡CSS Web Design for Dummies 18 | #### Author : Richard Mansfield 19 | "CSS Web Design for Dummies" is an entry-level guide that simplifies the complexities of CSS for beginners. This book provides step-by-step instructions, practical examples, and tips to create visually appealing and responsive web designs. Perfect for novices, it empowers readers to style and transform web pages with confidence. 20 | 21 | ### 💡CSS for Beginners: Learn to Tweak Your Website Design 22 | #### Author : Carrie Dils 23 | "CSS for Beginners: Learn to Tweak Your Website Design" by Carrie Dils is an accessible guide that introduces CSS to beginners. This hands-on book teaches readers how to customize website designs using CSS. With clear explanations and practical exercises, it empowers beginners to enhance their web pages and create visually appealing layouts effortlessly. 24 | 25 | ### 💡CSS in Easy Steps 26 | #### Author : Mike McGrath 27 | "CSS in Easy Steps" by Mike McGrath is a user-friendly guide for beginners. This book presents CSS concepts in a straightforward manner, making it easy to understand and implement. With step-by-step instructions and visual examples, readers can quickly gain the skills to style web pages and create visually appealing websites with confidence. 28 | 29 | ### 💡CSS Visual Dictionary 30 | #### Author : Greg Sidelnikov 31 | "CSS Visual Dictionary" by Greg Sidelnikov is a unique reference that explains CSS concepts using visual aids and diagrams. This book helps beginners understand CSS terminology, properties, and techniques through clear illustrations. With a visual approach, it simplifies the learning process and enables readers to effectively apply CSS styles to their web designs. 32 | 33 | ### 💡CSS3 for Web Designers 34 | #### Author : Dan Cederholm 35 | "CSS3 for Web Designers" by Dan Cederholm is a concise and practical guide tailored to web designers. This book dives into modern CSS3 techniques, empowering designers to create visually stunning and interactive web experiences. With clear explanations and real-world examples, it equips readers with the skills to craft cutting-edge web designs. 36 | -------------------------------------------------------------------------------- /.github/pull_request_template.yml: -------------------------------------------------------------------------------- 1 | name: Pull Request Template 2 | 3 | on: 4 | pull_request: 5 | types: 6 | - opened 7 | - synchronize 8 | 9 | jobs: 10 | pr-template: 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Check PR title 15 | run: | 16 | title=$(git log --pretty=format:%s origin/main..HEAD) 17 | if [[ $title != *"JIRA-"* ]]; then 18 | echo "Error: PR title must include a JIRA ticket number" 19 | exit 1 20 | fi 21 | 22 | - name: Check PR description 23 | run: | 24 | description=$(git log --pretty=format:%b origin/main..HEAD) 25 | if [[ $description != *"JIRA-"* ]]; then 26 | echo "Error: PR description must include a JIRA ticket number" 27 | exit 1 28 | fi 29 | 30 | - name: Request more information 31 | run: | 32 | echo "👋 Thank you for your contribution! To help the reviewer understand your changes better, please provide the following information:" 33 | 34 | echo "" 35 | echo "## Description" 36 | echo "" 37 | echo "<!-- Please provide a brief summary of your changes. -->" 38 | echo "" 39 | 40 | echo "## Why This PR ?" 41 | echo "" 42 | echo "<!-- Why is this change necessary? What problem does it solve? -->" 43 | echo "" 44 | 45 | echo "## How Has This Been Tested?" 46 | echo "" 47 | echo "<!-- Please describe the tests that you ran to verify your changes. -->" 48 | echo "" 49 | 50 | echo "## Screenshots (if applicable)" 51 | echo "" 52 | echo "<!-- If applicable, add screenshots to help explain your changes. -->" 53 | echo "" 54 | 55 | echo "## Related Issues" 56 | echo "" 57 | echo "<!-- If this PR is related to any issues, please mention them using the GitHub issue linking syntax (e.g., 'Fixes #123', 'Closes #456'). -->" 58 | echo "" 59 | 60 | echo "## Types of Changes" 61 | echo "" 62 | echo "<!-- What types of changes does your code introduce? Put an `x` in the boxes that apply. -->" 63 | echo "- [ ] Bug fix (non-breaking change which fixes an issue)" 64 | echo "- [ ] New feature (non-breaking change which adds functionality)" 65 | echo "- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)" 66 | echo "- [ ] Documentation update" 67 | echo "" 68 | 69 | echo "## Checklist" 70 | echo "" 71 | echo "<!-- Put an `x` in the boxes that apply. -->" 72 | echo "- [ ] My code adheres to the established style guidelines of this project" 73 | echo "- [ ] I have conducted a self-review of my code" 74 | echo "- [ ] I have commented my code, particularly in hard-to-understand areas" 75 | echo "- [ ] I have made corresponding changes to the documentation" 76 | echo "- [ ] My changes generate no new warnings" 77 | echo "" 78 | 79 | # Add additional steps as needed 80 | -------------------------------------------------------------------------------- /src/pages/python.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | 6 | const { frontmatter } = Astro.props; 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">Python</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://docs.python.org/3/" 18 | target="_blank" 19 | title="Official Python Documentation (Docs)" 20 | body="The official Python documentation provides comprehensive guides, tutorials, and references for Python. It covers everything from the basics to advanced topics." 21 | /> 22 | <Card 23 | href="https://www.codecademy.com/learn/learn-python" 24 | target="_blank" 25 | title="Codecademy (Course)" 26 | body="Codecademy offers an interactive Python course for beginners that allows you to learn Python while coding directly in your web browser." 27 | /> 28 | <Card 29 | href="https://www.geeksforgeeks.org/python-programming-language/" 30 | target="_blank" 31 | title="Python Tutorial - GFG (Docs)" 32 | body="This Python Tutorial is very well suited for Beginners, and also for experienced programmers with other programming languages like C++ and Java." 33 | /> 34 | </ul> 35 | </main> 36 | 37 | </Layout> 38 | 39 | <style> 40 | main { 41 | margin: auto; 42 | padding: 1.5rem; 43 | max-width: 120ch; 44 | } 45 | h1 { 46 | font-size: 3rem; 47 | font-weight: 800; 48 | margin: 0; 49 | } 50 | .text-gradient { 51 | background-image: var(--accent-gradient); 52 | -webkit-background-clip: text; 53 | -webkit-text-fill-color: transparent; 54 | background-size: 400%; 55 | background-position: 0%; 56 | } 57 | .instructions { 58 | line-height: 1.6; 59 | margin: 1rem 0; 60 | border: 1px solid rgba(var(--accent), 25%); 61 | background-color: white; 62 | padding: 1rem; 63 | border-radius: 0.4rem; 64 | } 65 | .instructions code { 66 | font-size: 0.875em; 67 | font-weight: bold; 68 | background: rgba(var(--accent), 12%); 69 | color: rgb(var(--accent)); 70 | border-radius: 4px; 71 | padding: 0.3em 0.45em; 72 | } 73 | .instructions strong { 74 | color: rgb(var(--accent)); 75 | } 76 | .link-card-grid { 77 | display: grid; 78 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 79 | gap: 1rem; 80 | padding: 0; 81 | } 82 | 83 | :root { 84 | --accent: 124, 58, 237; 85 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 86 | } 87 | /* html { 88 | font-family: system-ui, sans-serif; 89 | background-color: #F6F6F6; 90 | } */ 91 | code { 92 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 93 | Bitstream Vera Sans Mono, Courier New, monospace; 94 | } 95 | </style> 96 | -------------------------------------------------------------------------------- /.github/workflows/astro.yml: -------------------------------------------------------------------------------- 1 | # Sample workflow for building and deploying an Astro site to GitHub Pages 2 | # 3 | # To get started with Astro see: https://docs.astro.build/en/getting-started/ 4 | # 5 | name: Deploy Astro site to Pages 6 | 7 | on: 8 | # Runs on pushes targeting the default branch 9 | push: 10 | branches: ["main"] 11 | 12 | # Allows you to run this workflow manually from the Actions tab 13 | workflow_dispatch: 14 | 15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 16 | permissions: 17 | contents: read 18 | pages: write 19 | id-token: write 20 | 21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 23 | concurrency: 24 | group: "pages" 25 | cancel-in-progress: false 26 | 27 | env: 28 | BUILD_PATH: "." # default value when not using subfolders 29 | # BUILD_PATH: subfolder 30 | 31 | jobs: 32 | build: 33 | name: Build 34 | runs-on: ubuntu-latest 35 | steps: 36 | - name: Checkout 37 | uses: actions/checkout@v4 38 | - name: Detect package manager 39 | id: detect-package-manager 40 | run: | 41 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then 42 | echo "manager=yarn" >> $GITHUB_OUTPUT 43 | echo "command=install" >> $GITHUB_OUTPUT 44 | echo "runner=yarn" >> $GITHUB_OUTPUT 45 | exit 0 46 | elif [ -f "${{ github.workspace }}/package.json" ]; then 47 | echo "manager=npm" >> $GITHUB_OUTPUT 48 | echo "command=ci" >> $GITHUB_OUTPUT 49 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT 50 | exit 0 51 | else 52 | echo "Unable to determine package manager" 53 | exit 1 54 | fi 55 | - name: Setup Node 56 | uses: actions/setup-node@v4 57 | with: 58 | node-version: "20" 59 | cache: ${{ steps.detect-package-manager.outputs.manager }} 60 | cache-dependency-path: ${{ env.BUILD_PATH }}/package-lock.json 61 | - name: Setup Pages 62 | id: pages 63 | uses: actions/configure-pages@v4 64 | - name: Install dependencies 65 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }} 66 | working-directory: ${{ env.BUILD_PATH }} 67 | - name: Build with Astro 68 | run: | 69 | ${{ steps.detect-package-manager.outputs.runner }} astro build \ 70 | --site "${{ steps.pages.outputs.origin }}" \ 71 | --base "${{ steps.pages.outputs.base_path }}" 72 | working-directory: ${{ env.BUILD_PATH }} 73 | - name: Upload artifact 74 | uses: actions/upload-pages-artifact@v3 75 | with: 76 | path: ${{ env.BUILD_PATH }}/dist 77 | 78 | deploy: 79 | environment: 80 | name: github-pages 81 | url: ${{ steps.deployment.outputs.page_url }} 82 | needs: build 83 | runs-on: ubuntu-latest 84 | name: Deploy 85 | steps: 86 | - name: Deploy to GitHub Pages 87 | id: deployment 88 | uses: actions/deploy-pages@v4 89 | -------------------------------------------------------------------------------- /src/pages/css/games.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "CSS Gaming Adventure" 3 | excerpt: "Resource Gallery - CSS | We bring gaming resources realated to Cascading Style Sheet." 4 | publishDate: "2023-08-05T20:32:30Z" 5 | image: "https://elephantsolutions.net/wp-content/uploads/2021/07/small-cover-360x210px.jpg" 6 | author: "Ms.Parul" 7 | layout: "@layouts/ContentLayout.astro" 8 | tags: [css, cssgames, document] 9 | --- 10 | 11 | ## Want to Learn CSS through Games? 12 | 13 | **Checkout here for the best css gaming resources** 14 | 15 | ### 1 - Flexbox Froggy 16 | Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values. 17 | 18 | 🔗 [**Flexbox Frggy**](https://flexboxfroggy.com) 19 | 20 | 21 | ### 2 - GuessCSS - CSS Learning Gamified! 22 | 23 | GuessCSS is a thrilling gaming website where you decode CSS challenges, style elements, and level up your web design skills. Enjoy interactive fun and learn CSS like never before! 24 | 25 | 🔗 [**Guess-CSS**](https://www.guess-css.app/) 26 | 27 | 28 | ### 3 - Codepip - Level Up with CSS Gaming! 29 | 30 | Discover the captivating world of CSS through Codepip's gamified platform. Engage in interactive challenges, decode CSS puzzles, and level up your web design skills in a fun and exciting way. Experience CSS learning like never before on Codepip! 31 | 32 | 🔗 [**Codepip**](https://codepip.com/) 33 | 34 | 35 | ### 4 - CSS - Speedrun - "Race to Master Web Design!" 36 | 37 | Embark on a thrilling speedrun through CSS mastery on CSS Speedrun's dynamic platform. Compete in time-based challenges, style websites, and level up your CSS skills. Sprint to the top of the leaderboard and become a web design champion! CSS learning has never been this exhilarating! 38 | 39 | 🔗 [**CSS-Speedrun**](https://css-speedrun.netlify.app/) 40 | 41 | 42 | ### 5 - CSS - Battle 43 | 44 | CSSBattle is an interactive platform where programmers compete in CSS coding battles, challenging each other to create the most impressive visual designs. It fosters a fun learning environment, allowing participants to enhance their CSS skills while engaging in friendly coding duels. 45 | 46 | 🔗 [**CSS - Battle**](https://cssbattle.dev/) 47 | 48 | ### 6 - Flexbox - Defense 49 | Flexbox Defense is a thrilling game that teaches CSS Flexbox layout. Players battle enemies, using Flexbox properties to defend and create powerful layouts. It's a fun way to learn CSS! 50 | 51 | 🔗 [**Flexbox Defense**](http://www.flexboxdefense.com/) 52 | 53 | ### 7 - CSS Diner 54 | CSS Diner is a delightful and interactive game that educates users about CSS Selectors. Players savor their way through levels, using CSS Selectors to select the right items on a virtual dining table. This engaging game turns learning CSS into an enjoyable dining experience! 55 | 56 | 🔗 [**CSS-Diner**]( https://flukeout.github.io/) 57 | 58 | ### 8 - Grid-Garden 59 | Grid Garden is a captivating game that imparts CSS Grid layout knowledge. Players cultivate their way through challenges, using Grid properties to arrange virtual gardens. This fun and immersive game make learning CSS Grid a delightful gardening adventure! 60 | 61 | 🔗 [**Grid-Garden**]( https://cssgridgarden.com/) -------------------------------------------------------------------------------- /src/pages/git.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from "../components/card.astro"; 3 | import Layout from "../layouts/Layout.astro"; 4 | 5 | const { frontmatter } = Astro.props; 6 | --- 7 | 8 | <Layout title="Resources | Resource Gallery"> 9 | <main> 10 | <h1>Resource Gallery - <span class="text-gradient">Git</span></h1> 11 | <p class="instructions"> 12 | To contribute, open the directory <code 13 | ><a 14 | href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages" 15 | >src/pages</a 16 | ></code 17 | > on GitHub.<br /> 18 | <strong 19 | ><a href="https://github.com/Astrodevil/resource-gallery/issues" 20 | >Open Issue:</a 21 | ></strong 22 | > Improve the "Resource Gallery" and earn credits as early contributor🎉 23 | </p> 24 | <ul role="list" class="link-card-grid"> 25 | <Card 26 | href="https://git-scm.com/docs/git#_git_commands" 27 | target="_blank" 28 | title="Git - the stupid content tracker (Docs)" 29 | body="Git is a fast, scalable, distributed revision control system with an unusually rich command set that provides both high-level operations and full access to internals." 30 | /> 31 | <Card 32 | href="https://alkaison.github.io/posts/git-and-github-introduction/" 33 | target="_blank" 34 | title="Git and GitHub - Beginner to Intermediate" 35 | body="Git helps in collaborative coding and GitHub helps to host our code at open source platform." 36 | /> 37 | </ul> 38 | </main> 39 | </Layout> 40 | 41 | <style> 42 | main { 43 | margin: auto; 44 | padding: 1.5rem; 45 | max-width: 120ch; 46 | } 47 | h1 { 48 | font-size: 3rem; 49 | font-weight: 800; 50 | margin: 0; 51 | } 52 | .text-gradient { 53 | background-image: var(--accent-gradient); 54 | -webkit-background-clip: text; 55 | -webkit-text-fill-color: transparent; 56 | background-size: 400%; 57 | background-position: 0%; 58 | } 59 | .instructions { 60 | line-height: 1.6; 61 | margin: 1rem 0; 62 | border: 1px solid rgba(var(--accent), 25%); 63 | background-color: white; 64 | padding: 1rem; 65 | border-radius: 0.4rem; 66 | } 67 | .instructions code { 68 | font-size: 0.875em; 69 | font-weight: bold; 70 | background: rgba(var(--accent), 12%); 71 | color: rgb(var(--accent)); 72 | border-radius: 4px; 73 | padding: 0.3em 0.45em; 74 | } 75 | .instructions strong { 76 | color: rgb(var(--accent)); 77 | } 78 | .link-card-grid { 79 | display: grid; 80 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 81 | gap: 1rem; 82 | padding: 0; 83 | } 84 | 85 | :root { 86 | --accent: 124, 58, 237; 87 | --accent-gradient: linear-gradient( 88 | 45deg, 89 | rgb(var(--accent)), 90 | #000000 30%, 91 | rgb(255, 255, 255) 60% 92 | ); 93 | } 94 | /* html { 95 | font-family: system-ui, sans-serif; 96 | background-color: #F6F6F6; 97 | } */ 98 | code { 99 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 100 | DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; 101 | } 102 | </style> 103 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ "main" ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ "main" ] 20 | schedule: 21 | - cron: '43 3 * * 6' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }} 27 | timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }} 28 | permissions: 29 | actions: read 30 | contents: read 31 | security-events: write 32 | 33 | strategy: 34 | fail-fast: false 35 | matrix: 36 | language: [ 'javascript' ] 37 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby', 'swift' ] 38 | # Use only 'java' to analyze code written in Java, Kotlin or both 39 | # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both 40 | # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support 41 | 42 | steps: 43 | - name: Checkout repository 44 | uses: actions/checkout@v3 45 | 46 | # Initializes the CodeQL tools for scanning. 47 | - name: Initialize CodeQL 48 | uses: github/codeql-action/init@v2 49 | with: 50 | languages: ${{ matrix.language }} 51 | # If you wish to specify custom queries, you can do so here or in a config file. 52 | # By default, queries listed here will override any specified in a config file. 53 | # Prefix the list here with "+" to use these queries and those in the config file. 54 | 55 | # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs 56 | # queries: security-extended,security-and-quality 57 | 58 | 59 | # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift). 60 | # If this step fails, then you should remove it and run the build manually (see below) 61 | - name: Autobuild 62 | uses: github/codeql-action/autobuild@v2 63 | 64 | # ℹ️ Command-line programs to run using the OS shell. 65 | # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun 66 | 67 | # If the Autobuild fails above, remove it and uncomment the following three lines. 68 | # modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance. 69 | 70 | # - run: | 71 | # echo "Run, Build Application using script" 72 | # ./location_of_script_within_repo/buildscript.sh 73 | 74 | - name: Perform CodeQL Analysis 75 | uses: github/codeql-action/analyze@v2 76 | with: 77 | category: "/language:${{matrix.language}}" -------------------------------------------------------------------------------- /src/components/navbar/navbar.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Container from "@components/container.astro"; 3 | import Link from "@components/ui/link.astro"; 4 | import Dropdown from "./dropdown.astro"; 5 | import { Astronav, MenuItems, MenuIcon } from "astro-navbar"; 6 | import { Icon } from 'astro-icon' 7 | 8 | const menuitems = [ 9 | 10 | // { 11 | // title: "Pricing", 12 | // path: "/pricing", 13 | // }, 14 | { 15 | title: "Resources", 16 | path: "/resource", 17 | }, 18 | { 19 | title: "Blog", 20 | path: "/blog", 21 | }, 22 | { 23 | title: "About", 24 | path: "/about", 25 | }, 26 | { 27 | title: "Quick Links", 28 | // path: "#", 29 | children: [ 30 | { title: "Twitter❤️", path: "https://twitter.com/astrodevil_", target: "_blank"}, 31 | { title: "Instagram👀", path: "https://www.instagram.com/codes.astro/", target: "_blank" }, 32 | // { title: "Gumroad Store📔", path: "https://astrodevil.gumroad.com/"}, 33 | { title: "Sponser on Ko-Fi☕", path: "https://ko-fi.com/astrodevil", target: "_blank" }, 34 | ], 35 | }, 36 | 37 | // { 38 | // title: "Contact", 39 | // path: "/contact", 40 | // }, 41 | ]; 42 | 43 | 44 | --- 45 | 46 | 47 | <Container class = "sticky top-3 sm:top-5 sm:px-5 mx-[10px] sm:mx-auto rounded-[5px] py-[1px] bg-slate-300 bg-opacity-50 backdrop-blur-[6px] z-10 sm:rounded-bl-lg sm:rounded-tl-lg sm:rounded-tr-lg sm:rounded-br-lg "> 48 | 49 | <header class="flex flex-col lg:flex-row justify-between items-center my-4"> 50 | <Astronav> 51 | <div class="flex w-full lg:w-auto items-center justify-between"> 52 | <a href="/" class="text-lg" 53 | ><span class="font-bold text-[20px] tracking-[0.2px] text-slate-800">Resource</span><span 54 | class="text-slate-500 tracking-[0.2px] text-[20px]">Gallery</span 55 | > 56 | </a> 57 | <div class="block lg:hidden"> 58 | <MenuIcon class="w-4 h-4 text-gray-800" /> 59 | </div> 60 | </div> 61 | <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0"> 62 | <ul class="flex flex-col lg:flex-row lg:gap-3"> 63 | { 64 | menuitems.map((item, index) => ( 65 | <> 66 | {item.children && ( 67 | <Dropdown 68 | title={item.title} 69 | children={item.children} 70 | lastItem={index === menuitems.length - 1} 71 | /> 72 | )} 73 | 74 | {!item.children && ( 75 | <li> 76 | <a 77 | href={item.path} 78 | class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900 hover:underline"> 79 | {item.title} 80 | </a> 81 | </li> 82 | )} 83 | </> 84 | )) 85 | } 86 | </ul> 87 | <div class="lg:hidden flex items-center mt-3 gap-4"> 88 | <!-- <Link href="#" style="muted" block size="md">Log in</Link> --> 89 | <Link href="https://github.com/Astrodevil/resource-gallery/" size="md" block>Contribute to ReGala</Link> 90 | </div> 91 | </MenuItems> 92 | </Astronav> 93 | <div> 94 | <div class="hidden lg:flex items-center gap-4"> 95 | 96 | <!-- <a href="#">Log in</a> --> 97 | <Link href="https://github.com/Astrodevil/resource-gallery/" size="md">Contribute to ReGala</Link> 98 | </div> 99 | </div> 100 | </header> 101 | </div> 102 | -------------------------------------------------------------------------------- /src/pages/aiml.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | 6 | const { frontmatter } = Astro.props; 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">AI ML</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://www.coursera.org/learn/ai-for-everyone" 18 | target="_blank" 19 | title="AI For Everyone (Course)" 20 | body="AI is not only for engineers. If you want your organization to become better at using AI, this is the course to tell everyone--especially your non-technical colleagues--to take." 21 | /> 22 | <Card 23 | href="https://www.youtube.com/watch?v=wnqkfpCpK1ga" 24 | target="_blank" 25 | title="AI And Machine Learning Full Course (Youtube)" 26 | body="This complete Artificial Intelligence and Machine Learning full course video covers all the topics that you need to know to become a master in the field of AI and Machine Learning." 27 | /> 28 | <Card 29 | href="https://www.geeksforgeeks.org/machine-learning/" 30 | target="_blank" 31 | title="Machine Learning Tutorial - GFG (Docs)" 32 | body="This machine learning tutorial helps you gain a solid introduction to the fundamentals of machine learning and explore a wide range of techniques, including supervised, unsupervised, and reinforcement learning." 33 | /> 34 | <Card 35 | href="https://www.youtube.com/playlist?list=PLQVvvaa0QuDfKTOs3Keq_kaG2P55YRn5v" 36 | target="_blank" 37 | title="sentdex (Youtube channel)" 38 | body="Practical Machine Learning Tutorial with Python." 39 | /> 40 | </ul> 41 | </main> 42 | 43 | </Layout> 44 | 45 | <style> 46 | main { 47 | margin: auto; 48 | padding: 1.5rem; 49 | max-width: 120ch; 50 | } 51 | h1 { 52 | font-size: 3rem; 53 | font-weight: 800; 54 | margin: 0; 55 | } 56 | .text-gradient { 57 | background-image: var(--accent-gradient); 58 | -webkit-background-clip: text; 59 | -webkit-text-fill-color: transparent; 60 | background-size: 400%; 61 | background-position: 0%; 62 | } 63 | .instructions { 64 | line-height: 1.6; 65 | margin: 1rem 0; 66 | border: 1px solid rgba(var(--accent), 25%); 67 | background-color: white; 68 | padding: 1rem; 69 | border-radius: 0.4rem; 70 | } 71 | .instructions code { 72 | font-size: 0.875em; 73 | font-weight: bold; 74 | background: rgba(var(--accent), 12%); 75 | color: rgb(var(--accent)); 76 | border-radius: 4px; 77 | padding: 0.3em 0.45em; 78 | } 79 | .instructions strong { 80 | color: rgb(var(--accent)); 81 | } 82 | .link-card-grid { 83 | display: grid; 84 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 85 | gap: 1rem; 86 | padding: 0; 87 | } 88 | 89 | :root { 90 | --accent: 124, 58, 237; 91 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 92 | } 93 | /* html { 94 | font-family: system-ui, sans-serif; 95 | background-color: #F6F6F6; 96 | } */ 97 | code { 98 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 99 | Bitstream Vera Sans Mono, Courier New, monospace; 100 | } 101 | </style> 102 | -------------------------------------------------------------------------------- /src/pages/cloud.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | 6 | const { frontmatter } = Astro.props; 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">Cloud</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://docs.aws.amazon.com/index.html" 18 | target="_blank" 19 | title="Amazon Web Services - AWS (Docs)" 20 | body="Find user guides, code samples, SDKs & toolkits, tutorials, API & CLI references, and more." 21 | /> 22 | <Card 23 | href="https://www.geeksforgeeks.org/aws-tutorial/" 24 | target="_blank" 25 | title="Amazon Web Services - AWS Tutorial (GFG)" 26 | body="This AWS tutorial is designed for beginners and professionals to learn AWS’s basic and advanced concepts." 27 | /> 28 | <Card 29 | href="https://cloud.google.com/docs/" 30 | target="_blank" 31 | title="A Complete Beginner's Guide to Google Cloud (Docs)" 32 | body="Find guides, code samples, architectural diagrams, best practices, tutorials, API references, and more to learn how to build on Google Cloud" 33 | /> 34 | <Card 35 | href="https://cloud.google.com/blog" 36 | target="_blank" 37 | title="Google Cloud Blogs (website)" 38 | body="Google Cloud blog: News, tips, and inspiration to accelerate your digital transformation" 39 | /> 40 | <Card 41 | href="https://learn.microsoft.com/en-us/azure/?product=popular" 42 | target="_blank" 43 | title="Microsoft Azure (Docs)" 44 | body="Learn how to build and manage powerful applications using Microsoft Azure cloud services. Get documentation, example code, tutorials, and more.." 45 | /> 46 | <Card 47 | href="https://www.geeksforgeeks.org/microsoft-azure/" 48 | target="_blank" 49 | title="Azure Tutorial (website)" 50 | body="Microsoft Azure is one of the widely used cloud computing platforms. This Section contains Azure Tutorial." 51 | /> 52 | 53 | 54 | 55 | </ul> 56 | </main> 57 | 58 | </Layout> 59 | 60 | <style> 61 | main { 62 | margin: auto; 63 | padding: 1.5rem; 64 | max-width: 120ch; 65 | } 66 | h1 { 67 | font-size: 3rem; 68 | font-weight: 800; 69 | margin: 0; 70 | } 71 | .text-gradient { 72 | background-image: var(--accent-gradient); 73 | -webkit-background-clip: text; 74 | -webkit-text-fill-color: transparent; 75 | background-size: 400%; 76 | background-position: 0%; 77 | } 78 | .instructions { 79 | line-height: 1.6; 80 | margin: 1rem 0; 81 | border: 1px solid rgba(var(--accent), 25%); 82 | background-color: white; 83 | padding: 1rem; 84 | border-radius: 0.4rem; 85 | } 86 | .instructions code { 87 | font-size: 0.875em; 88 | font-weight: bold; 89 | background: rgba(var(--accent), 12%); 90 | color: rgb(var(--accent)); 91 | border-radius: 4px; 92 | padding: 0.3em 0.45em; 93 | } 94 | .instructions strong { 95 | color: rgb(var(--accent)); 96 | } 97 | .link-card-grid { 98 | display: grid; 99 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 100 | gap: 1rem; 101 | padding: 0; 102 | } 103 | 104 | :root { 105 | --accent: 124, 58, 237; 106 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 107 | } 108 | /* html { 109 | font-family: system-ui, sans-serif; 110 | background-color: #F6F6F6; 111 | } */ 112 | code { 113 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 114 | Bitstream Vera Sans Mono, Courier New, monospace; 115 | } 116 | </style> 117 | 118 | -------------------------------------------------------------------------------- /src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { SEO } from "astro-seo"; 3 | import Footer from "@components/footer.astro"; 4 | import Navbar from "@components/navbar/navbar.astro"; 5 | import "@fontsource/inter/variable.css"; 6 | import { Tweet, Vimeo, YouTube } from 'astro-embed'; 7 | 8 | export interface Props { 9 | title: string; 10 | } 11 | 12 | // const { src } = await getImage({ 13 | // src: "../../assets/hero.png", 14 | // width: 800, 15 | // height: 742, 16 | // format: "avif", 17 | // }); 18 | // console.log(src); 19 | 20 | const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString(); 21 | 22 | const resolvedImageWithDomain = new URL( 23 | "/screely.png", 24 | Astro.site 25 | ).toString(); 26 | 27 | const { title } = Astro.props; 28 | 29 | const makeTitle = title 30 | ? title + " | " + "Resource Gallery" 31 | : "Resource Gallery - Resources you need to start in tech"; 32 | --- 33 | 34 | <!DOCTYPE html> 35 | <html lang="en"> 36 | <head> 37 | <meta charset="UTF-8" /> 38 | <meta name="viewport" content="width=device-width" /> 39 | <!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> --> 40 | <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 41 | <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 42 | <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 43 | <link rel="manifest" href="/site.webmanifest"> 44 | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> 45 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> 46 | <meta name="msapplication-TileColor" content="#da532c"> 47 | <meta name="theme-color" content="#ffffff"> 48 | <meta name="generator" content={Astro.generator} /> 49 | 50 | <!-- <link rel="preload" as="image" href={src} alt="Hero" /> --> 51 | <SEO 52 | title={makeTitle} 53 | <link rel="apple-touch-icon" sizes="180x180" href="../assets/apple-touch-icon.png"> 54 | <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png"> 55 | <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png"> 56 | <link rel="manifest" href="../assets/site.webmanifest"> 57 | <link rel="mask-icon" href="../assets/safari-pinned-tab.svg" color="#5bbad5"> 58 | <meta name="msapplication-TileColor" content="#da532c"> 59 | <meta name="theme-color" content="#ffffff"> 60 | description="Are you interested in pursuing a career in tech? Are you a newcomer? Don't sure where, how, or why to begin? You are in the right place. Resource Gallery provides the tools and resources you need to evolve into a skilled developer." 61 | canonical={canonicalURL} 62 | twitter={{ 63 | creator: "@astrodevil_", 64 | site: "@resourcegallery", 65 | card: "summary_large_image", 66 | }} 67 | screely={{ 68 | basic: { 69 | url: canonicalURL, 70 | type: "website", 71 | title: `Resource Gallery`, 72 | image: resolvedImageWithDomain, 73 | }, 74 | image: { 75 | alt: "Resource Gallery Homepage Screenshot", 76 | }, 77 | }} 78 | /> 79 | </head> 80 | <body> 81 | <Navbar /> 82 | <slot /> 83 | <Footer /> 84 | <style is:global> 85 | 86 | /* Improve Page speed */ 87 | /* https://css-tricks.com/almanac/properties/c/content-visibility/ */ 88 | img { 89 | content-visibility: auto; 90 | } 91 | 92 | ::-webkit-scrollbar { 93 | width: 8px; 94 | } 95 | 96 | /* Track */ 97 | ::-webkit-scrollbar-track { 98 | background:#FFFFFF; 99 | } 100 | 101 | /* Handle */ 102 | ::-webkit-scrollbar-thumb { 103 | background: #1F2937; 104 | transition: .5s; 105 | border-radius:4px; 106 | } 107 | 108 | /* Handle on hover */ 109 | ::-webkit-scrollbar-thumb:hover { 110 | background: #1F2939; 111 | 112 | } 113 | </style> 114 | </body> 115 | </html> 116 | 117 | -------------------------------------------------------------------------------- /src/pages/javascript.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | const { frontmatter } = Astro.props; 6 | 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">JavaScript</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as an early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://www.showwcase.com/roadmap/7/javascript-the-complete-guide" 18 | target="_blank" 19 | title="JavaScript - The Complete Guide (Docs)" 20 | body="Learn modern JavaScript from this guided roadmap filled with content, examples, resources, and project ideas. This course is prepared by Showwcase." 21 | /> 22 | <Card 23 | href="https://mranand.com/series/javascript-fundamentals/" 24 | target="_blank" 25 | title="JavaScript Fundamentals (Blog)" 26 | body="This Blog series is written by Mr. Ånand while learning Javascript." 27 | /> 28 | <Card 29 | href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" 30 | target="_blank" 31 | title="JavaScript - MDN (Docs)" 32 | body="This well-structured docs are from MDN Web Docs. Learn JavaScript with examples." 33 | /> 34 | <Card 35 | href="https://medium.com/@Prajwal25/variables-in-javascript-var-let-and-const-bbeb3a089fac" 36 | target="_blank" 37 | title="Variables in JavaScript (var, let, and const)" 38 | body="This blog post gets you familiar with variables in JavaScript" 39 | /> 40 | 41 | <Card 42 | href="https://medium.com/@nishitbaria/how-does-javascript-work-behind-the-scenes-7c321b113bcc" 43 | target="_blank" 44 | title="How Does JavaScript Work Behind the Scene? JS Engine and Runtime Explained" 45 | body="This blog post guides you about how JavaScript Works Behind the Scenes – Demystifying the JS Engine and Runtime." 46 | /> 47 | 48 | <Card 49 | href="https://javascript.info/" 50 | target="_blank" 51 | title="JavaScript Reference (Docs)" 52 | body="How it's done now. From the basics to advanced topics with simple, but detailed explanations." 53 | /> 54 | <Card 55 | href="https://medium.com/@Prajwal25/what-is-dom-manipulation-33e5718cdcfa" 56 | target="_blank" 57 | title="What is DOM Manipulation?" 58 | body="Learn all about DOM manipulation in javaScript" 59 | /> 60 | </ul> 61 | </main> 62 | </Layout> 63 | 64 | <style> 65 | main { 66 | margin: auto; 67 | padding: 1.5rem; 68 | max-width: 120ch; 69 | } 70 | h1 { 71 | font-size: 3rem; 72 | font-weight: 800; 73 | margin: 0; 74 | } 75 | .text-gradient { 76 | background-image: var(--accent-gradient); 77 | -webkit-background-clip: text; 78 | -webkit-text-fill-color: transparent; 79 | background-size: 400%; 80 | background-position: 0%; 81 | } 82 | .instructions { 83 | line-height: 1.6; 84 | margin: 1rem 0; 85 | border: 1px solid rgba(var(--accent), 25%); 86 | background-color: white; 87 | padding: 1rem; 88 | border-radius: 0.4rem; 89 | } 90 | .instructions code { 91 | font-size: 0.875em; 92 | font-weight: bold; 93 | background: rgba(var(--accent), 12%); 94 | color: rgb(var(--accent)); 95 | border-radius: 4px; 96 | padding: 0.3em 0.45em; 97 | } 98 | .instructions strong { 99 | color: rgb(var(--accent)); 100 | } 101 | .link-card-grid { 102 | display: grid; 103 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 104 | gap: 1rem; 105 | padding: 0; 106 | } 107 | 108 | :root { 109 | --accent: 124, 58, 237; 110 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 111 | } 112 | 113 | /* code { 114 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 115 | Bitstream Vera Sans Mono, Courier New, monospace; 116 | } */ 117 | </style> 118 | -------------------------------------------------------------------------------- /src/pages/computer_networks/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Documentations" 3 | excerpt: "Resource Gallery - Computer Networks | We bring written resources realated to Computer Networks." 4 | publishDate: "2023-06-03T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1509475826633-fed577a2c71b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" 7 | # category: "Document" 8 | author: "Mr. Kartik" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [computer-network,document,cisco,github] 11 | --- 12 | 13 | # Blog-links 14 | 15 | ## ❤️The Art, Beauty, and Science of Computer Networks. 16 | 17 | ### 🧑🏼‍💻 Why Learn Computer Networking? 18 | Learning Computer Networking helps you to enhance your problem-solving and logical skills. You can easily solve real-life networking problems and develop your investigating skills by putting efforts to solve tough networking problems. There are tremendous opportunities available worldwide for Computer Networking professionals. Therefore learning computer networking is beneficial in all aspects. 19 | 20 | [**Read Full Article...**](https://www.guru99.com/data-communication-computer-network-tutorial.html)🔍 21 | 22 | ### 🧑🏼‍💻 How to Learn Computer Networking 23 | This Computer Networking tutorial help to understand the learning process of computer networking with the following steps: 24 | 25 | -> Start learning all the basic components of Computer Networking and understand each aspect very well. 26 | 27 | -> After basics, start learning some advanced stuff and understand all the advance components. 28 | 29 | -> After the advanced stuff is referred, start exploring various tools and components which are used in Computer Networking. 30 | 31 | -> Then, start working on some easy practical Networking scenarios, and once you are comfortable, you can also try to solve tough networking problems. 32 | 33 | -> You can also get certifications for Computer Networking like CCNA, which helps you get your dream job in Computer Networking. 34 | 35 | [**Read Full Article...**](https://www.guru99.com/data-communication-computer-network-tutorial.html)🔍 36 | 37 | ### 🧑🏼‍💻 When Computer Networks Were About Nationalism 38 | 39 | ARPANET, Minitel, Mark I and the race to invent the internet 40 | 41 | Some fun news first: I’ve signed a contract with No Starch Press to write my first technical book. The project can be roughly described as The Art of War for legacy modernization: when to do it, how to organize it, common problems and various tricks I’ve picked up to get stuff done. I got a wonderful opportunity this month to test out the content of early chapters on a live audience of software engineers when Øredev invited me to give a keynote in Malmö, Sweden. They asked me if I could do a talk on the intersection of technology and sociology and I was like “Oh boy… CAN I!” 42 | 43 | [**Read Full Article...**](https://medium.com/the-technical-archaeologist/when-computer-networks-were-about-nationalism-6b49567cbfab)🔍 44 | 45 | 46 | ### 🧑🏼‍💻 What computer networks are and how to actually understand them? 47 | 48 | Whether you are new to the world of development, or have been building things for a long time — or even if you’re a person who just likes computers and uses the internet daily — you’ve got to know the basics of networking and specifically Computer Networks. 49 | 50 | If you like digging more into servers, their security, and how you connect to your servers from a remote client, all of this requires some knowledge of computer networks and their components. I have tried to cover most of the topics concerning computer networks in this article. 51 | 52 | Also, from here, I will refer to “computer networks” simply as “networks”. 53 | 54 | [**Read Full Article...**](https://medium.com/free-code-camp/computer-networks-and-how-to-actually-understand-them-c1401908172d)🔍 55 | 56 | 57 | ### 🧑🏼‍💻 The Woman Who Made Computer Networks More Resilient 58 | 59 | In the coming weeks leading up to this year’s International Women’s Day, I’d like to talk about some of the inspirational women who’ve greatly influenced technology and whose groundbreaking inventions and contributions have shaped the world in which we live. 60 | 61 | This week’s iconic woman in Tech is Radia Perlman, the inventor of STP — the spanning tree protocol. 62 | 63 | 64 | [**Read Full Article...**](https://medium.com/our-world-tomorrow/the-woman-who-made-computer-networks-more-resilient-6971e85f6b9b)🔍 -------------------------------------------------------------------------------- /src/components/contactform.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Button from "./ui/button.astro"; 3 | --- 4 | 5 | <!-- To make this contact form work, create your free access key from https://web3forms.com/ 6 | Then you will get all form submissions in your email inbox. --> 7 | <form 8 | action="https://api.web3forms.com/submit" 9 | method="POST" 10 | id="form" 11 | class="needs-validation" 12 | novalidate> 13 | <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" /> 14 | <!-- Create your free access key from https://web3forms.com/ --> 15 | <input type="checkbox" class="hidden" style="display:none" name="botcheck" /> 16 | <div class="mb-5"> 17 | <input 18 | type="text" 19 | placeholder="Full Name" 20 | required 21 | class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100" 22 | name="name" 23 | /> 24 | <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"> 25 | Please provide your full name. 26 | </div> 27 | </div> 28 | <div class="mb-5"> 29 | <label for="email_address" class="sr-only">Email Address</label><input 30 | id="email_address" 31 | type="email" 32 | placeholder="Email Address" 33 | name="email" 34 | required 35 | class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100" 36 | /> 37 | <div class="empty-feedback text-red-400 text-sm mt-1"> 38 | Please provide your email address. 39 | </div> 40 | <div class="invalid-feedback text-red-400 text-sm mt-1"> 41 | Please provide a valid email address. 42 | </div> 43 | </div> 44 | <div class="mb-3"> 45 | <textarea 46 | name="message" 47 | required 48 | placeholder="Your Message" 49 | class="w-full px-4 py-3 border-2 placeholder:text-gray-800 rounded-md outline-none h-36 focus:ring-4 border-gray-300 focus:border-gray-600 ring-gray-100" 50 | ></textarea> 51 | <div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1"> 52 | Please enter your message. 53 | </div> 54 | </div> 55 | <Button type="submit" size="lg" block>Send Message</Button> 56 | <div id="result" class="mt-3 text-center"></div> 57 | </form> 58 | 59 | <style> 60 | .invalid-feedback, 61 | .empty-feedback { 62 | display: none; 63 | } 64 | 65 | .was-validated :placeholder-shown:invalid ~ .empty-feedback { 66 | display: block; 67 | } 68 | 69 | .was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback { 70 | display: block; 71 | } 72 | 73 | .is-invalid, 74 | .was-validated :invalid { 75 | border-color: #dc3545; 76 | } 77 | </style> 78 | 79 | <script is:inline> 80 | const form = document.getElementById("form"); 81 | const result = document.getElementById("result"); 82 | 83 | form.addEventListener("submit", function (e) { 84 | e.preventDefault(); 85 | form.classList.add("was-validated"); 86 | if (!form.checkValidity()) { 87 | form.querySelectorAll(":invalid")[0].focus(); 88 | return; 89 | } 90 | const formData = new FormData(form); 91 | const object = Object.fromEntries(formData); 92 | const json = JSON.stringify(object); 93 | 94 | result.innerHTML = "Sending..."; 95 | 96 | fetch("https://api.web3forms.com/submit", { 97 | method: "POST", 98 | headers: { 99 | "Content-Type": "application/json", 100 | Accept: "application/json", 101 | }, 102 | body: json, 103 | }) 104 | .then(async (response) => { 105 | let json = await response.json(); 106 | if (response.status == 200) { 107 | result.classList.add("text-green-500"); 108 | result.innerHTML = json.message; 109 | } else { 110 | console.log(response); 111 | result.classList.add("text-red-500"); 112 | result.innerHTML = json.message; 113 | } 114 | }) 115 | .catch((error) => { 116 | console.log(error); 117 | result.innerHTML = "Something went wrong!"; 118 | }) 119 | .then(function () { 120 | form.reset(); 121 | form.classList.remove("was-validated"); 122 | setTimeout(() => { 123 | result.style.display = "none"; 124 | }, 5000); 125 | }); 126 | }); 127 | </script> 128 | -------------------------------------------------------------------------------- /src/pages/css/resources.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Resources" 3 | excerpt: "Resource Gallery - CSS | We bring essential resources related to Cascading Style Sheet." 4 | publishDate: "2023-08-05T20:32:30Z" 5 | image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRDpIANYGZh3r5TdUTLg9LHgmyLsaPJjZqWQ&usqp=CAU" 6 | author: "Ms.Parul" 7 | layout: "@layouts/ContentLayout.astro" 8 | tags: [css, resources, document] 9 | --- 10 | 11 | ## 💡Top Resources for CSS Learning 12 | 13 | ### 🧑🏼‍💻 Why Learn CSS? 14 | Learn CSS, the artistic language of web design, to unleash creativity and transform ordinary websites into extraordinary masterpieces. With CSS, colors harmonize, layouts dance, and ideas come to life. Empower yourself to craft visually captivating and user-friendly web experiences that leave a lasting impact on every visitor. Embrace CSS, the magic brush of the digital realm! 15 | 16 | ### 🧑🏼‍💻 Where to Learn CSS? 17 | Discover the wonderful world of CSS and embark on your web design journey! Many excellent resources await to help you master this magical language. FreeCodeCamp is a fantastic starting point, offering interactive tutorials, projects, and a supportive community. You can also explore Codecademy, W3Schools, and MDN Web Docs for in-depth guides and practical examples. Unlock the secrets of CSS and watch your creativity flourish as you design stunning websites that captivate the digital realm! 18 | 19 | ### 🧑🏼‍💻 How to Learn CSS? 20 | 21 | -> Get Familiar with HTML: Before diving into CSS, understand the basic structure of web pages using HTML. Learn about HTML tags, elements, and their purpose. 22 | 23 | -> Learn CSS Fundamentals: Start with CSS basics, such as selectors, properties, and values. Experiment with changing colors, fonts, and layouts to grasp the core concepts. 24 | 25 | -> Online Tutorials and Courses: Explore online platforms like FreeCodeCamp, Codecademy, and MDN Web Docs. They offer structured CSS tutorials, interactive exercises, and projects to apply your knowledge. 26 | 27 | -> Hands-On Practice: Practice is key! Create simple web pages or mock-ups and apply CSS styles. Challenge yourself with different layouts and design elements. 28 | 29 | -> CSS Frameworks: Familiarize yourself with popular CSS frameworks like Bootstrap or Foundation. They offer pre-designed components and responsive layouts to speed up your web development process. 30 | 31 | -> Explore Advanced Concepts: Once comfortable with the basics, delve into more advanced topics like Flexbox, Grid, and animations. Keep building projects to reinforce your skills and stay updated with new CSS features. 32 | 33 | Remember, learning CSS takes time and practice. Be patient with yourself, keep experimenting, and always seek to improve. Happy coding! 34 | 35 | 36 | **Checkout Resources: 👇🏼** 37 | ### 🧑🏼‍💻 Master CSS with FreeCodeCamp 38 | 39 | Learn CSS with FreeCodeCamp's interactive platform. Engaging tutorials, projects, and a supportive community empower aspiring web designers to create stunning layouts and responsive web pages. It's free and rewarding! 40 | 41 | 🔗 [**FreeCodeCamp**](https://www.freecodecamp.org/learn/)🔍 42 | 43 | ### 🧑🏼‍💻 Unlock the Art of CSS with W3Schools 44 | 45 | Discover a unique CSS learning experience on W3Schools. Their step-by-step tutorials and practical examples offer hands-on learning. Master CSS selectors, layouts, and animations to design visually captivating and responsive websites. Embrace the power of CSS through W3Schools' comprehensive resources and become a skilled web designer! 46 | 47 | 🔗 [**W3Schools**](https://www.w3schools.com/)🔍 48 | 49 | ### 🧑🏼‍💻 CSS Mastery Awaits: Dive into MDN Web Docs 50 | 51 | Embark on a journey of CSS excellence with MDN Web Docs. Their comprehensive guides and in-depth documentation empower learners to understand CSS intricacies. Unravel CSS Flexbox, Grid, and transitions, and become a master of web design. Join the vibrant developer community and craft stunning, responsive websites with MDN Web Docs as your ultimate CSS companion. 52 | 53 | 🔗 [**MDN Web Docs**](https://developer.mozilla.org/en-US/docs/Web/CSS)🔍 54 | 55 | ### 🧑🏼‍💻 CSS Wizardry Unleashed: Enroll in Codecademy 56 | 57 | Unleash your CSS wizardry at Codecademy! Their interactive CSS courses offer an immersive learning experience. Dive into responsive design, animations, and CSS frameworks. Master the art of styling web pages and build real-world projects. Join a thriving community, and embark on a transformative coding adventure with Codecademy's empowering CSS curriculum. 58 | 59 | 🔗 [**Codecademy**](https://www.codecademy.com/resources/docs/css)🔍 60 | -------------------------------------------------------------------------------- /src/pages/opensource.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Picture } from "@astrojs/image/components"; 3 | import Container from "@components/container.astro"; 4 | import Sectionhead from "@components/sectionhead.astro"; 5 | import Layout from "@layouts/Layout.astro"; 6 | import { getFormattedDate } from "@utils/all"; 7 | import Card from '../components/card.astro'; 8 | import { log } from "astro/dist/core/logger/core"; 9 | import { Tweet, Vimeo, YouTube } from 'astro-embed'; 10 | 11 | // Use Astro.glob() to fetch all posts, and then sort them by date. 12 | const posts = (await Astro.glob("./opensource/*.{md,mdx}")).sort( 13 | (a, b) => 14 | new Date(b.frontmatter.publishDate).valueOf() - 15 | new Date(a.frontmatter.publishDate).valueOf() 16 | ); 17 | console.log(posts[0].frontmatter.image); 18 | --- 19 | 20 | <!-- <Layout title="Blog"> 21 | <Container> 22 | <Sectionhead> 23 | <Fragment slot="title">Open Source Resources</Fragment> 24 | 25 | <Fragment slot="desc" 26 | >We write about building startups and thoughts going on our mind.</Fragment 27 | > 28 | </Sectionhead> --> 29 | 30 | <Layout title="Open Source"> 31 | <main> 32 | <h1>Resource Gallery - <span class="text-gradient">Open Source</span></h1> 33 | <p class="instructions"> 34 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages/opensource">src/pages/opensource</a></code> on GitHub.<br /> 35 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 36 | <main class="mt-16"> 37 | <ul class="grid gap-16 max-w-4xl mx-auto"> 38 | { 39 | posts.map((post, index) => ( 40 | <li> 41 | <a href={post.url}> 42 | <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> 43 | <Picture 44 | src={post.frontmatter.image} 45 | widths={[200, 400, 800]} 46 | sizes="(max-width: 800px) 100vw, 800px" 47 | aspectRatio="16:9" 48 | alt="Thumbnail" 49 | loading={index === 0 ? "eager" : "lazy"} 50 | class="w-full rounded-md aspect-video" 51 | /> 52 | <div> 53 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 54 | {post.frontmatter.category} 55 | </span> 56 | 57 | <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 "> 58 | {post.frontmatter.title} 59 | </h2> 60 | 61 | <div class="flex gap-2 mt-3"> 62 | <span class="text-gray-400"> 63 | {post.frontmatter.author} 64 | </span> 65 | <span class="text-gray-400">• </span> 66 | <time 67 | class="text-gray-400" 68 | datetime={post.frontmatter.publishDate}> 69 | {getFormattedDate(post.frontmatter.publishDate)} 70 | </time> 71 | </div> 72 | </div> 73 | </div> 74 | </a> 75 | </li> 76 | )) 77 | } 78 | </ul> 79 | </main> 80 | </Container> 81 | </Layout> 82 | 83 | 84 | <style> 85 | main { 86 | margin: auto; 87 | padding: 1.5rem; 88 | max-width: 120ch; 89 | } 90 | h1 { 91 | font-size: 3rem; 92 | font-weight: 800; 93 | margin: 0; 94 | } 95 | .text-gradient { 96 | background-image: var(--accent-gradient); 97 | -webkit-background-clip: text; 98 | -webkit-text-fill-color: transparent; 99 | background-size: 400%; 100 | background-position: 0%; 101 | } 102 | .instructions { 103 | line-height: 1.6; 104 | margin: 1rem 0; 105 | border: 1px solid rgba(var(--accent), 25%); 106 | background-color: white; 107 | padding: 1rem; 108 | border-radius: 0.4rem; 109 | } 110 | .instructions code { 111 | font-size: 0.875em; 112 | font-weight: bold; 113 | background: rgba(var(--accent), 12%); 114 | color: rgb(var(--accent)); 115 | border-radius: 4px; 116 | padding: 0.3em 0.45em; 117 | } 118 | .instructions strong { 119 | color: rgb(var(--accent)); 120 | } 121 | .link-card-grid { 122 | display: grid; 123 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 124 | gap: 1rem; 125 | padding: 0; 126 | } 127 | 128 | :root { 129 | --accent: 124, 58, 237; 130 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 131 | } 132 | /* html { 133 | font-family: system-ui, sans-serif; 134 | background-color: #F6F6F6; 135 | } */ 136 | code { 137 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 138 | Bitstream Vera Sans Mono, Courier New, monospace; 139 | } 140 | </style> -------------------------------------------------------------------------------- /src/pages/frameworks.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | 6 | const { frontmatter } = Astro.props; 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">Frameworks/Libraries/Tools</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://react.dev" 18 | target="_blank" 19 | title="React (Docs)" 20 | body="React docs are comprehensive and interactive resource that teaches modern React, including 600+ interactive code examples, sandboxes, and demos." 21 | /> 22 | <Card 23 | href="https://vuejs.org/" 24 | target="_blank" 25 | title="Vue.js (Docs)" 26 | body="Vue is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications." 27 | /> 28 | <Card 29 | href="https://vitejs.dev/" 30 | target="_blank" 31 | title="Vite (Docs)" 32 | body="Vite is a modern build tool that aims to provide a faster and leaner development experience for modern web projects." 33 | /> 34 | <Card 35 | href="https://expressjs.com/" 36 | target="_blank" 37 | title="Express.js (Docs)" 38 | body="Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is designed for building web applications and APIs." 39 | /> 40 | <Card 41 | href="https://nextjs.org/" 42 | target="_blank" 43 | title="Next.js (Docs)" 44 | body="Next.js is a powerful and flexible React framework for building server-rendered, static, and dynamic web applications." 45 | /> 46 | <Card 47 | href="https://www.djangoproject.com/" 48 | target="_blank" 49 | title="Django (Docs)" 50 | body="A high-level Python framework that follows the model-view-controller (MVC) architectural pattern for rapid development." 51 | /> 52 | <Card 53 | 54 | href="https://nodejs.dev/en/learn/" 55 | target="_blank" 56 | title="Node.js Official Dev(Docs)" 57 | body="Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project!" 58 | /> 59 | <Card 60 | href="https://angular.io/docs/" 61 | target="_blank" 62 | title="Angular (Docs)" 63 | body="Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps." 64 | /> 65 | <Card 66 | href="https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene" 67 | target="_blank" 68 | title="Three.js" 69 | body="Three. js is a JavaScript library that allows developers to create 3D graphics for the web.Three. js is a JavaScript library that allows developers to create 3D graphics for the web." 70 | /> 71 | <Card 72 | href="https://nodejs.org/it/docs" 73 | target="_blank" 74 | title="Node.js (Docs)" 75 | body="Node.js is an open source server environment. Node.js allows you to run JavaScript on the server. " 76 | /> 77 | </ul> 78 | </main> 79 | 80 | </Layout> 81 | 82 | <style> 83 | main { 84 | margin: auto; 85 | padding: 1.5rem; 86 | max-width: 120ch; 87 | } 88 | h1 { 89 | font-size: 3rem; 90 | font-weight: 800; 91 | margin: 0; 92 | } 93 | .text-gradient { 94 | background-image: var(--accent-gradient); 95 | -webkit-background-clip: text; 96 | -webkit-text-fill-color: transparent; 97 | background-size: 400%; 98 | background-position: 0%; 99 | } 100 | .instructions { 101 | line-height: 1.6; 102 | margin: 1rem 0; 103 | border: 1px solid rgba(var(--accent), 25%); 104 | background-color: white; 105 | padding: 1rem; 106 | border-radius: 0.4rem; 107 | } 108 | .instructions code { 109 | font-size: 0.875em; 110 | font-weight: bold; 111 | background: rgba(var(--accent), 12%); 112 | color: rgb(var(--accent)); 113 | border-radius: 4px; 114 | padding: 0.3em 0.45em; 115 | } 116 | .instructions strong { 117 | color: rgb(var(--accent)); 118 | } 119 | .link-card-grid { 120 | display: grid; 121 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 122 | gap: 1rem; 123 | padding: 0; 124 | } 125 | 126 | :root { 127 | --accent: 124, 58, 237; 128 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 129 | } 130 | /* html { 131 | font-family: system-ui, sans-serif; 132 | background-color: #F6F6F6; 133 | } */ 134 | code { 135 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 136 | Bitstream Vera Sans Mono, Courier New, monospace; 137 | } 138 | </style> 139 | 140 | -------------------------------------------------------------------------------- /src/pages/blog/will-AI-replace-Humans.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: " Will AI replace Humans ?" 3 | excerpt: "Artificial Intelligence is the latest technology buzz topic thanks to the boom of ChatGPT. The AI-powered chatbot, created by Microsoft-backed OpenAI, has both impressed and shocked with its ability to answer questions, write essays and even argue legal cases" 4 | publishDate: "2023-07-19T01:05:36.020Z" 5 | image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTv2OAqixoQhRv0aMmMGOKb8B3Zjtu4gsX0Ng&usqp=CAU" 6 | category: "AI vs Human" 7 | author: "Himanshu Narware" 8 | layout: "@layouts/BlogLayout.astro" 9 | tags: [AI, Human, Jobs] 10 | --- 11 | 12 | Artificial Intelligence is the latest technology buzz topic thanks to the boom of ChatGPT. The AI-powered chatbot, created by Microsoft-backed OpenAI, has both impressed and shocked with its ability to answer questions, write essays and even argue legal cases. 13 | 14 | Its capabilities have also put another topic at the forefront of people’s minds: if, how and when artificial intelligence might impact their jobs and careers. And while concerns about AI-based technology taking over people’s jobs have spiraled, experts say it’s not quite that simple. 15 | 16 | ## Replacing or creating jobs? 17 | 18 | The short answer to the question of whether AI will replace some jobs is a big, fat “yes.” 19 | 20 | Developments in artificial intelligence mean that technology can achieve more and more, and that will, of course, impact jobs, Steven Miller, professor emeritus of information systems at Singapore Management University, says. 21 | 22 | “As physical machines, software systems, and combinations of hardware and software get more capable as a result of AI-enablement, it is increasingly possible as well as economically viable to replace a greater share of the portions of the human work of today with machines,” he told CNBC Make It. 23 | 24 | Certain roles are more vulnerable to this than others, Miller adds — especially ones that are highly repetitive or based on very specific instructions or rules that lay out what needs to be done. 25 | 26 | On the flipside, tasks that change often and therefore require things like adaptability and flexibility are harder for technology to replace. 27 | 28 | Jobs with a strong human element — such as being a therapist — are especially unlikely to be taken over by technology, according to Dimitris Papanikloaou, a professor of finance at the Kellogg School of Management at Northwestern University. “Jobs that emphasize interpersonal skills are much harder to be replaced by an AI,” he says. 29 | 30 | ## New jobs on the horizon? 31 | 32 | The concerns aren’t surprising, says Steve Chase, consulting leader at KPMG U.S. “As with most technological advancements, an initial fear of job loss and displacement among workers is natural.” 33 | 34 | However, it is crucial to keep several points in mind, he adds. First off, similar disruption has happened before: for example, the spread of computers, or more advanced and specialized machines in factories. 35 | 36 | These changed the way people work and what type of work they do — and they did make some jobs redundant — but today, we can’t imagine life without them. 37 | 38 | This is a centuries-old process, Miller says, adding that history shows if jobs are lost to new technology, other roles have been created in their place. 39 | 40 | “The creation of new jobs resulting from the ability to create and deliver of new types of goods and services … have far outpaced the number of jobs displaced,” he explains. 41 | 42 | ## Working with AI, not against it 43 | 44 | AI and the technology and products based on it are also still limited in certain ways, Papanikloaou points out. 45 | 46 | “I think at the moment we are quite far from ‘real AI’ in the sense that all the models that we have are about predicting the right response given a set of data. Much of what AI does is to synthesize existing knowledge with a specific goal in mind,” he says. “This is quite far from creating new knowledge.” 47 | 48 | People working alongside artificial intelligence, rather than being replaced by it, is therefore a more likely scenario for now, he says. “There are far more opportunities for using AI for augmenting the work of human employees than for fully automating the work of humans.” 49 | 50 | Chase agrees, explaining that many businesses are using AI to enhance efficiency or otherwise support employees. 51 | 52 | “Leaders are embracing AI to drive material efficiencies for their business and help workers do their jobs more effectively,” he says. “Leveraging AI allows organizations to reconfigure roles in a way that minimizes time spent on repetitive tasks and maximizes strategic decision making.” 53 | 54 | To do this successfully, businesses need to adapt, Chase says. This includes educating employees, helping them to upskill and reskill, and creating frameworks about using the AI technology in a responsible way. He said that some companies have already begun doing this. 55 | 56 | So whilst AI algorithms and the technology based on them might not be about to replace people’s jobs, they will likely become a bigger part of everyday working life — potentially sooner rather than later. 57 | 58 | **Follow Me on [Twitter](https://twitter.com/N_Himanshu_/), [Linkedin](https://www.linkedin.com/in/himanshunarware/)**. 59 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Resource gallery🛸](https://resourcegallery.live/) 2 | 3 | <div align="center"> 4 | <img src="https://forthebadge.com/images/badges/built-with-love.svg" /> 5 | <img src="https://forthebadge.com/images/badges/uses-brains.svg" /> 6 | <img src="https://forthebadge.com/images/badges/powered-by-responsibility.svg" /> 7 | <br> 8 | <img src="https://img.shields.io/github/forks/ZeroOctave/resource-gallery?style=for-the-badge" /> 9 | <img src="https://img.shields.io/github/issues/ZeroOctave/resource-gallery?style=for-the-badge" /> 10 | <img src="https://img.shields.io/github/stars/ZeroOctave/resource-gallery?style=for-the-badge" /> 11 | <img src="https://img.shields.io/github/last-commit/ZeroOctave/resource-gallery?style=for-the-badge" /> 12 | 13 | </div> 14 | Resource Gallery provides the tools and resources you need to evolve into a skilled developer. 15 | 16 | You can grab a cool Astro badge after successful merged PR from [here](https://astro.badg.es/contributors/) 17 | 18 | ## Deployed on Cloudflare pages 19 | <a href="https://pages.cloudflare.com/" target="blank"><img src="https://img.icons8.com/color/cloudflare"/></a> 20 | 21 | ![image](https://github.com/Astrodevil/resource-gallery/blob/main/public/screely.png) 22 | 23 | ### Pagespeed Score 24 | 25 | [![pagespeed](https://user-images.githubusercontent.com/1884712/210250214-7aa98167-7993-4b90-8138-326b8fa0c223.png)](https://pagespeed.web.dev/analysis/https-resourcegallery-live/ym3e98xd4c?form_factor=mobile) 26 | 27 | 28 | ## Installation 29 | 30 | You can clone the project directly from this repo to your local system. 31 | 32 | ### 1. Clone the repo 33 | 34 | ```bash 35 | git clone https://github.com/ZeroOctave/resource-gallery.git . 36 | ``` 37 | 38 | The `.` will clone it to the current directory so make sure you are inside your project folder first. 39 | 40 | ### 2. Install Dependencies 41 | 42 | ```bash 43 | npm install 44 | # or 45 | yarn install 46 | # or (recommended) 47 | pnpm install 48 | ``` 49 | 50 | ### 3. Start development Server 51 | 52 | ```bash 53 | npm run dev 54 | # or 55 | yarn dev 56 | # or (recommended) 57 | pnpm dev 58 | ``` 59 | 60 | ### Preview & Build 61 | 62 | ```bash 63 | npm run preview 64 | npm run build 65 | # or 66 | yarn preview 67 | yarn build 68 | # or (recommended) 69 | pnpm preview 70 | pnpm build 71 | ``` 72 | 73 | We recommend using [pnpm](https://pnpm.io/) to save disk space on your computer. 74 | 75 | ### Other Commands 76 | 77 | ```bash 78 | pnpm astro ... 79 | pnpm astro add 80 | pnpm astro --help 81 | ``` 82 | ### 5 Create a new branch: 83 | 84 | ```bash 85 | git checkout -b YourBranchName 86 | ``` 87 | 88 | ### 6. Sync your fork or your local repository with the origin repository: 89 | 90 | - In your forked repository, click on "Fetch upstream" 91 | - Click "Fetch and merge" 92 | 93 | ### Alternatively, Git CLI way to Sync forked repository with origin repository: 94 | 95 | ```bash 96 | git fetch upstream 97 | ``` 98 | 99 | ```bash 100 | git merge upstream/main 101 | ``` 102 | 103 | ### [Github Docs](https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github) for Syncing 104 | 105 | ### 7. Make your changes to the source code. 106 | 107 | ### 8. Stage your changes: 108 | 109 | ⚠️ **Make sure** not to commit `package.json` or `package-lock.json` file 110 | 111 | ⚠️ **Make sure** not to run the commands `git add .` or `git add *` 112 | 113 | > Instead, stage your changes for each file/folder 114 | > 115 | > By using public path it means it will add all files and folders under that folder, it is better to be specific 116 | 117 | ```bash 118 | git add public 119 | ``` 120 | 121 | _or_ 122 | 123 | ```bash 124 | git add "<files_you_have_changed>" 125 | ``` 126 | 127 | ### 9. Commit your changes: 128 | 129 | ```bash 130 | git commit -m "<your_commit_message>" 131 | ``` 132 | 133 | ### 10. Push your local commits to the remote repository: 134 | 135 | ```bash 136 | git push origin YourBranchName 137 | ``` 138 | 139 | **11.** Create a [Pull Request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request)! 140 | 141 | ## Project Structure 142 | 143 | Inside of your Astro project, you'll see the following folders and files: 144 | 145 | ``` 146 | / 147 | ├── public/ 148 | │ └── ... 149 | ├── src/ 150 | │ ├── components/ 151 | │ │ └── ... 152 | │ ├── layouts/ 153 | │ │ └── ... 154 | │ └── pages/ 155 | │ └── ... 156 | └── package.json 157 | ``` 158 | 159 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. 160 | 161 | Any static assets, like images, can be placed in the `public/` directory. 162 | 163 | ## TailwindCSS 164 | 165 | TailwindCSS is already configured in this repo, so you can start using it without any installation. 166 | 167 | ## Credits 168 | 169 | [Astroship](https://astroship.web3templates.com/) by [Web3Templates](https://web3templates.com) 170 | 171 | 172 | 173 | ## 👀 Want to learn more? 174 | 175 | Feel free to check out [Astro Docs](https://docs.astro.build) 176 | 177 | [![Built with Astro](https://astro.badg.es/v1/built-with-astro.svg)](https://astro.build) 178 | -------------------------------------------------------------------------------- /src/pages/blog/Top 10 AI-ML-tools and libraries.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Top 10 toolkits/libraries for AI/ML in 2023" 3 | excerpt: "As the craze for AI and ML is increasing day by day, here are some of the best toolkits/ plateform to run, compile and manage your codebase" 4 | publishDate: "2023-06-01T10:20:36.050Z" 5 | image: "https://thumbs.dreamstime.com/b/ai-artificial-intelligence-machine-learning-big-data-analysis-automation-technology-business-industrial-manufacturing-132528154.jpg" 6 | category: "Tips & Tricks" 7 | author: "Somya Kabra" 8 | layout: "@layouts/BlogLayout.astro" 9 | tags: [AI, programming, ML, Python] 10 | --- 11 | ![Tools](https://static.javatpoint.com/tutorial/machine-learning/images/machine-learning-tools.png) 12 | 13 | 14 | Having experimented with numerous software applications, tools, and Python libraries, I have identified a selection that I believe are highly beneficial for individuals who are new to the field. 15 | ## 1. TensorFlow: [Link](https://www.tensorflow.org/) 16 | 17 | TensorFlow, developed by Google, is a popular open-source library for machine learning and deep learning. It provides a comprehensive ecosystem of tools, libraries, and community resources that enable developers to build and deploy AI models with ease. With TensorFlow, you can create neural networks, handle data preprocessing, and perform complex computations efficiently. 18 |   19 | 20 | ## 2. PyTorch: [Link](https://pytorch.org/) 21 | 22 | PyTorch is another powerful deep learning framework widely used by researchers and developers. Developed by Facebook's AI research lab, PyTorch offers a dynamic computational graph and extensive support for neural networks. Its intuitive interface makes it easier for developers to experiment with different architectures and optimise models. 23 |   24 | 25 | ## 3. Scikit-learn: [Link](https://scikit-learn.org/stable/) 26 | 27 | Scikit-learn is a versatile Python library that provides efficient tools for data mining, data analysis, and machine learning. It offers a wide range of algorithms, including classification, regression, clustering, and dimensionality reduction. Scikit-learn's simplicity and consistency make it a favourite choice for developers, particularly those new to AI. 28 |   29 | 30 | ## 4. Keras: [Link](https://keras.io/) 31 | 32 | Keras is a user-friendly deep learning library that sits on top of TensorFlow. It simplifies the process of building neural networks by providing high-level abstractions and a modular architecture. Keras supports both convolutional and recurrent networks and offers an intuitive API for defining models, compiling them, and training them efficiently. 33 |   34 | 35 | ## 5. Apache Mahout: [Link](https://mahout.apache.org/) 36 | 37 | Apache Mahout is a distributed linear algebra framework built on top of Apache Hadoop. It provides a scalable and efficient environment for implementing machine learning algorithms, particularly for large-scale datasets. Mahout offers a rich set of algorithms, including clustering, classification, and collaborative filtering, enabling developers to leverage big data capabilities for AI tasks. 38 |   39 | 40 | ## 6. Microsoft Cognitive Toolkit (CNTK): [Link](https://learn.microsoft.com/en-us/cognitive-toolkit/) 41 | 42 | The Microsoft Cognitive Toolkit, also known as CNTK, is a deep learning library developed by Microsoft Research. CNTK offers excellent performance and scalability, making it suitable for both research and production environments. It supports various neural network types and provides powerful tools for training models on CPUs, GPUs, and distributed systems. 43 |   44 | 45 | ## 7. H2O.ai: [Link](https://h2o.ai/) 46 | 47 | H2O.ai is an open-source platform that simplifies the implementation of AI and machine learning models. It supports popular programming languages like Python and R, offering a wide range of algorithms and automated machine learning capabilities. H2O.ai's user-friendly interface and extensive documentation make it accessible to developers of all skill levels. 48 |   49 | 50 | ## 8. OpenCV: [Link](https://opencv.org/) 51 | 52 | OpenCV (Open Source Computer Vision Library) is a widely used computer vision and image processing library. It provides a comprehensive collection of algorithms and functions for tasks such as object detection, image recognition, and video analysis. OpenCV's cross-platform support and extensive documentation make it an essential tool for AI developers working with visual data. 53 |   54 | 55 | ## 9. RapidMiner: [Link](https://rapidminer.com/) 56 | 57 | RapidMiner is a powerful data science platform that facilitates end-to-end AI workflows. It offers an intuitive visual interface for building predictive models, performing data preprocessing, and deploying AI solutions. RapidMiner supports a wide range of algorithms and provides advanced features like automatic model optimisation and ensemble learning. 58 |   59 | 60 | ## 10. Jupyter Notebook: [Link](https://jupyter.org/) 61 | 62 | Jupyter Notebook is an interactive development environment that allows developers to create and share documents containing live code, equations, visualisations, and narrative text. It supports various programming languages, including Python, R, and Julia, making it an excellent tool for prototyping and experimenting. 63 |   64 | 65 | 66 | 67 | **Follow Me on [LinkedIn](https://www.linkedin.com/in/somya-kabra-693904227/) for more stuffs like this.** 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/pages/blog/JavaScript Top 10 Tips & Tricks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Top 10 JavaScript Tips & Tricks" 3 | excerpt: "JavaScript is one of the most popular scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else, you may have noticed the websites these became too interactive/responsive and more beautiful, all thanks to Js and it's libraries" 4 | publishDate: "2023-05-25T09:55:36.050Z" 5 | image: "https://1.bp.blogspot.com/-pdqcVeIQp64/XDX7TzdRdcI/AAAAAAAAM8E/ZmGuB6caZqIGmEflGHcj3zgXJJrmqRLdgCLcBGAs/w1200-h630-p-k-no-nu/Free%2BCourses%2Bto%2Blearn%2BJavaScript.jpg" 6 | category: "TIPS & TRICKS" 7 | author: "Raj Motwani" 8 | layout: "@layouts/BlogLayout.astro" 9 | tags: [webdev, scripting, javascript, Js, tips, tricks] 10 | --- 11 | 12 | JavaScript is one of the most popular scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else, you may have noticed the websites these became too interactive/responsive and more beautiful, all thanks to Js and it's libraries. 13 | Here are the top 10 tips & tricks which can make your day easier if you are using Js. 14 | 15 | ## 1. No More console.log() 16 | 17 | You must have used console.log() alot to print the outputs, but you can shorten it by- 18 | 19 | ``` 20 | var c = console.log.bind(document) 21 | c(121) 22 | c("Hello Guys") 23 | ``` 24 | 25 | Now you can console.log() anything just by using c(). 26 | 27 | ## 2. Use isNumber 28 | 29 | This tip will show how to check whether a value or variable holding a number ( integer, float and etc ) or not. 30 | 31 | ``` 32 | function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } 33 | console.log(isNumber(200)) // true 34 | console.log(isNumber(12.92)) // true 35 | console.log(isNumber("JavaScript")) // false 36 | ``` 37 | 38 | ## 3. camelCase 39 | 40 | While writing code you must have felt frustration at elast once while dealing with lots of variables, so it's better to name the as per their functionality and usage in "camelCase" writing methods. Majority of the developers use this method for writing compound words. 41 | 42 | ``` 43 | var maxNumber; 44 | var minTime; 45 | maxPower(); 46 | ``` 47 | 48 | ## 4. Quick Calculate Performance 49 | 50 | Do you know you can calculate the performance of your written JavaScript code using this tip is, personally I use it to calculate the performance of my JavaScript program realated to DSA. 51 | 52 | ``` 53 | const starttime = performance.now(); 54 | //some program 55 | const endtime = performance.now(); 56 | const totaltime = startTime - endTime 57 | console.log("function takes "+totaltime +" milisecond"); 58 | ``` 59 | 60 | ## 5. Exchange Variables 61 | 62 | You probably swap the two variables using a third variable temp/xyz. But do you know you can do it without using a 3rd variable exchange variables using destructuring. 63 | 64 | ``` 65 | var a = 4; 66 | var b = 8; 67 | [a,b] = [b,a] 68 | console.log(a,b) // 8 4 69 | ``` 70 | 71 | ## 6. Sort Alphabetically 72 | 73 | Sorting is a common problem in programming and you must have faced it at least once, this tip will save your valuable time by writing a long code to sort a string alphabetically. 74 | 75 | ``` 76 | function alphabetSort(arr) 77 | { 78 | return arr.sort((a, b) => a.localeCompare(b)); 79 | } 80 | let array = ["d", "c", "b", "a"] 81 | console.log(alphabetSort(array)) // ["a", "b", "c", "d"] 82 | ``` 83 | 84 | ## 7. Template Literals: 85 | 86 | Template literals provide a convenient way to concatenate strings and embed expressions within them. They use backticks (`) instead of single or double quotes. Template literals support multi-line strings and make string interpolation more readable. 87 | 88 | ``` 89 | const name = 'Raj'; 90 | const age = 21; 91 | const message = `My name is ${name} and I am ${age} years old.`; 92 | console.log(message); // Output: My name is Raj and I am 21 years old. 93 | ``` 94 | 95 | ## 8. Object Shorthand Notation: 96 | 97 | When defining object literals, you can use the shorthand notation for properties if the property name and value have the same identifier. It simplifies the code and makes it more concise. 98 | 99 | ``` 100 | const name = 'Raj'; 101 | const age = 21; 102 | 103 | // Without shorthand notation 104 | const person = { 105 | name: name, 106 | age: age 107 | }; 108 | 109 | // With shorthand notation 110 | const person = { name, age }; 111 | ``` 112 | 113 | ## 9. Use the Strict Mode: 114 | 115 | Enabling strict mode helps you write more reliable and maintainable code by catching common mistakes and enforcing stricter rules. It helps in avoiding accidental global variables, prohibits duplicate parameter names, and enables more secure JavaScript coding practices. To enable strict mode, add the following line at the beginning of your script or function: "use strict". 116 | 117 | ## 10. Creating completely empty objects 118 | 119 | If asked to create an empty object in JavaScript, our first go-to method will use in curly braces and assign it to a variable. But this is not a blank object as it still has object properties of JavaScript such as **proto** and other methods. 120 | 121 | // Using .create() method to create a completely empty object 122 | 123 | 124 | let raj = Object.create(null); 125 | 126 | // raj.__proto__ === "undefined" 127 | 128 | 129 | 130 | **Follow Me on [LinkedIn](https://www.linkedin.com/in/raj-motwani-978143204/)** 131 | 132 | 133 | -------------------------------------------------------------------------------- /src/pages/webdev.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from '../components/card.astro'; 3 | import Layout from '../layouts/Layout.astro'; 4 | 5 | 6 | const { frontmatter } = Astro.props; 7 | --- 8 | 9 | <Layout title="Resources | Resource Gallery"> 10 | <main> 11 | <h1>Resource Gallery - <span class="text-gradient">Web Development</span></h1> 12 | <p class="instructions"> 13 | To contribute, open the directory <code><a href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages">src/pages</a></code> on GitHub.<br /> 14 | <strong><a href="https://github.com/Astrodevil/resource-gallery/issues">Open Issue:</a></strong> Improve the "Resource Gallery" and earn credits as early contributor🎉</p> 15 | <ul role="list" class="link-card-grid"> 16 | <Card 17 | href="https://www.geeksforgeeks.org/web-development/" 18 | target="_blank" 19 | title="Web Development - GFG (Docs)" 20 | body="Learn modern Web Development from this guided roadmap filled with content, examples, resources, and project ideas. This course is prepared by Showwcase." 21 | /> 22 | <Card 23 | href="https://mranand.com/series/javascript-fundamentals/" 24 | target="_blank" 25 | title="JavaScript Fundamentals (Blog)" 26 | body="This Blog series is writted by Mr. Ånand while learning Javascript." 27 | /> 28 | <Card 29 | href="https://dev.to/aspittel/a-complete-beginners-guide-to-react-2cl6" 30 | target="_blank" 31 | title="A Complete Beginner's Guide to React (Blog)" 32 | body="This Blog series is writted by Ali spittel for beginner react developers." 33 | /> 34 | 35 | <Card 36 | href="https://www.w3schools.com/react/react_intro.asp" 37 | target="_blank" 38 | title="Learn REACT (website)" 39 | body="A comprehensive online resource for learning React, the JavaScript library for building user interfaces." 40 | /> 41 | 42 | 43 | <Card 44 | href="https://nodejstutor.com/introduction-to-node-js/" 45 | target="_blank" 46 | title="NodeJs Basics (Website)" 47 | body="A basic development guide for all the developers starting to learn NodeJs for the first time." 48 | /> 49 | 50 | <Card 51 | href="https://www.mongodb.com/basics/mongodb-tutorials" 52 | target="_blank" 53 | title="MongoDB Tutorial (Website)" 54 | body="Best official tutorial for those who wanted to supplement their WebDev knowledge with MongoDB" 55 | 56 | <Card 57 | href="https://www.w3schools.io/learn/nextjs-tutorial" 58 | target="_blank" 59 | title="Learn Nextjs Tutorial (website)" 60 | body="NextJS Learn step by step to create a NextJS application with examples of folder structure pros and cons advantages and disadvantages." 61 | /> 62 | <Card 63 | href="https://nextjs.org/blog" 64 | target="_blank" 65 | title="NextJS Blogs (website)" 66 | body="NextJS is a framework to build a full-stack application with features such as server-side rendering using React framework. This section consists of latest Blogs" 67 | /> 68 | <Card 69 | href="https://nextjs.org/docs" 70 | target="_blank" 71 | title="NextJS Documentation (website)" 72 | body="Next.js is a framework for building web applications. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. This Section conssts of NextJs Documentation." 73 | 74 | /> 75 | <Card 76 | href="https://www.theodinproject.com/" 77 | target="_blank" 78 | title="The Odin Project (Web Development)" 79 | body="Your Career in Web Development Starts Here and It' free to Learn" 80 | /> 81 | <Card 82 | href="https://devdocs.io/" 83 | target="_blank" 84 | title="DevDocs.io (Docs)" 85 | body="DevDocs combines multiple developer documentations in a clean and organized web UI with instant search, offline support, mobile version, dark theme, keyboard shortcuts, and more." 86 | /> 87 | </ul> 88 | </main> 89 | 90 | </Layout> 91 | 92 | <style> 93 | main { 94 | margin: auto; 95 | padding: 1.5rem; 96 | max-width: 120ch; 97 | } 98 | h1 { 99 | font-size: 3rem; 100 | font-weight: 800; 101 | margin: 0; 102 | } 103 | .text-gradient { 104 | background-image: var(--accent-gradient); 105 | -webkit-background-clip: text; 106 | -webkit-text-fill-color: transparent; 107 | background-size: 400%; 108 | background-position: 0%; 109 | } 110 | .instructions { 111 | line-height: 1.6; 112 | margin: 1rem 0; 113 | border: 1px solid rgba(var(--accent), 25%); 114 | background-color: white; 115 | padding: 1rem; 116 | border-radius: 0.4rem; 117 | } 118 | .instructions code { 119 | font-size: 0.875em; 120 | font-weight: bold; 121 | background: rgba(var(--accent), 12%); 122 | color: rgb(var(--accent)); 123 | border-radius: 4px; 124 | padding: 0.3em 0.45em; 125 | } 126 | .instructions strong { 127 | color: rgb(var(--accent)); 128 | } 129 | .link-card-grid { 130 | display: grid; 131 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 132 | gap: 1rem; 133 | padding: 0; 134 | } 135 | 136 | :root { 137 | --accent: 124, 58, 237; 138 | --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #000000 30%, rgb(255, 255, 255) 60%); 139 | } 140 | /* html { 141 | font-family: system-ui, sans-serif; 142 | background-color: #F6F6F6; 143 | } */ 144 | code { 145 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 146 | Bitstream Vera Sans Mono, Courier New, monospace; 147 | } 148 | </style> 149 | 150 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | gmail. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /src/pages/blog/A-Complete-Guide-to-React-Hooks-Discover-Their-Features.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "A Complete Guide to React Hooks: Discover Their Features" 3 | excerpt: "Simplifying State Management with useState Hook. In this blog post, we will take a comprehensive look at React hooks, their benefits, and how they can supercharge your development experience. So, let's dive in and explore the power of React hooks!" 4 | publishDate: "2023-06-06" 5 | image: "https://cdn.hashnode.com/res/hashnode/image/upload/v1686031456388/e555f9b1-ccb0-49d1-8e2a-a861983938ac.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp" 6 | category: "JavaScript" 7 | author: "Arjun" 8 | layout: "@layouts/BlogLayout.astro" 9 | tags: [webdev, scripting, javascript, React, React Hooks] 10 | --- 11 | 12 | ## **About** 13 | 14 | Welcome to the exciting world of React.js hooks! If you're a web developer diving into React.js, you're about to embark on a journey that will revolutionize the way you build dynamic and interactive user interfaces. 15 | 16 | In this blog post, we will take a comprehensive look at React hooks, their benefits, and how they can supercharge your development experience. So, let's dive in and explore the power of React hooks! 17 | 18 | ## **Understanding React Hooks:** 19 | 20 | React hooks are a relatively new addition to React.js that allows you to use state and other React features in functional components. With hooks, you can write cleaner, more reusable code and eliminate the need for class components in many cases. It's a paradigm shift that opens up new possibilities for developers. 21 | 22 | ### _The useState Hook_ 23 | 24 | - One of the most commonly used hooks is useState, which enables you to add state to functional components. With useState, you can easily manage and update state within your components. It's a game-changer that simplifies state management and eliminates the complexities of class-based components. 25 | 26 | ### _The useEffect Hook_ 27 | 28 | - Next up is the useEffect hook, which allows you to perform side effects in your functional components. Side effects can include fetching data from an API, subscribing to events, or manipulating the DOM. useEffect ensures that your side effects are performed at the right time during the component's lifecycle, replacing the need for lifecycle methods in class components. 29 | 30 | ### _Additional Hooks_ 31 | 32 | - React provides a rich set of additional hooks to address various scenarios. Some popular ones include useContext for accessing context within functional components, useRef for creating mutable references, and useCallback for memoizing functions. These hooks empower you to tackle complex problems with ease, promoting code reuse and modularity. 33 | 34 | ### _Custom Hooks_ 35 | 36 | - One of the most exciting aspects of React hooks is the ability to create custom hooks. Custom hooks allow you to extract reusable logic from your components and share it across your application. They encapsulate stateful logic and make it easy to compose functionality. 37 | 38 | ## **Setting Up React Hooks** 39 | 40 | _To start using React hooks, you'll need to set up a React project. Here's a quick guide to get you started:_ 41 | 42 | - Install Node.js and npm (Node Package Manager) if you haven't already. 43 | 44 | - Create a new directory for your project and navigate into it using your preferred terminal. 45 | 46 | - Run the following command to create a new React project using Create React App: 47 | 48 | ``` 49 | npx create-react-app my-app 50 | ``` 51 | 52 | - Once the project is created, navigate to the project directory: 53 | 54 | ``` 55 | cd my-app 56 | ``` 57 | 58 | - Finally, start the development server: 59 | 60 | ``` 61 | npm start 62 | ``` 63 | 64 | Now you're ready to dive into the world of React hooks and start building amazing applications! 65 | 66 | ## **Resources to Dive Deeper** 67 | 68 | To further explore React Hooks, check out these resources: 69 | 70 | - [Official React documentation on useState:](https://react.dev/reference/react/useState#usage) The official documentation provides detailed instructions on using React Hooks, Adding State, Updating objects and much more. 71 | 72 | - [Official React documentation on useEffect:](https://react.dev/reference/react/useEffect) Learn about Wrapping Effects in custom Hooks, Controlling a non-React widget, Fetching data with Effects and much more here. 73 | 74 | - [Official React documentation on additional hooks:](https://reactjs.org/docs/hooks-reference.html) You can read about much more advanced Hooks with official docs. For a beginner, I do not recommend jumping on these right away ‼️ 75 | 76 | - [Web Dev Simplified React Hooks Playlist:](https://www.youtube.com/watch?v=O6P86uwfdR0&list=PLZlA0Gpn_vH8EtggFGERCwMY5u5hOjf-h) I highly recommend this playlist for every beginner to start with. In it, Kyle from WDS clearly explains the purpose of each hook through simple and easy-to-understand mini-projects. 77 | 78 | ## **Conclusion** 79 | 80 | React hooks have revolutionized the way developers build user interfaces in React.js. With their ability to manage state, perform side effects, and promote code reuse, hooks provide a more elegant and concise way to write React components. By embracing hooks, you'll unlock the true potential of React.js and take your web development skills to the next level. 81 | 82 | So, what are you waiting for? Embrace the power of React hooks and join the vibrant community of web developers who are building remarkable applications with ease and joy! 83 | 84 | Stay tuned for more exciting articles and tutorials on React.js and web development. Follow me for regular updates and let's continue our journey of exploration together. 85 | 86 | ## **Note:** 87 | 88 | ``` 89 | React.js and its ecosystem are constantly evolving, so make sure to refer to the official React documentation and community resources for the latest updates and best practices. Enjoy your React hooks adventure! 90 | ``` 91 | 92 | # **Happy coding!🙏😉** 93 | -------------------------------------------------------------------------------- /src/pages/blog/Here are some Tips That Will Keep You Motivated When Learning To Code As a Beginner In 2023.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Here are some Tips That Will Keep You Motivated When Learning To Code As a Beginner In 2023" 3 | excerpt: "Here are some Tips That Will Keep You Motivated When Learning To Code As a Beginner In 2023 4 | Pick a specialty, Get well-organized resources for your niche, Build something from what you have learned & Network" 5 | publishDate: "2023-01-27T10:20:36.050Z" 6 | image: "https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8Y29kaW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" 7 | category: "Tips & Tricks" 8 | author: "AbdulSalaam Noibi" 9 | layout: "@layouts/BlogLayout.astro" 10 | tags: [coding, programming, motivation, beginner] 11 | --- 12 | Here are some Tips That Will Keep You Motivated When Learning To Code As a Beginner In 2023 13 | Pick a specialty 14 | 15 | **1** Get well-organized resources for your niche 16 | 17 | **2** Learn 18 | 19 | **3** Build something from what you have learned 20 | 21 | **4** Network 22 | 23 | ## 1. PICK A SPECIALITY 24 | There is a proverb that says 25 | 26 | "if you want to succeed limit yourself" 27 | 28 | Firstly, when starting to code you must pick a niche. This makes sure that you don't overwhelm yourself. it limits your learning and allows you to devote your attention to a particular subject, so you can finally create a starting point. 29 | 30 | Software development is very versatile, so you need to start by getting an overview of what programming and software development involves. 31 | 32 | After you have gotten a general overview, you should pick a particular area of specialization that excites you. 33 | 34 | "BELIEVE IN YOURSELF AND YOU ARE HALFWAY THERE" -Theodore Roosevelt 35 | 36 | ## 2. FIND STRUCTURED LEARNING RESOURCES FOR YOUR NICHE 37 | 38 | Congratulation on picking a niche!!!. The next step is to find structured learning resources that have a progressive list and subject alongside some coding exercises for practice. 39 | 40 | There are factors you need to consider when choosing a learning resources 41 | What languages and technologies are used in this field? 42 | 43 | what tools do you need either some software environment or a code editor?(VS-CODE, SUBLIME TEXT, WEBSTORM E.T.C) 44 | 45 | what is your learning order, most fields require you to learn one tool/language first before learning another to build your fundamental knowledge? Remember to know the fundamentals before moving forward. 46 | 47 | ## 3. LEARN 48 | Another saying goes 49 | 50 | "If you chase two rabbits, you will not catch any" 51 | 52 | Good job, you have done it. you have figured out what you need to learn to smash your goals by finding learning resources to use. Now it is time to learn those resources sequentially, not simultaneously. 53 | 54 | ## BE CONSISTENT 55 | The first thing to do is to set aside time for your learning. Set a specific time every day during your daily schedule within which you will learn and be selfish about it 56 | 57 | Two hours of learning every day is a lot better than 15 hours of learning in one day. It is pertinent to note that consistency is key in a self-taught process. 58 | 59 | SET GOALS 60 | Also, for effective learning, you have to set weekly goals so you can hold yourself accountable. what do you want to know or be able to do at the end of the month?. How will you structure your learning process per week to be able to achieve this goal? 61 | 62 | STAY FOCUSED 63 | It is also important that you remember to focus on your outlined learning plan and your chosen learning resources 64 | 65 | In the tech-sphere, there is always a shiny new object i.e something new to learn. Please don't get carried away or overwhelmed, that's the reason why you need to focus. 66 | 67 | One completed tutorial is better than 10 sampled tutorial 68 | 69 | ## 4. BUILD SOMETHING! (PROJECT) 70 | "The difference between you and those with talent is practice; a lot of it" 71 | 72 | As a beginner in web development, it is easy to get stuck in the tutorial zone, but building projects are mutually exclusive to the learning phase and it makes you become a better developer because by building projects, it makes you practice what you have learned in the tutorial zone 73 | 74 | One way to get some practice is, at the end of every module, think of features that you can add to the project that you have coded. Just try to build something with the new knowledge that you have gained in the tutorial. 75 | 76 | It doesn't have to be too fancy. The most important thing is that you have written the code, run into errors, google how to debug it and gain more understanding. 77 | 78 | "Practice solidifies knowledge" 79 | 80 | so practice. One completed project is better than 10 watched tutorials. 81 | 82 | ## 5. NETWORK 83 | To network simply means to learn in public and put yourself out there 84 | 85 | Join a community and attend Meetups 86 | A community challenges you and inspires you at the same time. You become aware of people who are in the same field as you are with the same struggle you have 87 | 88 | SELL YOURSELF 89 | Opportunity no longer comes to the most qualified, it goes to the most visibly qualified 90 | 91 | selling yourself means talking about yourself and what you are currently doing. This gives you more experience and could open up a lot of opportunities for you 92 | 93 | Set up a git-hub account, learn how to use the git-hub environment, git commands e.t.c and pushes code there for future reference. You can equally start a Twitter account and talk about what you are currently learning or building. 94 | 95 | Lastly, remember your consistency and perseverance toward learning will pay off.GOODLUCK!!! 96 | 97 | **If you enjoy reading this article, subscribe to my [youtube channel](youtube.com/channel/UCJQmbtiMOaWro6ZCstnkhkg). THANKS FOR READING.** 98 | 99 | 100 | -------------------------------------------------------------------------------- /src/pages/opensource/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Documentations" 3 | excerpt: "Resource Gallery - Open Source | We bring written resources realated to open source technology." 4 | publishDate: "2023-01-24T11:39:36.050Z" 5 | # canonical: "https://resource-gallery.pages.dev/" 6 | image: "https://images.unsplash.com/photo-1509475826633-fed577a2c71b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" 7 | # category: "Document" 8 | author: "Mr. Ånand" 9 | layout: "@layouts/ContentLayout.astro" 10 | tags: [opensource,document,git,github] 11 | --- 12 | 13 | <!-- <details> 14 | <summary>🗒️ Cheat Sheets</summary> 15 | 16 | - [Git](https://github.com/Astrodevil/Open-Source-Gallery/blob/main/src/git-cheat-sheet-education.pdf) 17 | - [JavaScript](https://github.com/Astrodevil/Open-Source-Gallery/blob/main/src/javascript.png) 18 | - [Linux](https://github.com/Astrodevil/Open-Source-Gallery/blob/main/src/linux.png) 19 | - [Markdown](https://github.com/Astrodevil/Open-Source-Gallery/blob/main/src/markdown-cheatsheet.pdf) 20 | </details> --> 21 | 22 | ## ❤️The Art, Beauty, and Science of Open Source. 23 | 24 | ### Open Source Software: The Art, the Beauty, and the Science. 25 | When you are experiencing difficulties while utilizing a centralized software system, the first thing you do is contact a team or the corporation to report your issue and get assistance. 26 | 27 | "Open source" refers to something that individuals can alter and share since its architecture is publicly accessible to everyone under the terms of a licensing agreement. 28 | 29 | Let's get down to business. Let's go ahead and do it. 30 | 31 | [**Read Full Article...**](https://asiedu-dev.hashnode.dev/open-source-software-the-art-the-beauty-and-the-science)🔍 32 | 33 | ### Participating in Open Source Communities 34 | Open source has become the de facto way to build software — not only in tech, but across diverse industries. As companies use open source code to build their own commercial products and services, they also see the strategic value of contributing back to those projects. 35 | 36 | This guide covers what it means to contribute to open source as an organization and how to become a good corporate citizen. Learn how open source projects are structured, how to contribute, why it’s important to devote internal developer resources to participation, and why it’s important to create a strategy for open source participation and management. 37 | 38 | [**Read Full Article...**](https://www.linuxfoundation.org/resources/open-source-guides/participating-in-open-source-communities)🔍 39 | 40 | ## 🧑🏼‍💻Get Into Open Source 41 | 42 | ### How To Contribute To Open-Source Projects As A Beginner 43 | This article is about getting started with open source and more specifically how to contribute to open source as a beginner contributing to open source projects is a great way of improving your programming skills and contributing to the community also. 44 | 45 | It's important to understand that contributing to open source projects is not all about coding you can contribute in other ways such as improving the documentation, organizing the project, designing stuff reviewing code, and so on. 46 | 47 | Before moving on further I would advise everyone to read the contribution guidelines and the code of conduct they describe the workflow required to make contributions. 48 | 49 | [**Read Full Article...**](https://dev.to/muthuannamalai12/how-to-contribute-to-open-source-projects-as-a-beginner-6cb)🔍 50 | 51 | ### How to Contribute to Open Source Projects – A Beginner's Guide 52 | As we continue to advance technologically, more and more products and services are being transformed into software ready services. And many of them are being made open-source. 53 | 54 | Most developers and companies depend on open-source tools and software to make their products work. And I think you'll agree with me that the number of contributions to open-source have really grown lately – not just for solo developers but from companies also. 55 | 56 | [**Read Full Article...**](https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/)🔍 57 | 58 | ### How to Contribute to Open Source Projects as a Non-Coder? 59 | Open Source is a term used to describe software whose original source code is freely available, can be redistributed, and also modified. Open Source embodies a spirit of collaboration, transparency, and community-oriented contributions, among other things. 60 | 61 | Like many people, I used to think it was impossible to contribute to open source projects without having any coding skills but reading various articles written by Kesi Parker and Edidiong Asikpo helped debunk this notion. 62 | 63 | [**Read Full Article...**](https://benny.hashnode.dev/how-to-contribute-to-open-source-projects-as-a-non-coder)🔍 64 | 65 | ### How NOT to contribute to Open Source on GitHub: Tips For Beginners 66 | While maintaining some projects on GitHub during Hacktoberfest 2021, I came across many new open source contributors. They are just starting their open-source journey and making mistakes. In the beginning, making mistakes is not a bad thing. But, correctly contributing to open-source projects is also very important. 67 | 68 | Understanding of project like how folders are arranged? how files are linked? which tech stack is used? is the most important thing before raising an issue or making a pull request in any project on GitHub. 69 | 70 | [**Read Full Article...**](https://blog.mranand.com/how-not-to-contribute-to-open-source-on-github-tips-for-beginners?deviceType=desktop)🔍 71 | 72 | 73 | ## 📚Learn These 74 | 75 | - [**Git Basics**](https://h.daily-dev-tips.com/series/git-basics) : This series will cover some basic, but very important topics in Git, GitHub, and Open source. 76 | - [**Important GIT commands**](https://sohamderoy.hashnode.dev/series/git) : This series consists of articles related to version controlling system git and regarding its important commands. 77 | - [**How to Write Good Commit Messages**](https://www.freecodecamp.org/news/writing-good-commit-messages-a-practical-guide/): A Practical Git Guide 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /src/pages/css.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Picture } from "@astrojs/image/components"; 3 | import Container from "@components/container.astro"; 4 | import Sectionhead from "@components/sectionhead.astro"; 5 | import Layout from "@layouts/Layout.astro"; 6 | import { getFormattedDate } from "@utils/all"; 7 | import Card from "../components/card.astro"; 8 | import { log } from "astro/dist/core/logger/core"; 9 | import { Tweet, Vimeo, YouTube } from "astro-embed"; 10 | // Use Astro.glob() to fetch all posts, and then sort them by date. 11 | const posts = (await Astro.glob("./css/*.{md,mdx}")).sort( 12 | (a, b) => 13 | new Date(b.frontmatter.publishDate).valueOf() - 14 | new Date(a.frontmatter.publishDate).valueOf() 15 | ); 16 | console.log(posts[0].frontmatter.image); 17 | --- 18 | 19 | <Layout title="Cascading Style Sheet(CSS)"> 20 | <main> 21 | <h1> 22 | Resource Gallery - <span class="text-gradient">Cascading Style Sheet</span> 23 | </h1> 24 | <p class="instructions"> 25 | To contribute, open the directory <code> 26 | <a 27 | href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages/css" 28 | >src/pages/css</a 29 | ></code> 30 | > on Github.<br /> 31 | <strong 32 | ><a href="https://github.com/Astrodevil/resource-gallery/issues" 33 | >Open Issue:</a> 34 | ></strong 35 | > Improve the "Resource Gallery" and earn credits as early contributor🎉 36 | </p> 37 | <main class ="mt-16"> 38 | <ul class="grid gap-16 max-w-4xl mx-auto"> 39 | { 40 | posts.map((post, index) => ( 41 | <li> 42 | <a href={post.url}> 43 | <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> 44 | <Picture 45 | src={post.frontmatter.image} 46 | widths={[200, 400, 800]} 47 | sizes="(max-width: 800px) 100vw, 800px" 48 | aspectRatio="16:9" 49 | alt="Thumbnail" 50 | loading={index === 0 ? "eager" : "lazy"} 51 | class="w-full rounded-md aspect-video" 52 | /> 53 | <div> 54 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 55 | {post.frontmatter.category} 56 | </span> 57 | 58 | <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 "> 59 | {post.frontmatter.title} 60 | </h2> 61 | 62 | <div class="flex gap-2 mt-3"> 63 | <span class="text-gray-400"> 64 | {post.frontmatter.author} 65 | </span> 66 | <span class="text-gray-400"> 67 | •{" "} 68 | </span> 69 | <time 70 | class="text-gray-400" 71 | datetime={ 72 | post.frontmatter.publishDate 73 | }> 74 | {getFormattedDate( 75 | post.frontmatter.publishDate 76 | )} 77 | </time> 78 | </div> 79 | </div> 80 | </div> 81 | </a> 82 | </li> 83 | )) 84 | } 85 | </ul> 86 | </main> 87 | </main> 88 | </Layout> 89 | 90 | <style> 91 | main { 92 | margin: auto; 93 | padding: 1.5rem; 94 | max-width: 120ch; 95 | } 96 | h1 { 97 | font-size: 3rem; 98 | font-weight: 800; 99 | margin: 0; 100 | } 101 | .text-gradient { 102 | background-image: var(--accent-gradient); 103 | -webkit-background-clip: text; 104 | -webkit-text-fill-color: transparent; 105 | background-size: 400%; 106 | background-position: 0%; 107 | } 108 | .instructions { 109 | line-height: 1.6; 110 | margin: 1rem 0; 111 | border: 1px solid rgba(var(--accent), 25%); 112 | background-color: white; 113 | padding: 1rem; 114 | border-radius: 0.4rem; 115 | } 116 | .instructions code { 117 | font-size: 0.875em; 118 | font-weight: bold; 119 | background: rgba(var(--accent), 12%); 120 | color: rgb(var(--accent)); 121 | border-radius: 4px; 122 | padding: 0.3em 0.45em; 123 | } 124 | .instructions strong { 125 | color: rgb(var(--accent)); 126 | } 127 | .link-card-grid { 128 | display: grid; 129 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 130 | gap: 1rem; 131 | padding: 0; 132 | } 133 | 134 | :root { 135 | --accent: 124, 58, 237; 136 | --accent-gradient: linear-gradient( 137 | 45deg, 138 | rgb(var(--accent)), 139 | #000000 30%, 140 | rgb(255, 255, 255) 60% 141 | ); 142 | } 143 | /* html { 144 | font-family: system-ui, sans-serif; 145 | background-color: #F6F6F6; 146 | } */ 147 | code { 148 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 149 | DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; 150 | } 151 | </style> 152 | -------------------------------------------------------------------------------- /src/pages/resource.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Card from "../components/card.astro"; 3 | import Layout from "../layouts/Layout.astro"; 4 | 5 | const { frontmatter } = Astro.props; 6 | --- 7 | 8 | <Layout title="Resources | Resource Gallery"> 9 | <main> 10 | <h1>Welcome to <span class="text-gradient">Resource Gallery</span></h1> 11 | <p class="instructions"> 12 | To contribute, open the directory <code 13 | ><a 14 | href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages" 15 | >src/pages</a 16 | ></code 17 | > on GitHub.<br /> 18 | <strong 19 | ><a href="https://github.com/Astrodevil/resource-gallery/issues" 20 | >Open Issue:</a 21 | ></strong 22 | > Improve the "Resource Gallery" and earn credits as early contributor🎉 23 | </p> 24 | <ul role="list" class="link-card-grid"> 25 | <Card 26 | href="/opensource" 27 | target="_blank" 28 | title="Open Source" 29 | body="Learn basics of open source with articles, videos and code resources." 30 | /> 31 | <Card 32 | href="/javascript" 33 | target="_blank" 34 | title="JavaScript" 35 | body="JavaScript is omnipresent, be it front-end, back-end, or full stack. Learn modern JavaScript now." 36 | /> 37 | <Card 38 | href="/computer_networks" 39 | target="_blank" 40 | title="Computer Networks" 41 | body="Learn about computer networks with these comprehensive resources." 42 | /> 43 | <Card 44 | href="/cybersecurity" 45 | target="_blank" 46 | title="Cyber Security" 47 | body="Unlock the Secrets of Cybersecurity: Safeguard Your Digital World!!!." 48 | /> 49 | <Card 50 | href="/webdev" 51 | target="_blank" 52 | title="Web Dev" 53 | body="Supercharge your project with new frameworks and libraries." 54 | /> 55 | <Card 56 | href="/aiml" 57 | target="_blank" 58 | title="AI/ML" 59 | body="Explore the latest trends in AI and ML, and learn how to apply them to your work." 60 | /> 61 | <Card 62 | href="https://astro.build/chat/" 63 | target="_blank" 64 | title="Data Structures" 65 | body="Come say hi to our amazing Discord community." 66 | /> 67 | <Card 68 | href="https://astro.build/themes/" 69 | target="_blank" 70 | title="Android" 71 | body="Learn the skills you need to create beautiful, functional, and user-friendly Android apps." 72 | /> 73 | <Card 74 | href="https://astro.build/themes/" 75 | target="_blank" 76 | title="DevOps" 77 | body="Learn DevOps and become a valuable asset to any organization.." 78 | /> 79 | <Card 80 | href="https://astro.build/themes/" 81 | target="_blank" 82 | title="Flutter" 83 | body="Powerful and versatile framework for developing cross-platform apps." 84 | /> 85 | <Card 86 | href="https://astro.build/themes/" 87 | target="_blank" 88 | title="APIs" 89 | body="Access the APIs to get the data you need, when you need it." 90 | /> 91 | <Card 92 | href="/git" 93 | target="_blank" 94 | title="Git" 95 | body="With Git, you can keep your code organized and under control. Learn how to use it efficiently." 96 | /> 97 | <Card 98 | href="/frameworks" 99 | target="_blank" 100 | title="Frameworks" 101 | body="Explore various frameworks to enhance your development skills." 102 | /> 103 | <Card 104 | href="/python" 105 | target="_blank" 106 | title="Python" 107 | body="These resources will help you learn Python from the basics to advanced topics." 108 | /> 109 | <Card 110 | href="https://astro.build/themes/" 111 | target="_blank" 112 | title="SQL" 113 | body="SQL resources for beginners, intermediate, and advanced developers." 114 | /> 115 | <Card 116 | href="https://astro.build/themes/" 117 | target="_blank" 118 | title="Java" 119 | body="Learn Java with these comprehensive resources." 120 | /> 121 | <Card 122 | href="/cloud" 123 | target="_blank" 124 | title="Cloud" 125 | body="The cloud is made up of servers in data centers all over the world. Learn Cloud at your own Pace." 126 | /> 127 | <Card 128 | href="/css" 129 | target="_blank" 130 | title="CSS" 131 | body="CSS resources: Tutorials, guides, and tools for mastering web styling." 132 | /> 133 | </ul> 134 | </main> 135 | 136 | </Layout> 137 | 138 | <style> 139 | main { 140 | margin: auto; 141 | padding: 1.5rem; 142 | max-width: 120ch; 143 | } 144 | h1 { 145 | font-size: 3rem; 146 | font-weight: 800; 147 | margin: 0; 148 | } 149 | .text-gradient { 150 | background-image: var(--accent-gradient); 151 | -webkit-background-clip: text; 152 | -webkit-text-fill-color: transparent; 153 | background-size: 400%; 154 | background-position: 0%; 155 | } 156 | .instructions { 157 | line-height: 1.6; 158 | margin: 1rem 0; 159 | border: 1px solid rgba(var(--accent), 25%); 160 | background-color: white; 161 | padding: 1rem; 162 | border-radius: 0.4rem; 163 | } 164 | .instructions code { 165 | font-size: 0.875em; 166 | font-weight: bold; 167 | background: rgba(var(--accent), 12%); 168 | color: rgb(var(--accent)); 169 | border-radius: 4px; 170 | padding: 0.3em 0.45em; 171 | } 172 | .instructions strong { 173 | color: rgb(var(--accent)); 174 | } 175 | .link-card-grid { 176 | display: grid; 177 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 178 | gap: 1rem; 179 | padding: 0; 180 | } 181 | 182 | :root { 183 | --accent: 124, 58, 237; 184 | --accent-gradient: linear-gradient( 185 | 45deg, 186 | rgb(var(--accent)), 187 | #000000 30%, 188 | rgb(255, 255, 255) 60% 189 | ); 190 | } 191 | /* html { 192 | font-family: system-ui, sans-serif; 193 | background-color: #F6F6F6; 194 | } */ 195 | code { 196 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 197 | DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; 198 | } 199 | </style> 200 | -------------------------------------------------------------------------------- /src/pages/blog/creating-personal-blog-with-hugo-and-netlify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Creating Personal Blog With Hugo and Netlify" 3 | description: "Blog website using a static site generator Hugo and deploying it to Netlify" 4 | excerpt: "Blog website using a static site generator Hugo and deploying it to Netlify" 5 | publishDate: "2022-11-08T11:39:36.050Z" 6 | # canonicalURL: 'https://mranand.com/blogs/creating-personal-blog-with-hugo-and-netlify/' 7 | image: "https://cdn.hashnode.com/res/hashnode/image/upload/v1667839642415/gsj4oCKRj.png?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp" 8 | category: "Tutorials" 9 | author: "Mr. Ånand" 10 | layout: "@layouts/BlogLayout.astro" 11 | tags: ["hugo", "netlify", "blog", "website"] 12 | --- 13 | 14 | 15 | In this Article! I am going to share the step-by-step method I followed while building a blog website using a static site generator **[Hugo](https://gohugo.io/)** and deploying it to **Netlify**. I encountered some small errors during the process, I am gonna entertain those as well. Let's get started. 16 | 17 | As I am using windows, commands may be different, follow [official docs](https://gohugo.io/documentation/) while building your own website using Hugo. Also, I am running all commands on git bash. 18 | 19 | ## Step 1 20 | 21 | Create any folder on Desktop and open `git bash`. Now time to install hugo. 22 | 23 | ``` 24 | choco install hugo -confirm 25 | ``` 26 | Or if you need the “extended” Sass/SCSS version: for some supported theme. Better install it from `cmd` by running it as administrator. 27 | 28 | ``` 29 | choco install hugo-extended -confirm 30 | ``` 31 | ## Step 2 32 | Now it's time to create a new website and add a cool theme to it. You can choose any theme from the Hugo theme library. Run below commands. 33 | 34 | ``` 35 | // Choose your site name in place of blognerd 36 | 37 | hugo new site blognerd 38 | ``` 39 | The above will create a new Hugo site in a folder named `blognerd`. 40 | 41 | It's time to add theme to the site. See [theme library](https://themes.gohugo.io/) for a list of themes to consider. I am using `Beautiful Hugo` theme. 42 | 43 | ``` 44 | cd blognerd 45 | git init 46 | ``` 47 | 48 | 49 | ![screely-1667833660447.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667833676076/PKpoGXV0I.png) 50 | You can access GitHub repo of themes by just clicking download button on theme page as you can see in above picture. 51 | Now, download the theme from GitHub and add it to site's theme directory. 52 | 53 | ``` 54 | git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo 55 | ``` 56 | Now, add the theme to the site configuration: 57 | ``` 58 | echo theme = \"beautifulhugo\" >> config.toml 59 | ``` 60 | ## Step 3 61 | It's time to add some contents to the newly created site. You can also add them manually but I am creating this using commands. 62 | ``` 63 | hugo new posts/my-first-post.md 64 | ``` 65 | Now open the whole folder in any code editor, I am using VS Code and edit your post as you wish. You can see the screenshot of mine editor below for reference of posts files. 66 | 67 | ![screely-1667833744897.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667833762276/DsRn2AOzq.png) 68 | 69 | Above contents may be different for the theme you are using. I am going to add one of my article contents to this post for example, see below screenshot. You can edit metadata between `---` accordingly. 70 | 71 | ![screely-1667833945407.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667833967425/FSSqga1wz.png) 72 | 73 | ## Step 4 74 | Now, is the time to test the site we created by running Hugo server. 75 | ``` 76 | hugo server -D //run only this command 77 | 78 | Start building sites … 79 | hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio 80 | 81 | | EN 82 | -------------------+------ 83 | Pages | 10 84 | Paginator pages | 0 85 | Non-page files | 0 86 | Static files | 184 87 | Processed images | 0 88 | Aliases | 2 89 | Sitemaps | 1 90 | Cleaned | 0 91 | 92 | Built in 4884 ms 93 | 94 | ``` 95 | You can check live view on `http://localhost:1313/` 96 | 97 | here's mine live view... 98 | ![screely-1667834152910.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667834183565/PRMRHTJtn.png) 99 | 100 | ## Step 5 101 | It's time to give final touch to the newly created site. You can customize theme or configure site by opening up `config.toml` in a text editor and edit accordingly. In this theme I took help from their GitHub [readme](https://github.com/halogenica/beautifulhugo#readme). 102 | 103 | Now, time to build static site. Run below command after closing hugo server by pressing `Ctrl+c` 104 | 105 | ``` 106 | hugo -D //run only this command 107 | 108 | Start building sites … 109 | hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio 110 | 111 | | EN 112 | -------------------+------ 113 | Pages | 16 114 | Paginator pages | 0 115 | Non-page files | 0 116 | Static files | 184 117 | Processed images | 0 118 | Aliases | 5 119 | Sitemaps | 1 120 | Cleaned | 0 121 | 122 | Total in 763 ms 123 | ``` 124 | ## Step 6 125 | Everything is now set. You can add more blog contents or customize the site according to your requirement. Now the final work is to deploy it to **Netlify**. 126 | 127 | I have Netlify CLI installed so I am going to the final step, You can install it by going to Netlify official docs and login to your account. 128 | 129 | After installing, run following commands: 130 | ``` 131 | netlify dev 132 | ``` 133 | It will open Netlify live server on `http://localhost:8888`. After checking everything on your site, close netlify server by pressing `Ctrl+c`. Time to deploy.. 134 | ``` 135 | netlify deploy //run only this command 136 | 137 | This folder isn't linked to a site yet 138 | ? What would you like to do? (Use arrow keys) 139 | > Link this directory to an existing site 140 | + Create & configure a new site 141 | 142 | ``` 143 | Follow the instruction and select `(.)` directory. Now deploy production. 144 | 145 | ``` 146 | netlify deploy --prod 147 | 148 | // select public directory 149 | ``` 150 | Hurray! Now you can access your live website with Netlify domain from Netlify dashboard. I have created one other site and it's deployed, check my live website [here...](https://bloggeek.netlify.app/) 151 | 152 | -------------------------------------------------------------------------------- /src/pages/cybersecurity.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Picture } from "@astrojs/image/components"; 3 | import Container from "@components/container.astro"; 4 | import Sectionhead from "@components/sectionhead.astro"; 5 | import Layout from "@layouts/Layout.astro"; 6 | import { getFormattedDate } from "@utils/all"; 7 | import Card from "../components/card.astro"; 8 | import { log } from "astro/dist/core/logger/core"; 9 | import { Tweet, Vimeo, YouTube } from "astro-embed"; 10 | // Use Astro.glob() to fetch all posts, and then sort them by date. 11 | const posts = (await Astro.glob("./cybersecurity/*.{md,mdx}")).sort( 12 | (a, b) => 13 | new Date(b.frontmatter.publishDate).valueOf() - 14 | new Date(a.frontmatter.publishDate).valueOf() 15 | ); 16 | console.log(posts[0].frontmatter.image); 17 | --- 18 | 19 | <!-- <Layout title="Blog"> 20 | <Container> 21 | <Sectionhead> 22 | <Fragment slot="title">Open Source Resources</Fragment> 23 | <Fragment slot="desc" 24 | >We write about building startups and thoughts going on our mind.</Fragment 25 | > 26 | </Sectionhead> --> 27 | <Layout title="Cyber Security"> 28 | <main> 29 | <h1> 30 | Resource Gallery - <span class="text-gradient">Cyber Security</span> 31 | </h1> 32 | <p class="instructions"> 33 | To contribute, open the directory <code 34 | ><a 35 | href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages/opensource" 36 | >src/pages/cybersecurity</a 37 | ></code 38 | > on GitHub.<br /> 39 | <strong 40 | ><a href="https://github.com/Astrodevil/resource-gallery/issues" 41 | >Open Issue:</a 42 | ></strong 43 | > Improve the "Resource Gallery" and earn credits as early contributor🎉 44 | </p> 45 | <main class="mt-16"> 46 | <ul class="grid gap-16 max-w-4xl mx-auto"> 47 | { 48 | posts.map((post, index) => ( 49 | <li> 50 | <a href={post.url}> 51 | <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> 52 | <Picture 53 | src={post.frontmatter.image} 54 | widths={[200, 400, 800]} 55 | sizes="(max-width: 800px) 100vw, 800px" 56 | aspectRatio="16:9" 57 | alt="Thumbnail" 58 | loading={index === 0 ? "eager" : "lazy"} 59 | class="w-full rounded-md aspect-video" 60 | /> 61 | <div> 62 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 63 | {post.frontmatter.category} 64 | </span> 65 | 66 | <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 "> 67 | {post.frontmatter.title} 68 | </h2> 69 | 70 | <div class="flex gap-2 mt-3"> 71 | <span class="text-gray-400"> 72 | {post.frontmatter.author} 73 | </span> 74 | <span class="text-gray-400"> 75 | •{" "} 76 | </span> 77 | <time 78 | class="text-gray-400" 79 | datetime={ 80 | post.frontmatter.publishDate 81 | }> 82 | {getFormattedDate( 83 | post.frontmatter.publishDate 84 | )} 85 | </time> 86 | </div> 87 | </div> 88 | </div> 89 | </a> 90 | </li> 91 | )) 92 | } 93 | </ul> 94 | </main> 95 | </main> 96 | </Layout> 97 | 98 | <style> 99 | main { 100 | margin: auto; 101 | padding: 1.5rem; 102 | max-width: 120ch; 103 | } 104 | h1 { 105 | font-size: 3rem; 106 | font-weight: 800; 107 | margin: 0; 108 | } 109 | .text-gradient { 110 | background-image: var(--accent-gradient); 111 | -webkit-background-clip: text; 112 | -webkit-text-fill-color: transparent; 113 | background-size: 400%; 114 | background-position: 0%; 115 | } 116 | .instructions { 117 | line-height: 1.6; 118 | margin: 1rem 0; 119 | border: 1px solid rgba(var(--accent), 25%); 120 | background-color: white; 121 | padding: 1rem; 122 | border-radius: 0.4rem; 123 | } 124 | .instructions code { 125 | font-size: 0.875em; 126 | font-weight: bold; 127 | background: rgba(var(--accent), 12%); 128 | color: rgb(var(--accent)); 129 | border-radius: 4px; 130 | padding: 0.3em 0.45em; 131 | } 132 | .instructions strong { 133 | color: rgb(var(--accent)); 134 | } 135 | .link-card-grid { 136 | display: grid; 137 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 138 | gap: 1rem; 139 | padding: 0; 140 | } 141 | 142 | :root { 143 | --accent: 124, 58, 237; 144 | --accent-gradient: linear-gradient( 145 | 45deg, 146 | rgb(var(--accent)), 147 | #000000 30%, 148 | rgb(255, 255, 255) 60% 149 | ); 150 | } 151 | /* html { 152 | font-family: system-ui, sans-serif; 153 | background-color: #F6F6F6; 154 | } */ 155 | code { 156 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 157 | DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; 158 | } 159 | </style> 160 | -------------------------------------------------------------------------------- /src/pages/computer_networks.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Picture } from "@astrojs/image/components"; 3 | import Container from "@components/container.astro"; 4 | import Sectionhead from "@components/sectionhead.astro"; 5 | import Layout from "@layouts/Layout.astro"; 6 | import { getFormattedDate } from "@utils/all"; 7 | import Card from "../components/card.astro"; 8 | import { log } from "astro/dist/core/logger/core"; 9 | import { Tweet, Vimeo, YouTube } from "astro-embed"; 10 | 11 | // Use Astro.glob() to fetch all posts, and then sort them by date. 12 | const posts = (await Astro.glob("./computer_networks/*.{md,mdx}")).sort( 13 | (a, b) => 14 | new Date(b.frontmatter.publishDate).valueOf() - 15 | new Date(a.frontmatter.publishDate).valueOf() 16 | ); 17 | console.log(posts[0].frontmatter.image); 18 | --- 19 | 20 | <!-- <Layout title="Blog"> 21 | <Container> 22 | <Sectionhead> 23 | <Fragment slot="title">Open Source Resources</Fragment> 24 | 25 | <Fragment slot="desc" 26 | >We write about building startups and thoughts going on our mind.</Fragment 27 | > 28 | </Sectionhead> --> 29 | <Layout title="Computer Networks"> 30 | <main> 31 | <h1> 32 | Resource Gallery - <span class="text-gradient">Computer Networks</span> 33 | </h1> 34 | <p class="instructions"> 35 | To contribute, open the directory <code 36 | ><a 37 | href="https://github.com/Astrodevil/resource-gallery/tree/main/src/pages/opensource" 38 | >src/pages/computer_networks</a 39 | ></code 40 | > on GitHub.<br /> 41 | <strong 42 | ><a href="https://github.com/Astrodevil/resource-gallery/issues" 43 | >Open Issue:</a 44 | ></strong 45 | > Improve the "Resource Gallery" and earn credits as early contributor🎉 46 | </p> 47 | <main class="mt-16"> 48 | <ul class="grid gap-16 max-w-4xl mx-auto"> 49 | { 50 | posts.map((post, index) => ( 51 | <li> 52 | <a href={post.url}> 53 | <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center"> 54 | <Picture 55 | src={post.frontmatter.image} 56 | widths={[200, 400, 800]} 57 | sizes="(max-width: 800px) 100vw, 800px" 58 | aspectRatio="16:9" 59 | alt="Thumbnail" 60 | loading={index === 0 ? "eager" : "lazy"} 61 | class="w-full rounded-md aspect-video" 62 | /> 63 | <div> 64 | <span class="text-blue-400 uppercase tracking-wider text-sm font-medium"> 65 | {post.frontmatter.category} 66 | </span> 67 | 68 | <h2 class="text-3xl font-semibold leading-snug tracking-tight mt-1 "> 69 | {post.frontmatter.title} 70 | </h2> 71 | 72 | <div class="flex gap-2 mt-3"> 73 | <span class="text-gray-400"> 74 | {post.frontmatter.author} 75 | </span> 76 | <span class="text-gray-400"> 77 | •{" "} 78 | </span> 79 | <time 80 | class="text-gray-400" 81 | datetime={ 82 | post.frontmatter.publishDate 83 | }> 84 | {getFormattedDate( 85 | post.frontmatter.publishDate 86 | )} 87 | </time> 88 | </div> 89 | </div> 90 | </div> 91 | </a> 92 | </li> 93 | )) 94 | } 95 | </ul> 96 | </main> 97 | </main> 98 | </Layout> 99 | 100 | <style> 101 | main { 102 | margin: auto; 103 | padding: 1.5rem; 104 | max-width: 120ch; 105 | } 106 | h1 { 107 | font-size: 3rem; 108 | font-weight: 800; 109 | margin: 0; 110 | } 111 | .text-gradient { 112 | background-image: var(--accent-gradient); 113 | -webkit-background-clip: text; 114 | -webkit-text-fill-color: transparent; 115 | background-size: 400%; 116 | background-position: 0%; 117 | } 118 | .instructions { 119 | line-height: 1.6; 120 | margin: 1rem 0; 121 | border: 1px solid rgba(var(--accent), 25%); 122 | background-color: white; 123 | padding: 1rem; 124 | border-radius: 0.4rem; 125 | } 126 | .instructions code { 127 | font-size: 0.875em; 128 | font-weight: bold; 129 | background: rgba(var(--accent), 12%); 130 | color: rgb(var(--accent)); 131 | border-radius: 4px; 132 | padding: 0.3em 0.45em; 133 | } 134 | .instructions strong { 135 | color: rgb(var(--accent)); 136 | } 137 | .link-card-grid { 138 | display: grid; 139 | grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); 140 | gap: 1rem; 141 | padding: 0; 142 | } 143 | 144 | :root { 145 | --accent: 124, 58, 237; 146 | --accent-gradient: linear-gradient( 147 | 45deg, 148 | rgb(var(--accent)), 149 | #000000 30%, 150 | rgb(255, 255, 255) 60% 151 | ); 152 | } 153 | /* html { 154 | font-family: system-ui, sans-serif; 155 | background-color: #F6F6F6; 156 | } */ 157 | code { 158 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, 159 | DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; 160 | } 161 | </style> 162 | --------------------------------------------------------------------------------