{"id":18430411,"url":"https://github.com/aryanvbw/portfolio","last_synced_at":"2025-04-13T22:44:38.193Z","repository":{"id":246196943,"uuid":"820377632","full_name":"AryanVBW/portfolio","owner":"AryanVBW","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-08T19:43:37.000Z","size":53280,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T20:28:26.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vivek.aryanvbw.live/portfolio/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AryanVBW.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-26T10:52:01.000Z","updated_at":"2025-04-08T19:43:40.000Z","dependencies_parsed_at":"2024-06-26T13:53:14.118Z","dependency_job_id":"38bba8c5-b30e-49da-b611-cbcb4734a8e8","html_url":"https://github.com/AryanVBW/portfolio","commit_stats":null,"previous_names":["aryanvbw/portfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AryanVBW%2Fportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AryanVBW%2Fportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AryanVBW%2Fportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AryanVBW%2Fportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AryanVBW","download_url":"https://codeload.github.com/AryanVBW/portfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248794566,"owners_count":21162613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T05:20:39.449Z","updated_at":"2025-04-13T22:44:38.156Z","avatar_url":"https://github.com/AryanVBW.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/AryanVBW/kali-Linux-Android/releases/download/1/removebackground.png\" height=\"80\"\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ch2 style=\"text-align: center; color: #0074D9;\"\u003e\n  \u003cimg src=\"https://readme-typing-svg.demolab.com?font=Fira+Code\u0026pause=1000\u0026color=0074D9\u0026random=false\u0026width=435\u0026lines=Hello%2C+I'm+Vivek+Wagdare+👋\" alt=\"Typing SVG\" /\u003e\n\u003c/h2\u003e\n\n\nI'm a passionate developer, coder, and technology geek with a knack for hacking into challenges and solving them one line of code at a time. 🚀\n\n[![GitHub followers](https://img.shields.io/github/followers/yourusername?label=Follow\u0026style=social)](https://github.com/Aryanvbw)\n[![Twitter Follow](https://img.shields.io/twitter/follow/yourtwitterhandle?label=Follow\u0026style=social)](https://x.com/vivekwagadare?t=nuIH3LUbo8o2o1Rjxot-hA\u0026s=09)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/518abbc0-2260-4e61-a47c-febf065288c2/deploy-status)](https://app.netlify.com/sites/vivekw-portfolio/deploys)\n\u003ca href=\"https://instagram.com/vivekbw\"\u003e\u003cimg src=\"https://img.shields.io/badge/Instagram-Follow%20@Vivek-E1306C\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://instagram.com/aryan_technolog1es\"\u003e\u003cimg src=\"https://img.shields.io/badge/Instagram-Follow%20@Aryan_Technologies-E1306C\"/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n\u003cbr/\u003e\n\n\n\n## Welcome to My Portfolio!\n\nI'm a passionate 1st-year student at Newton School of Technology, currently pursuing a Bachelor's in Data Science and Applied Machine Learning at IIT Madras (via the Perseverance program).\n\nThis portfolio showcases my skills in web development, particularly using HTML, CSS, and JavaScript. I'm excited to share my journey of learning and growth with you.\n\n## About the Project\n\nThis repository hosts the code for my static website portfolio built using GitHub Pages. It's a simple yet elegant showcase of my projects and skills. I've focused on creating a clean and user-friendly experience.\n\n## Technologies Used\n\n- **HTML**\n- **CSS**\n- **JavaScript**\n\n## Features\n\n- **Responsive Design:** The website adapts seamlessly to different screen sizes.\n- **Interactive Elements:** JavaScript is used to enhance user engagement.\n- **Clear Navigation:** Intuitive navigation makes it easy to explore my work.\n\n## How to Run Locally\n\n1. Clone this repository: `git clone https://github.com/AryanVBW/porfolio.git`\n2. Navigate to the project directory\n3. Open `index.html` in your web browser.\n\n\n\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eHTML Elements\u003c/h1\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u0026lt;html\u0026gt; - HTML Document Root\u003c/li\u003e\n    \u003cli\u003e\u0026lt;head\u0026gt; - Document Metadata Container\u003c/li\u003e\n    \u003cli\u003e\u0026lt;meta\u0026gt; - Metadata Element\u003c/li\u003e\n    \u003cli\u003e\u0026lt;title\u0026gt; - Document Title\u003c/li\u003e\n    \u003cli\u003e\u0026lt;link\u0026gt; - External Resource Link\u003c/li\u003e\n    \u003cli\u003e\u0026lt;body\u0026gt; - Document Body\u003c/li\u003e\n    \u003cli\u003e\u0026lt;audio\u0026gt; - Audio Element\u003c/li\u003e\n    \u003cli\u003e\u0026lt;source\u0026gt; - Media Source\u003c/li\u003e\n    \u003cli\u003e\u0026lt;div\u0026gt; - Division or Section\u003c/li\u003e\n    \u003cli\u003e\u0026lt;noscript\u0026gt; - Fallback Content for No Script\u003c/li\u003e\n    \u003cli\u003e\u0026lt;header\u0026gt; - Header Section\u003c/li\u003e\n    \u003cli\u003e\u0026lt;ul\u0026gt; - Unordered List\u003c/li\u003e\n    \u003cli\u003e\u0026lt;li\u0026gt; - List Item\u003c/li\u003e\n    \u003cli\u003e\u0026lt;a\u0026gt; - Anchor (Hyperlink)\u003c/li\u003e\n    \u003cli\u003e\u0026lt;button\u0026gt; - Button\u003c/li\u003e\n    \u003cli\u003e\u0026lt;span\u0026gt; - Inline Container\u003c/li\u003e\n    \u003cli\u003e\u0026lt;input\u0026gt; - Input Field\u003c/li\u003e\n    \u003cli\u003e\u0026lt;label\u0026gt; - Label for Form Elements\u003c/li\u003e\n    \u003cli\u003e\u0026lt;main\u0026gt; - Main Content\u003c/li\u003e\n    \u003cli\u003e\u0026lt;section\u0026gt; - Section\u003c/li\u003e\n    \u003cli\u003e\u0026lt;article\u0026gt; - Article\u003c/li\u003e\n    \u003cli\u003e\u0026lt;p\u0026gt; - Paragraph\u003c/li\u003e\n    \u003cli\u003e\u0026lt;h2\u0026gt; - Heading Level 2\u003c/li\u003e\n    \u003cli\u003e\u0026lt;h3\u0026gt; - Heading Level 3\u003c/li\u003e\n    \u003cli\u003e\u0026lt;img\u0026gt; - Image\u003c/li\u003e\n    \u003cli\u003e\u0026lt;svg\u0026gt; - Scalable Vector Graphics\u003c/li\u003e\n    \u003cli\u003e\u0026lt;path\u0026gt; - SVG Path\u003c/li\u003e\n    \u003cli\u003e\u0026lt;polyline\u0026gt; - SVG Polyline\u003c/li\u003e\n    \u003cli\u003e\u0026lt;footer\u0026gt; - Footer Section\u003c/li\u003e\n    \u003cli\u003e\u0026lt;script\u0026gt; - Script\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n## JavaScript: Key Parts and Concepts\n\n**1. Variables and Constants:**\n\n* **What:** Stores data for later use.\n* **How:** Declared using `var`, `let`, or `const`.\n    * `var` (mostly avoided in modern JS): Has wider scope and potential for conflicts.\n    * `let`: Used for variables that might change within their scope.\n    * `const`: Used for variables with values that shouldn't change.\n* **Example:** `let audio = document.getElementById(\"audioPlayer\");` (Stores a reference to the element with id \"audioPlayer\")\n\n**2. Functions:**\n\n* **What:** Reusable blocks of code that perform specific tasks.\n* **How:** Defined with the `function` keyword, followed by a name, parameters (optional), and code block.\n* **Example:**\n```javascript\nfunction settingtoggle() {\n  // Code to handle setting toggle functionality\n}\n```\n\n**3. Event Listeners:**\n\n* **What:** Monitor an element for specific events (clicks, mouseovers, etc.). When the event occurs, the attached function is executed.\n* **How:** Use `addEventListener` method on an element. Specify the event type and callback function.\n* **Example:**\n```javascript\nwindow.addEventListener(\"load\", function() {\n  // Code to execute when the window finishes loading\n});\n```\n\n**4. DOM Manipulation:**\n\n* **What:** Accessing and modifying the Document Object Model (DOM), which represents the structure of the web page.\n* **How:** Various methods are used, such as:\n    * `getElementById`: Gets an element with a specific ID.\n    * `querySelectorAll`: Gets all elements matching a CSS selector.\n    * `classList.toggle`: Toggles a CSS class on an element.\n* **Example:**\n```javascript\ndocument.getElementById(\"setting-container\").classList.toggle(\"settingactivate\");\n```\n\n**5. Conditional Statements:**\n\n* **What:** Control the flow of code execution based on certain conditions.\n* **How:** Use `if` statements to check a condition. If true, the code within the `if` block executes.\n* **Example:**\n```javascript\nif (document.body.scrollTop \u003e 400 || document.documentElement.scrollTop \u003e 400) {\n  // Code to execute if user scrolled past a certain point\n}\n```\n\n**6. Loops:**\n\n* **What:** Repeat a block of code a specific number of times or until a condition is met.\n* **How:** `forEach` is a common method used to iterate over lists of elements or arrays.\n* **Example:**\n```javascript\nsections.forEach(t =\u003e {\n  // Code to execute for each element in the \"sections\" list\n});\n```\n\n**7. Template Literals:**\n\n* **What:** Allow for string interpolation, embedding expressions within strings using backticks (`).\n* **How:** Use backticks to define the string, including placeholders for variables or expressions within `${ }` brackets.\n* **Example:**\n```javascript\ne.style.transform = `translate(${t}px, ${o}px)`;  // Sets an element's transform property\n```\n\n**8. Console Logging:**\n\n* **What:** Outputs information to the browser's developer console for debugging and monitoring.\n* **How:** Use `console.log` followed by the data you want to log.\n* **Example:**\n```javascript\nconsole.log(\"%c Designed and Developed by vivek w \", \"color: blue; font-weight: bold;\");  // Logs a message with styles\n```\n\nThese concepts are crucial building blocks for creating dynamic and interactive web pages with JavaScript.\n\n## JavaScript Functions\n\n### hamburgerMenu()\n\n**Purpose:** This function toggles the visibility of the mobile navigation menu when the hamburger button is clicked.\n\n**How it works:** It adds or removes a CSS class (e.g., visible) to the mobile menu element (id=\"mobiletogglemenu\"), which controls whether the menu is shown or hidden.\n\n### hidemenubyli()\n\n**Purpose:** This function hides the mobile navigation menu when a menu item is clicked.\n\n**How it works:** It removes the CSS class (e.g., visible) from the mobile menu element (id=\"mobiletogglemenu\"), ensuring the menu is hidden.\n\n### Example JavaScript Code\n\n\nI'm always open to connecting with fellow learners and developers. Feel free to reach out to me via email or LinkedIn.\n\n- 📧 Email: [my@gmail.com](mailto:vivek.aryanvbw@gmail.com)\n- 📧 Business Email: [Business.Mail](mailto:admin@AryanVBW.live)\n- 💼 LinkedIn: [@vivekwagadare](https://www.linkedin.com/in/vivek-wagadare-b677a9216)\n- 🐦 Twitter: [@vivekwagadare](https://x.com/vivekwagadare?t=nuIH3LUbo8o2o1Rjxot-hA\u0026s=09)\n- 🌐 Web store: [TEch-Shop](https://view.aryanvbw.live)\n- \u003cimg src=\"https://github.com/AryanVBW/AryanVBW/blob/main/Instagram.png\" height=\"15\"\u003e Instagram: [@vivek](https://instagram.com/vivekbw?igshid=NGVhN2U2NjQ0Yg==)\n- \u003cimg src=\"https://github.com/AryanVBW/AryanVBW/blob/main/Instagram.png\" height=\"15\"\u003e Instagram: [@Aryan_Technologies](https://instagram.com/aryan_technolog1es?igshid=MzMyNGUyNmU2YQ==)\n\nLet's connect and build amazing things together!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryanvbw%2Fportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faryanvbw%2Fportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faryanvbw%2Fportfolio/lists"}