diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml deleted file mode 100644 index 91f8945..0000000 --- a/.github/FUNDING.yml +++ /dev/null @@ -1,2 +0,0 @@ -github: [vansh-codes] -# You can visit my GitHub sponsors profile at: https://github.com/sponsors/vansh-codes \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml deleted file mode 100644 index 16d9f80..0000000 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ /dev/null @@ -1,34 +0,0 @@ -name: "🐞 Chaos Report" -description: "Found a bug in the world of ChaosWeb? Let us know if it's more than just intentional chaos!" -title: "CHAOS REPORT:" -labels: ["chaos", "bug"] -body: - - type: checkboxes - attributes: - label: "Is there an actual issue here?" - description: "Please check if what you're experiencing is an actual bug or just a part of the chaotic experience." - options: - - label: "I have verified this isn't part of ChaosWeb's intentional disorder" - required: true - - type: textarea - attributes: - label: "Describe the unexpected!" - description: "A brief description of what went wrong, and why you think it's a real bug and not just more chaos." - validations: - required: true - - type: checkboxes - attributes: - label: "Confirm" - options: - - label: "I understand ChaosWeb is intentionally designed to be messy" - required: true - - label: "I agree to follow this project's Code of Conduct" - required: true - - label: "I found a genuine bug amidst the chaos" - required: true - - label: "I'm enjoying the mess!" - required: true - - label: "I'm SWOC registered Contributor" - # - label: "I'm GSSOC'24 Extd registered Contributor" - # - label: "I'm Hacktoberfest registered Contributor" - diff --git a/.github/ISSUE_TEMPLATE/confusion.yml b/.github/ISSUE_TEMPLATE/confusion.yml deleted file mode 100644 index 2595db8..0000000 --- a/.github/ISSUE_TEMPLATE/confusion.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: "πŸŒ€ Confusion Report" -description: "Lost in the chaos? Share your moments of confusion here!" -title: "CONFUSION:" -labels: ["confusion", "feedback"] -body: - - type: textarea - attributes: - label: "What left you confused?" - description: "Describe the part of ChaosWeb that bewildered you the most. Let us know how lost you felt and where!" - validations: - required: true - - type: textarea - attributes: - label: "What were you expecting?" - description: "Share what you *thought* would happen before things went off the rails." - validations: - required: true - - type: checkboxes - attributes: - label: "Confirm" - options: - - label: "I understand that confusion is a part of the ChaosWeb experience" - required: true - - label: "I agree to follow this project's Code of Conduct" - required: true - - label: "I want to work on improving this confusing element" - - label: "I'm SWOC registered Contributor" - # - label: "I'm GSSOC'24 Extd registered Contributor" - # - label: "I'm Hacktoberfest registered Contributor" diff --git a/.github/ISSUE_TEMPLATE/documentation.yml b/.github/ISSUE_TEMPLATE/documentation.yml deleted file mode 100644 index 8726ace..0000000 --- a/.github/ISSUE_TEMPLATE/documentation.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: "πŸ“š Chaos Documentation Update" -description: "Spotted a gap in our chaotic documentation or have a way to make it even more unpredictable? Let's hear it!" -title: "Documentation Chaos:" -labels: ["documentation", "chaos"] -body: - - type: textarea - attributes: - label: "Describe the Documentation Update" - description: "Explain the update or improvement you'd like to add to our documentation. How will it embrace the chaos?" - validations: - required: true - - type: textarea - attributes: - label: "Add References or Examples" - description: "Got any screenshots, sketches, or examples? Visual aids help us navigate the chaos better." - validations: - required: false - - type: checkboxes - attributes: - label: "Confirm" - options: - - label: "I understand that my update will add to the chaos and I'm okay with it" - required: true - - label: "I agree to follow this project's Code of Conduct" - required: true - - label: "I want to work on this documentation update" - - label: "I'm SWOC registered Contributor" - # - label: "I'm GSSOC'24 Extd registered Contributor" - # - label: "I'm Hacktoberfest registered Contributor" diff --git a/.github/ISSUE_TEMPLATE/feature.yml b/.github/ISSUE_TEMPLATE/feature.yml deleted file mode 100644 index 448fe50..0000000 --- a/.github/ISSUE_TEMPLATE/feature.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: "✨ Chaos Feature Suggestion" -description: "Got an idea to make ChaosWeb even more chaotic? Share your twisted vision with us!" -title: "Chaotic Feat:" -labels: ["enhancement", "chaos"] -body: - - type: textarea - attributes: - label: "Describe your chaotic idea" - description: "Tell us how you'd like to make ChaosWeb even messier or more unpredictable." - validations: - required: true - - type: textarea - attributes: - label: "Add Screenshots or Sketches" - description: "Visual aids are welcome in this chaotic world! Add any screenshots or sketches to help explain your idea." - validations: - required: true - - type: checkboxes - attributes: - label: "Confirm" - options: - - label: "I understand that my idea will add to the chaos and I'm okay with it" - required: true - - label: "I agree to follow this project's Code of Conduct" - required: true - - label: "I want to work on this feature" - - label: "I'm SWOC registered Contributor" - # - label: "I'm GSSOC'24 Extd registered Contributor" - # - label: "I'm Hacktoberfest registered Contributor" diff --git a/.github/scripts/update_structure.py b/.github/scripts/update_structure.py deleted file mode 100644 index 087a077..0000000 --- a/.github/scripts/update_structure.py +++ /dev/null @@ -1,101 +0,0 @@ -import os -import github -from github import Github - -# Helper function to recursively build the repo structure and include file extensions -def get_repo_structure(path='.', prefix=''): - structure = [] - try: - items = sorted(os.listdir(path)) - except FileNotFoundError: - print(f"Path not found: {path}") - return structure - - for i, item in enumerate(items): - if item.startswith('.'): - continue # Skip hidden files and directories - item_path = os.path.join(path, item) - is_last = i == len(items) - 1 - current_prefix = '└── ' if is_last else 'β”œβ”€β”€ ' - - if os.path.isdir(item_path): - # Directory case - structure.append(f"{prefix}{current_prefix}{item}/") - next_prefix = prefix + (' ' if is_last else 'β”‚ ') - structure.extend(get_repo_structure(item_path, next_prefix)) - else: - # File case with extension - file_name, file_extension = os.path.splitext(item) - structure.append(f"{prefix}{current_prefix}{file_name}{file_extension}") - - return structure - -# Function to update the repo_structure.txt file -def update_structure_file(structure): - try: - with open('repo_structure.txt', 'w') as f: - f.write('\n'.join(structure)) - print("repo_structure.txt updated successfully.") - except IOError as e: - print(f"Error writing to repo_structure.txt: {e}") - -# Function to update the README.md with the new structure -def update_README(structure): - try: - with open('PROJECT_STRUCTURE.md', 'r') as f: - content = f.read() - except FileNotFoundError: - print("PROJECT_STRUCTURE.md not found.") - return - - start_marker = '' - end_marker = '' - - start_index = content.find(start_marker) - end_index = content.find(end_marker) - - if start_index != -1 and end_index != -1: - new_content = ( - content[:start_index + len(start_marker)] + - '\n```\n' + '\n'.join(structure) + '\n```\n' + - content[end_index:] - ) - try: - with open('PROJECT_STRUCTURE.md', 'w') as f: - f.write(new_content) - print("PROJECT_STRUCTURE.md updated with new structure.") - except IOError as e: - print(f"Error writing to PROJECT_STRUCTURE.md: {e}") - else: - print("Markers not found in PROJECT_STRUCTURE.md. Structure not updated.") - -# Main function to compare and update repository structure -def main(): - gh_token = os.getenv('GH_TOKEN') - gh_repo = os.getenv('GITHUB_REPOSITORY') - - if not gh_token or not gh_repo: - print("Environment variables GH_TOKEN and GITHUB_REPOSITORY must be set.") - return - - g = Github(gh_token) - repo = g.get_repo(gh_repo) - - current_structure = get_repo_structure() - - try: - # Fetch the contents of repo_structure.txt from GitHub - contents = repo.get_contents("repo_structure.txt") - existing_structure = contents.decoded_content.decode().split('\n') - except github.GithubException: - existing_structure = None - - if current_structure != existing_structure: - update_structure_file(current_structure) - update_README(current_structure) - print("Repository structure updated.") - else: - print("No changes in repository structure.") - -if __name__ == "__main__": - main() \ No newline at end of file diff --git a/.github/workflows/autocomment-iss-close.yml b/.github/workflows/autocomment-iss-close.yml deleted file mode 100644 index 75ad52c..0000000 --- a/.github/workflows/autocomment-iss-close.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: Comment on Issue Close - -on: - issues: - types: [closed] - -jobs: - greet-on-close: - runs-on: ubuntu-latest - permissions: - issues: write - steps: - - name: Greet User - uses: actions/github-script@v5 - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - script: | - const issue = context.payload.issue; - const issueCreator = issue.user.login; - const issueNumber = issue.number; - - const greetingMessage = `Hello @${issueCreator}! Your chaotic issue #${issueNumber} has been closed. Thank you for your contribution!`; - - github.rest.issues.createComment({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: issueNumber, - body: greetingMessage - }); \ No newline at end of file diff --git a/.github/workflows/autocomment-pr-merge.yml b/.github/workflows/autocomment-pr-merge.yml deleted file mode 100644 index c6a53da..0000000 --- a/.github/workflows/autocomment-pr-merge.yml +++ /dev/null @@ -1,36 +0,0 @@ -name: Auto Comment on PR Merge - -on: - pull_request: - types: [closed] - -permissions: - issues: write - pull-requests: write - -jobs: - comment: - runs-on: ubuntu-latest - permissions: - pull-requests: write - if: github.event.pull_request.merged == true - - steps: - - name: Checkout Repository - uses: actions/checkout@v2 - - - name: Add Comment to Issue - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: | - COMMENT=$(cat < - if [[ ! "$PR_DESCRIPTION" =~ .*\ #[0-9]+ ]]; then - echo "The PR description should include the issue number assigned to you.⚠️" - echo "##[error]An issue reference like 'Fixed #' must be included in the description." - exit 1 - fi - - echo "PR description is valid." - - - name: Output result - run: echo "All checks passed." \ No newline at end of file diff --git a/.github/workflows/update-readme.yml b/.github/workflows/update-readme.yml deleted file mode 100644 index c4f6b81..0000000 --- a/.github/workflows/update-readme.yml +++ /dev/null @@ -1,39 +0,0 @@ -name: Update Repository structure - -on: - schedule: - - cron: '0 * * * *' # Run every hour - workflow_dispatch: # Allow manual triggering - push: - branches: - - main - -jobs: - detect-and-update-structure: - runs-on: ubuntu-latest - permissions: - contents: write # Permission to the GitHub Bot to access and update the Project Repository - steps: - - name: Checkout repository - uses: actions/checkout@v2 - - - name: Set up Python - uses: actions/setup-python@v2 - with: - python-version: 3.12 - - - name: Install dependencies - run: | - python -m pip install --upgrade pip - pip install PyGithub - - name: Run update script - env: - GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: python .github/scripts/update_structure.py # Run the python script to create/update the repo sturcture - - - name: Commit and push if changed # Commit and push changes to the head branch(main) - run: | - git config user.email "41898282+github-actions[bot]@users.noreply.github.com" - git config user.name "github-actions[bot]" - git add . - git diff --quiet && git diff --staged --quiet || (git commit -m "Update repo structure" && git push) \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index c267262..69a7c5b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,4 +14,4 @@ function App() { ) } -export default App +export default App; \ No newline at end of file diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..4b46e3c --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,128 @@ + +/* Ensure the body takes full height but has a separate background color */ +body { + height: 100vh; /* Full viewport height */ + margin: 0; /* Remove default margin */ + display: flex; + justify-content: center; /* Center horizontally */ + align-items: center; /* Center vertically */ + background-color: #f0f0f0; /* Background color for the body (rest of the page) */ + } + + /* Navbar Custom Styles */ + .navbar { + display: flex; + justify-content: center; /* Center the navbar content horizontally */ + align-items: center; /* Center the navbar content vertically */ + flex-direction: row; /* Align the logo and nav items horizontally */ + padding: 20px 60px; /* Increased padding for a wider navbar */ + background-color: #ffffff; /* Set background color only for the navbar */ + color: #333333; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 100; + transform: rotate(-45deg); /* Apply diagonal rotation */ + transform-origin: center center; /* Ensure it rotates from the center */ + margin: 50px auto; /* Adds space around the navbar */ + width: 100%; /* Full width for the navbar */ + height: auto; + max-width: 1600px; /* Maximum width for the navbar */ + transition: background-color 0.3s ease; + } + + /* Spinning Logo */ +.navbar .logo img { + width: 100%; /* Adjust width as a percentage of its container */ + height: 60px; /* Fixed height */ + margin-right: 20px; /* Add some space between the logo and nav items */ + transition: transform 0.3s ease; + } + + /* Spinning Animation */ + .spin { + animation: spin 5s infinite linear; + } + + /* Navigation Links */ + .nav-links { + display: flex; + justify-content: center; + align-items: center; + margin: 0; + padding: 0; + list-style: none; + } + + /* Navbar Items */ + .nav-links .nav-item { + font-size: 1.5rem; + margin: 0 25px; /* Increased space between items */ + cursor: pointer; + transition: transform 0.3s ease; + } + + /* Glowing Button Styles */ + .button { + display: inline-block; + font-size: 1rem; + padding: 10px 20px; + margin: 10px; + border: 2px solid transparent; + border-radius: 50px; /* Rounded edges for a modern look */ + background: linear-gradient(90deg, #ff8a00, #e52e71); /* Gradient background */ + color: white; + text-transform: uppercase; /* Modern typography */ + text-decoration: none; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(255, 138, 0, 0.6); /* Initial glowing shadow */ + } + + .button:hover { + background: linear-gradient(90deg, #e52e71, #ff8a00); /* Reverse gradient on hover */ + box-shadow: 0 6px 20px rgba(255, 138, 0, 0.8); /* Increase glow intensity on hover */ + transform: scale(1.1); /* Slightly enlarge the button */ + } + + .button:active { + transform: scale(1); /* Reset scale when clicked */ + box-shadow: 0 4px 10px rgba(255, 138, 0, 0.6); /* Dim the glow */ + } + + /* Floating Boxes */ + .floating-boxes { + position: absolute; + top: 10px; + right: 10px; + display: flex; + flex-direction: column; + gap: 10px; + } + + .floating-box { + width: 40px; + height: 40px; + background-color: blue; + border-radius: 5px; + animation: float 1s ease-in-out infinite alternate; + } + + @keyframes float { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-15px); + } + } + + /* Spinning Animation */ + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 77f6535..89d5eaf 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,8 +1,9 @@ -import React, { useEffect } from 'react'; -import '../index.css'; - +import React, { useState, useEffect } from 'react'; +import './Navbar.css'; // Ensure you import the custom CSS for navbar styles const Navbar = () => { + const [isSpinning, setIsSpinning] = useState(false); // State to track if the logo should spin + useEffect(() => { const handleMouseMove = (event) => { const navbar = document.querySelector('.navbar'); @@ -11,9 +12,9 @@ const Navbar = () => { const { left, width } = navbar.getBoundingClientRect(); const centerX = left + width / 2; const deltaX = clientX - centerX; - const skewX = deltaX / width * 20; + const skewX = (deltaX / width) * 20; - items.forEach(item => { + items.forEach((item) => { item.style.transform = `skewX(${skewX}deg)`; }); }; @@ -25,57 +26,39 @@ const Navbar = () => { }; }, []); + const toggleSpin = () => { + setIsSpinning(!isSpinning); // Toggle spin state on click + }; + return ( -
+
{/* Spinning Logo */} -
- ChaosWeb Logo +
+ ChaosWeb Logo
- {/* Header */} -

- ChaosWeb -

-

- The Disorderly UI Experiment -

- {/* Randomly Placed Links */} -
    +
      {['Home', 'About', 'Gallery', 'Contact'].map((item) => (
    • - {item} + + {item} +
      • ))}
    - - {/* Floating Boxes */} -
    - {Array(3) - .fill(null) - .map((_, idx) => ( -
    - ))} -
    ); }; -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/src/index.css b/src/index.css index 8644a61..7d96168 100644 --- a/src/index.css +++ b/src/index.css @@ -3,46 +3,15 @@ @tailwind components; @tailwind utilities; -@layer base { - html, body { - @apply overflow-x-auto overflow-y-hidden whitespace-nowrap h-screen w-screen; - } - - body { - @apply flex flex-row; - } -} - +/* Body Styling */ html, body { - background: #131313; + background: linear-gradient(135deg, #131313 50%, transparent 50%); color: #fff; - margin: 10px; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; + margin: 0; + overflow-x: hidden; /* Prevent horizontal overflow */ + overflow-y: hidden; /* Prevent vertical overflow */ width: 100%; height: 100%; } -body { - display: flex; - flex-direction: row; -} - -/* Custom scrollbar styles */ -::-webkit-scrollbar { - height: 6px; -} -::-webkit-scrollbar-track { - background: #573c86; -} -::-webkit-scrollbar-thumb { - background: rgba(207, 162, 236, 0.959); - border-radius: 8px; -} - -::-webkit-scrollbar-thumb:hover { - background: rgba(222, 130, 235, 0.911); - border-radius: 8px; -}