https://github.com/aryanvbw/portfolio
Science Score: 26.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
✓.zenodo.json file
Found .zenodo.json file -
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (13.3%) to scientific vocabulary
Repository
Basic Info
- Host: GitHub
- Owner: AryanVBW
- Language: CSS
- Default Branch: main
- Homepage: https://vivek.aryanvbw.live/portfolio/
- Size: 42.6 MB
Statistics
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
- Releases: 0
Metadata Files
README.md
Welcome to My Portfolio!
I'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).
This 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.
About the Project
This 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.
Technologies Used
- HTML
- CSS
- JavaScript
Features
- Responsive Design: The website adapts seamlessly to different screen sizes.
- Interactive Elements: JavaScript is used to enhance user engagement.
- Clear Navigation: Intuitive navigation makes it easy to explore my work.
How to Run Locally
- Clone this repository:
git clone https://github.com/AryanVBW/porfolio.git - Navigate to the project directory
- Open
index.htmlin your web browser.
<!DOCTYPE html>
HTML Elements
- <html> - HTML Document Root
- <head> - Document Metadata Container
- <meta> - Metadata Element
- <title> - Document Title
- <link> - External Resource Link
- <body> - Document Body
- <audio> - Audio Element
- <source> - Media Source
- <div> - Division or Section
- <noscript> - Fallback Content for No Script
- <header> - Header Section
- <ul> - Unordered List
- <li> - List Item
- <a> - Anchor (Hyperlink)
- <button> - Button
- <span> - Inline Container
- <input> - Input Field
- <label> - Label for Form Elements
- <main> - Main Content
- <section> - Section
- <article> - Article
- <p> - Paragraph
- <h2> - Heading Level 2
- <h3> - Heading Level 3
- <img> - Image
- <svg> - Scalable Vector Graphics
- <path> - SVG Path
- <polyline> - SVG Polyline
- <footer> - Footer Section
- <script> - Script
JavaScript: Key Parts and Concepts
1. Variables and Constants:
- What: Stores data for later use.
- How: Declared using
var,let, orconst.var(mostly avoided in modern JS): Has wider scope and potential for conflicts.let: Used for variables that might change within their scope.const: Used for variables with values that shouldn't change.
- Example:
let audio = document.getElementById("audioPlayer");(Stores a reference to the element with id "audioPlayer")
2. Functions:
- What: Reusable blocks of code that perform specific tasks.
- How: Defined with the
functionkeyword, followed by a name, parameters (optional), and code block. - Example:
javascript function settingtoggle() { // Code to handle setting toggle functionality }
3. Event Listeners:
- What: Monitor an element for specific events (clicks, mouseovers, etc.). When the event occurs, the attached function is executed.
- How: Use
addEventListenermethod on an element. Specify the event type and callback function. - Example:
javascript window.addEventListener("load", function() { // Code to execute when the window finishes loading });
4. DOM Manipulation:
- What: Accessing and modifying the Document Object Model (DOM), which represents the structure of the web page.
- How: Various methods are used, such as:
getElementById: Gets an element with a specific ID.querySelectorAll: Gets all elements matching a CSS selector.classList.toggle: Toggles a CSS class on an element.
- Example:
javascript document.getElementById("setting-container").classList.toggle("settingactivate");
5. Conditional Statements:
- What: Control the flow of code execution based on certain conditions.
- How: Use
ifstatements to check a condition. If true, the code within theifblock executes. - Example:
javascript if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { // Code to execute if user scrolled past a certain point }
6. Loops:
- What: Repeat a block of code a specific number of times or until a condition is met.
- How:
forEachis a common method used to iterate over lists of elements or arrays. - Example:
javascript sections.forEach(t => { // Code to execute for each element in the "sections" list });
7. Template Literals:
- What: Allow for string interpolation, embedding expressions within strings using backticks (`).
- How: Use backticks to define the string, including placeholders for variables or expressions within
${ }brackets. - Example:
javascript e.style.transform = `translate(${t}px, ${o}px)`; // Sets an element's transform property
8. Console Logging:
- What: Outputs information to the browser's developer console for debugging and monitoring.
- How: Use
console.logfollowed by the data you want to log. - Example:
javascript console.log("%c Designed and Developed by vivek w ", "color: blue; font-weight: bold;"); // Logs a message with styles
These concepts are crucial building blocks for creating dynamic and interactive web pages with JavaScript.
JavaScript Functions
hamburgerMenu()
Purpose: This function toggles the visibility of the mobile navigation menu when the hamburger button is clicked.
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.
hidemenubyli()
Purpose: This function hides the mobile navigation menu when a menu item is clicked.
How it works: It removes the CSS class (e.g., visible) from the mobile menu element (id="mobiletogglemenu"), ensuring the menu is hidden.
Example JavaScript Code
I'm always open to connecting with fellow learners and developers. Feel free to reach out to me via email or LinkedIn.
- 📧 Email: my@gmail.com
- 📧 Business Email: Business.Mail
- 💼 LinkedIn: @vivekwagadare
- 🐦 Twitter: @vivekwagadare
- 🌐 Web store: TEch-Shop
Instagram: @vivek- Instagram: @Aryan_Technologies
Let's connect and build amazing things together!
Owner
- Name: Vivek W
- Login: AryanVBW
- Kind: user
- Location: india
- Company: @TEch-Shop
- Website: http://portfolio.aryanvbw.live/
- Twitter: vivekwagadare
- Repositories: 1
- Profile: https://github.com/AryanVBW
🛰 𝐒𝐢𝐦𝐩𝐥𝐢𝐜𝐢𝐭𝐲 𝐒𝐩𝐚𝐫𝐤𝐬 𝐈𝐧𝐧𝐨𝐯𝐚𝐭𝐢𝐨𝐧🛡️ 🌟 Dive into the Future: ✨𒆜🆅🅸🆅🅴🅺 🆆𒆜 Studying in Newton school of Technology🚀
GitHub Events
Total
- Delete event: 6
- Push event: 22
- Fork event: 1
- Create event: 6
Last Year
- Delete event: 6
- Push event: 22
- Fork event: 1
- Create event: 6
Issues and Pull Requests
Last synced: about 1 year ago
All Time
- Total issues: 0
- Total pull requests: 1
- Average time to close issues: N/A
- Average time to close pull requests: 4 months
- Total issue authors: 0
- Total pull request authors: 1
- Average comments per issue: 0
- Average comments per pull request: 1.0
- Merged pull requests: 1
- Bot issues: 0
- Bot pull requests: 1
Past Year
- Issues: 0
- Pull requests: 1
- Average time to close issues: N/A
- Average time to close pull requests: 4 months
- Issue authors: 0
- Pull request authors: 1
- Average comments per issue: 0
- Average comments per pull request: 1.0
- Merged pull requests: 1
- Bot issues: 0
- Bot pull requests: 1
Top Authors
Issue Authors
Pull Request Authors
- imgbot[bot] (2)