\n \n\n\n\n\n\n\nmoile view css:\n/* Styles applied to the entire body of the webpage */\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: black; /* Set the background color to black */\n}\n\n/* Styles applied to the header of the webpage */\nheader {\n position: fixed;\n top: 0;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.2);\n backdrop-filter: blur(5px);\n padding: 5px;\n display: flex;\n justify-content: space-between;\n}\n\n/* Styles applied to the left section of the header */\n.left h1, .right p {\n font-size: 0.8em; /* Reduce font size in mobile view */\n}\n\n/* Styles applied to the right section of the header */\n.right {\n align-items: flex-end;\n margin-right: 40px; /* Adjust this value as needed */\n text-align: right; /* Add this line */\n}\n\n/* Styles applied to the navigation bar */\nnav {\n background-color: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(5px);\n overflow: auto;\n white-space: nowrap;\n position: fixed;\n bottom: 0;\n width: 100%;\n}\n\n/* Styles applied to the links in the navigation bar */\nnav a {\n display: inline-block;\n color: #f2f2f2;\n text-align: center;\n padding: 14px 16px;\n text-decoration: none;\n}\n\n/* Styles applied to the links in the navigation bar when hovered over */\nnav a:hover {\n background-color: #ddd;\n color: black;\n}\n\ncanvas {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1; /* This will ensure the canvas is behind all other content */\n}\n\nmain, .sidebar {\n background-color: rgba(255, 255, 255, 0.02); /* Adjust the color and opacity as needed */\n}\n\n/* Styles applied to the body when in light mode */\nbody.light-mode {\n background-color: white;\n color: black;\n}\n\n/* Styles applied to the header and navigation bar when in light mode */\nbody.light-mode header,\nbody.light-mode nav {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Styles applied to the links, h1, and p elements in the header when in light mode */\nbody.light-mode nav a,\nbody.light-mode header .left h1,\nbody.light-mode header .left p,\nbody.light-mode header .right p {\n color: black;\n}\n\n/* Styles applied to the links in the navigation bar when hovered over in light mode */\nbody.light-mode nav a:hover {\n color: orange;\n}\n\n/* Styles applied to the main content section */\nmain {\n margin-top: 60px; /* Adjust this value as needed */\n\tfont-size: 0.9em; /* Decrease the size of the text */\n\n}\n\n/* Styles applied to the section titles and descriptions */\nsection {\n min-height: 100vh;\n padding: 15px;\n border-bottom: 10px solid #ddd;\n margin-bottom: 50px; /* Adjust this value as needed */\n page-break-before: always; /* Add this line */\n}\nsection::before {\n content: \"\";\n display: block;\n height: 200px; /* Adjust this value to match your header's height */\n margin: -60px 0 0; /* This negative margin is the same as the height */\n}\n\n/* Styles applied to the name */\n#name {\n font-size: 1.2em; /* Adjust as needed */\n font-weight: bold;\n}\n\n/* Styles applied to the download button */\n#downloadBtn {\n font-size: 0.8em; /* Increase the size of the text */\n padding: 10px 20px; /* Increase the size of the button */\n border: 2px solid #000000; /* Add a border to the button */\n background-color: transparent; /* Make the button transparent */\n color: #000000; /* Set the color of the text */\n transition: all 0.3s ease; /* This will animate any changes */\n}\n\n#downloadBtn:hover {\n background-color: #FFFFFF; /* Change the background color to white when hovered */\n color: #000000; /* Change the text color to black when hovered */\n}\n\n#downloadBtn:active {\n transform: scale(0.95); /* This will slightly shrink the button when clicked */\n}\n\n\n\nmobile view js:\n// script.js\n\n// Variable to toggle between dark and light modes\nlet darkMode = false;\n\n// Event listener for click event on the download button to toggle modes\ndocument.getElementById('downloadBtn').addEventListener('click', toggleDarkMode);\n\n// Function to toggle between dark and light modes\nfunction toggleDarkMode() {\n darkMode = !darkMode;\n if (darkMode) {\n document.body.classList.add('dark-mode');\n document.body.classList.remove('light-mode');\n setPolygonColors('255, 255, 255');\n } else {\n document.body.classList.add('light-mode');\n document.body.classList.remove('dark-mode');\n setPolygonColors('0, 0, 0');\n }\n}\n\n// Function to set the colors of the polygons\nfunction setPolygonColors(color) {\n nodes.forEach(node => {\n node.color = color;\n });\n}\n\n// Polygon network animation with mouse interaction\nconst canvas = document.getElementById('polygon-bg');\nconst ctx = canvas.getContext('2d');\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\nconst nodes = [];\nconst lines = [];\nconst nodeCount = 80;\nconst maxDist = 200;\n\n// Class for the nodes in the polygon network\nclass Node {\n constructor(x, y, color = '0, 0, 0') {\n this.x = x;\n this.y = y;\n this.vx = Math.random() * 2 - 1;\n this.vy = Math.random() * 2 - 1;\n this.color = color;\n }\n\n update() {\n this.x += this.vx;\n this.y += this.vy;\n\n if (this.x < 0 || this.x > canvas.width) this.vx *= -1;\n if (this.y < 0 || this.y > canvas.height) this.vy *= -1;\n }\n\n draw() {\n ctx.beginPath();\n ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(${this.color}, 0.9)`;\n ctx.fill();\n }\n}\n\n// Class for the lines in the polygon network\nclass Line {\n constructor(node1, node2, color = '0, 0, 0') {\n this.node1 = node1;\n this.node2 = node2;\n this.color = color;\n }\n\n draw() {\n const dist = Math.hypot(this.node1.x - this.node2.x, this.node1.y - this.node2.y);\n if (dist < maxDist) {\n ctx.beginPath();\n ctx.moveTo(this.node1.x, this.node1.y);\n ctx.lineTo(this.node2.x, this.node2.y);\n ctx.strokeStyle = `rgba(${this.color}, ${1 - dist / maxDist})`;\n ctx.stroke();\n }\n }\n}\n\n// Create the nodes for the polygon network\nfor (let i = 0; i < nodeCount; i++) {\n const x = Math.random() * canvas.width;\n const y = Math.random() * canvas.height;\n nodes.push(new Node(x, y));\n}\n\n// Event listener for mousemove event on the canvas\ncanvas.addEventListener('mousemove', (e) => {\n const rect = canvas.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n nodes.forEach(node => {\n const dx = mouseX - node.x;\n const dy = mouseY - node.y;\n const dist = Math.hypot(dx, dy);\n\n if (dist < maxDist) {\n node.vx += dx * 0.01;\n node.vy += dy * 0.01;\n }\n });\n});\n\n// Function to animate the polygon network\nfunction animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n nodes.forEach(node => {\n node.update();\n node.draw();\n });\n\n lines.length = 0;\n for (let i = 0; i < nodes.length; i++) {\n for (let j = i + 1; j < nodes.length; j++) {\n lines.push(new Line(nodes[i], nodes[j], darkMode ? '255, 255, 255' : '0, 0, 0'));\n }\n }\n lines.forEach(line => line.draw());\n\n requestAnimationFrame(animate);\n}\n\n// Start the animation\nanimate();\n\"\nwhat is this code \nand \nwhat is this code below aswel\n\n\n\"2nd code below\ndesktop view html:\n\n\n \n \n Akshay's Resume\n \n \n\n\n \n \n
\n
\n

Objective

\n

As an experienced professional I am committed to delivering exceptional results and contributing to your organization's success.

\n
\n
\n

Skills

\n
    \n
  • IP Addressing & Sub-netting, OSI Model
  • \n
  • IP Routing (RIP, OSPF, EIGRP), Switch Configuration
  • \n
\n
\n
\n

Work History

\n

\n Technical Support Engineer | ACE Tech Sys Pvt Ltd. 01/2023 - Current
\n • Managed technical support
\n

\n
\n
\n

Education

\n

\n Electronics & Communication | R.N.Shetty Rural Polytechnic 2021
\n SSLC | Sri Mookambika Public School 2014
\n

\n
\n
\n

Certifications

\n
    \n
  • CHNA (Certified Hardware & Networking Administrator) from IANT
  • \n
  • Pursuing RHCSA (Red Hat Certified System Administrator) by Red Hat
  • \n
\n
\n
\n

Personal Information

\n

\n Date of Birth: 06-Sep-1998
\n Language: English, Kannada, Hindi, Konkani
\n Gender: Male
\n

\n
\n
\n

Projects

\n

\n Arduino Bluetooth Car with Obstacle Avoidance:
\n Arduino Based Bluetooth Controlled Car is an Arduino-based project that uses an ultrasonic sensor to avoid obstacles. \n

\n
\n
\n

Declaration

\n

\n I hereby declare that the above mentioned information is true to the best of my knowledge.\n

\n
\n
\n \n \n \n\n\n\n"}

yeet69

Author:

| Size: 16.49 KB

|

go through the below code:

"1st code mobile view html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Akshay's Resume</title> <link rel="stylesheet" href="styles.css"> </head> <body class="light-mode"> <canvas id="polygon-bg"></canvas> <div class="sticky"> <header> <div class="left"> <h1 id="name">AKSHAY G PRABHU</h1> <p><a href="https://www.linkedin.com/in/agp3301" target="_blank">LinkedIn</a> | <a href="https://www.naukri.com" target="_blank">Naukri</a></p> <p><strong>Technical Support Engineer</strong></p> </div> <div class="right"> <p>✆ :+91-1234-567-6543</p> <p>✉: [email protected]</p> <button id="downloadBtn">Download CV</button> </div> </header> <nav> <div id="nav-container"> <a href="#objective">Objective</a> <a href="#skills">Skills</a> <a href="#work-history">Work History</a> <a href="#education">Education</a> <a href="#certifications">Certifications</a> <a href="#personal-info">Personal Information</a> <a href="#projects">Projects</a> <a href="#declaration">Declaration</a> </div> </nav> </div> <main> <section id="objective"> <h2>Objective</h2> <p class="centered-text">As an experienced professional I am committed to delivering exceptional results and contributing to your organization's success.</p> </section> <section id="skills"> <h2>Skills</h2> <ul class="centered-text"> <li>IP Addressing & Sub-netting, OSI Model</li> <li>IP Routing (RIP, OSPF, EIGRP), Switch Configuration</li> </ul> </section> <section id="work-history"> <h2>Work History</h2> <p class="centered-text"> <strong><em>01/2023 - Current :</em></strong><br> Technical Support Engineer |<strong> ACE Tech Sys Pvt Ltd.</strong><br> • Managed technical support<br> </p> </section> <section id="education"> <h2>Education</h2> <p class="centered-text"> Electronics & Communication | R.N.Shetty Rural Polytechnic 2021<br> SSLC | Sri Mookambika Public School 2014<br> </p> </section> <section id="certifications"> <h2>Certifications</h2> <ul class="centered-text"> <li>CHNA (Certified Hardware & Networking Administrator) from IANT</li> <li>Pursuing RHCSA (Red Hat Certified System Administrator) by Red Hat</li> </ul> </section> <section id="personal-info"> <h2>Personal Information</h2> <p class="centered-text"> Date of Birth: 06-Sep-1998<br> Language: English, Kannada, Hindi, Konkani<br> Gender: Male<br> </p> </section> <section id="projects"> <h2>Projects</h2> <p class="centered-text"> Arduino Bluetooth Car with Obstacle Avoidance:<br> Arduino Based Bluetooth Controlled Car is an Arduino-based project that uses an ultrasonic sensor to avoid obstacles. </p> </section> <section id="declaration"> <h2>Declaration</h2> <p class="centered-text"> I hereby declare that the above mentioned information is true to the best of my knowledge. </p> </section> </main> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <script src="script.js"></script> </body> </html>

moile view css: /* Styles applied to the entire body of the webpage / body { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; background-color: black; / Set the background color to black */ }

/* Styles applied to the header of the webpage */ header { position: fixed; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); padding: 5px; display: flex; justify-content: space-between; }

/* Styles applied to the left section of the header / .left h1, .right p { font-size: 0.8em; / Reduce font size in mobile view */ }

/* Styles applied to the right section of the header / .right { align-items: flex-end; margin-right: 40px; / Adjust this value as needed / text-align: right; / Add this line */ }

/* Styles applied to the navigation bar */ nav { background-color: rgba(255, 255, 255, 0.1); b…

Comments

No comments yet

Comment attachments are limited to 30MB total. For larger files, create a paste and share the link.

6/3/2024

Create new paste with same settings

Not all user generated content is reviewed by AnonPaste. If you believe this paste violates our community guideline or terms of service, please report it here.

Initializing...

Preparing the app. This may take a moment before app is ready.

AnonPaste is a user-generated content hosting service. The platform and its operators are not responsible for content posted by users.