/portfolio

Primary LanguageCSS

Typing SVG

I'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. 🚀

GitHub followers Twitter Follow Netlify Status


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

  1. Clone this repository: git clone https://github.com/AryanVBW/porfolio.git
  2. Navigate to the project directory
  3. Open index.html in your web browser.

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, or const.
    • 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 function keyword, followed by a name, parameters (optional), and code block.
  • Example:
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 addEventListener method on an element. Specify the event type and callback function.
  • Example:
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:
document.getElementById("setting-container").classList.toggle("settingactivate");

5. Conditional Statements:

  • What: Control the flow of code execution based on certain conditions.
  • How: Use if statements to check a condition. If true, the code within the if block executes.
  • Example:
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: forEach is a common method used to iterate over lists of elements or arrays.
  • Example:
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:
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.log followed by the data you want to log.
  • Example:
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.

Let's connect and build amazing things together!