Animationen, die auf mobilen Plattformen nicht rendern ⇐ CSS

[Anonymous]

Ich habe eine Portfolio -Website mit React JS mit Node JS auf VSCODE erstellt, um meine Fähigkeiten mit einer Terminal -Schreibmaschinenanimation zu präsentieren. Bei Laptop-/PC -Browsern funktioniert alles vollkommen in Ordnung, aber als ich versuchte, auf Mobile auf meine Website zugegriffen zu haben

Code: Select all

import './App.css';
import React, { use, useState } from 'react';
import Windowz from './RoomWindow';
import Table from './Tables';
import Footer from './Footer';
import Contents from './ScreenContent';

function App() {

return (








);
}

export default App;

< /code>
Dies ist der Animationsteil für Windowz, der Sun and Moon Orbit zeigt -> < /p>
import './App.css';
import React, { useState } from 'react';

function Windowz() {
//////////////////////////////////////////////////////
const starsArray = [];
const stars = 40;
let x,y = 0;

// Generate stars randomly using absolute position
for (let i = 0; i < stars; i++) {
x = Math.floor(Math.random() * 100 + 1) + "%";
y = Math.floor(Math.random() * 100 + 1) + "%";
starsArray.push(x);
starsArray.push(y);
}
//////////////////////////////////////////////////////

return (



















{starsArray.map((element,index) => {
return();
})}








);
}

export default Windowz;

< /code>
Und dies ist der Hauptbildschirminhaltsteil -> < /p>
import './App.css';
import React, { useState } from 'react';

function Contents () {

const [state, setState] = useState(false);
const [stype, setTyping] = useState("");
const [state3, setState3] = useState(false);
////////////////////////////////// OPTION SELECTION ///////////////////////////////////////
const [BIO, setBio] = useState(" -bio/");
const [WORK, setWork] = useState(" -work_Experiences/");
const [PROJECTS, setProjects] = useState(" -projects/");
const [state4, setState4] = useState(false);
const [state5, setState5] = useState(false);
const [state6, setState6] = useState(false);
const [state7, setState7] = useState(false);
const [state8, setState8] = useState(false);
const [state9, setState9] = useState(false);

function option1() {
setTimeout(() =>  {
//setState3(false);
setState4(true);
setState5(true);
setState6(false);
setState7(false);
setState8(false);
setState9(false);
lineThree.classList.remove("typewriter");

}, 500);

}
function option2() {
setState4(false);
setState5(false);
setState6(true);
setState7(true);
setState8(false);
setState9(false);
lineThree.classList.remove("typewriter");

}
function option3() {
setState4(false);
setState5(false);
setState6(false);
setState7(false);
setState8(true);
setState9(true);
lineThree.classList.remove("typewriter");
}
function fullScreen() {
var el = document.getElementById('fake__Screen');
el.requestFullscreen();
}

//////////////////////////////////** OPTION SELECTION **///////////////////////////////////////
function nextLine1() {
setTimeout(() => {
setState(true);
setTyping("hide");
console.log("animation ended1");
}, 2000);
}
function nextLine2() {
setTimeout(() => {
setState3(true);
setState(false);
setTyping("hide");
console.log("animation ended2");
}, 2000);
}
const lineOne = document.getElementById("line1");
const lineTwo = document.getElementById("line2");
const lineThree = document.getElementById("line3");
if (lineOne) {
lineOne.addEventListener("animationend", nextLine1);
}
if (lineTwo) {
lineTwo.addEventListener("animationend", nextLine2);
}

window.onload = () => {
setTyping("typewriter");
console.log("applied");
}

return (










user@sleepyCoderz~$&nbsp;

sudo pip i mirza_Asim/portfolio



..........!!!content downloaded!


Select the commands to view -> &nbsp;sudo cat&nbsp; {BIO}&nbsp;{WORK}&nbsp;{PROJECTS}&nbsp;



Professional Summary

$~  An experienced engineer with a Master’s degree in Electrical and Computer
Engineering, currently pursuing a Full-Stack Web/Cloud Development, AI/ML,
and Cybersecurity IT position.

$~  Proficient in a wide range of programming languages, frameworks, and tools.
Hands-on experience in building monitoring dashboards, optimizing queries, and
deploying solutions in cloud environments, combined with a solid foundation in
Cybersecurity and Network management.

Skills and Areas of Expertise

#   Languages & Framework: JSX, JavaScript, SQL, React.js, HTML, CSS,
Bootstrap, Spring Boot, Node.js, RESTful APIs, python, C#, C++, MATLAB, ROS,
Express, Shell.

#   Databases: MySQL, PostgreSQL

#   Tools & Technology: GitHub Actions, Docker, Kubernetes,
Cisco Packet tracer, CI/CD Pipelines, Virtualization (Hyper-V), SNMP,
Prometheus, Grafana, InfluxDB, Netbox, Juniper Networks, Unity, CATIA v5,
AutoCAD, Fusion 360, SolidWorks, Camlytics, Simatic Siemens S7 300,
ServiceNow Administrators course.



$~: &nbsp;sudo cat&nbsp; {WORK}&nbsp;{PROJECTS}&nbsp;


Work Experience

Security Intern, Bell, Mississauga ON

#   Conducted research and built monitoring dashboards using Prometheus and
Grafana, provided Level 1 technical support by configuring SNMP for data
collection, and compared Prometheus with InfluxDB for efficiency.
Provisioned new Juniper EX4650 switches, managed Netbox for server room device
data as well as network topology building, collaborated with IBM on SNMP
setup, and gained experience in GitLab CI/CD, Docker deployment, Hyper-V
setup, and full-stack web development.

Data Scientist Developer, Magnify Access Inc, Toronto (remote internship)

#   Developed expertise in data science techniques for analyzing and
visualizing complex datasets, optimized user queries for accommodation
recommendations, streamlined queries on the Magnify Access platform to improve
user experience, and built an OCR text extraction project using Python's
Tesseract library for accurate data retrieval and processing.

Cybersecurity Technology Consultant, Amiviz, Dubai (internship)

#   Gained expertise in EDR and Network Detection solutions with a CrowdStrike
EDR certification, actively participated in cybersecurity strategy meetings
with partner vendors, demonstrated strong knowledge of the AmiViz product
portfolio, networking, and CCNA concepts, and provided technical support for
DIMM Module replacement and troubleshooting in ExtraHop devices at client
premises.

Mechatronics Engineer, Magna Innovations, Magna Innovations, Dubai (internship) 2021

#   Successfully designed the Automated Sliding Screen Robot development project
using SolidWorks, researched materials, and developed a People Counting program by
successfully establishing TCP socket communication between Python and Unity.  Served
as an audiovisual representative at the GITEX 2022 event, handling device
maintenance and optimization.



$~: &nbsp;sudo cat&nbsp; {BIO}&nbsp;{PROJECTS}&nbsp;


Academic Projects

QoS Analysis across Tree, Ring, Half-Mesh, and Full-Mesh Network Technology | Winter 2024

#   Conducted in-depth comparison of Quality of Service (QoS) metrics across
diverse network topologies.

#   Utilized Cisco Packet Tracer and Python to simulate and configure network
environments realistically.

#   Analyzed QoS parameters meticulously to discern nuanced performance differences.

#   Established a robust framework for future investigations into network performance.

Fake News Detection using CNN-LSTM model (Python)| Winter 2024

#   Modified and designed the AI program for improved detection of Fake news present
online employing a combination of CNN and LSTM algorithms to achieve an AUC score
of 97.50%.

#   Addressed challenges in processing human language. Aimed to contribute to more
reliable detection systems for a healthier information ecosystem.

#   Worked in a group of two for this post-graduation project and successfully
drafted the IEEE research paper.


$~: &nbsp;sudo cat&nbsp;{BIO}&nbsp; {WORK}&nbsp;












);
}

export default Contents;