diff --git a/js/contact.js b/js/contact.js index 67c37d5..e44145c 100644 --- a/js/contact.js +++ b/js/contact.js @@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", function() { const closeBtn = document.querySelector('.contacts_close'); document.getElementById('name').disabled = false; -document.getElementById('message').disabled = false; + document.getElementById('message').disabled = false; // Function to open the popup function openPopup() { diff --git a/js/paragraphs.js b/js/paragraphs.js index 69a86cc..2ae982d 100644 --- a/js/paragraphs.js +++ b/js/paragraphs.js @@ -1,22 +1,17 @@ const paragraphs = [ - "Authors often misinterpret AWS Lambda as a mere serverless function, when in actuality it feels more like an event-driven architecture powerhouse. Elastic Load Balancing shows us how applications can be distributed across multiple targets. Authors often misinterpret Amazon S3 as just a storage service, when in actuality it feels more like a scalable, secure, and highly available data repository. Recent innovations aside, their cloud infrastructure was, in this moment, a robust and resilient architecture. The deployment of a new service becomes a seamless experience. The first implementation of Amazon DynamoDB is.", - "In modern times, the first use of AWS CloudFormation is, in its own way, a template-driven infrastructure deployment. An EC2 instance is the backbone of scalable computing. An optimized AWS Lambda is a powerhouse of serverless computing. AWS CloudTrail is an audit log from the right perspective. An AWS Config rule is the policy enforcement of a secure environment. Few can name an AWS WAF that isn't a critical security layer. The trusted advisor's insights come with it the thought that the detailed reports are a guide to best practices.", - "In ancient times, the cloud could be said to resemble disparate data centers. We can assume that any instance of an AWS Region can be construed as a collection of availability zones. One cannot separate S3 buckets from effective storage solutions. Those VPCs are nothing more than isolated networks. If this was somewhat unclear, authors often misinterpret AWS Glue as just an ETL service, when in actuality it feels more like a data integration tool. A launch of an RDS instance is assumed.", - "What we don't know for sure is whether or not a deployment of the cloud is assumed to be a smooth process. The literature would have us believe that a cost-effective instance is not but an efficient use of resources. Few can name a securely configured VPC that isn't a well-architected framework. The AMI is a foundational image. However, the security group is a fundamental firewall. If this was somewhat unclear, few can name a scalable auto-scaling group that isn't a resilient application. The configured IAM policy reveals itself as a crucial access control to those who look.", - "Their DevOps pipeline was, in this moment, a streamlined automation process. The first highly available database is, in its own way, a cornerstone. The CloudWatch metrics is a monitoring service. However, an AWS Lambda function is the backbone of a serverless architecture. Effective IAM policies show us how permissions can be managed securely. Framed in a different way, they were lost without the comprehensive security that composed their cloud environment. Far from the truth, the optimized CloudFront distribution reveals itself as a fast content delivery network to those who look. The first scalable ECS cluster.", - "An Elastic Beanstalk environment is a PaaS from the right perspective. As far as we can estimate, some posit the efficient AWS Cost Explorer to be less than necessary. One cannot separate logs from detailed CloudWatch insights. The secure AWS Shield reveals itself as a DDoS protection to those who look. A VPC is the backbone of a private cloud. Some well-architected designs are thought of simply as best practices. A Glacier vault is a long-term archive from the right perspective. A CloudFormation stack is an infrastructure as code. Some posit the high-performance RDS.", - "A CloudFront distribution is a CDN from the right perspective. Before regions, availability zones were only data centers. Buckets are essential storage units. An EC2 instance is an on-demand computing resource. An instance of the cloud is assumed to be a powerful resource. An EBS volume can hardly be considered a resilient storage option without also being reliable. A Kinesis stream is a real-time data processing service. Their architecture was, in this moment, a scalable design. The flexibility of an API Gateway becomes a key integration point.", - "A Lambda function is a compute service of the mind. One cannot separate containers from efficient ECS clusters. A CloudFormation template is an infrastructure blueprint from the right perspective. The regions could be said to resemble multiple availability zones. A CodePipeline is a CI/CD tool. S3 buckets are integral to scalable storage solutions. Some posit the robust CloudTrail to be less than indispensable. A highly available architecture comes with it the thought that the Auto Scaling is a dynamic resource management. Services are resilient deployments.", - "In recent years, some highly efficient S3 transfers are thought of simply as optimized data moves. Nowhere is it disputed that an encrypted EBS volume is a secure storage solution. Far from the truth, few can name a robust IAM policy that isn't a critical access control mechanism. The RDS instance is a managed database. They were lost without the configured security group that composed their network. A CloudWatch alarm is a proactive monitoring tool. Enhanced monitoring shows us how metrics can be valuable. Few can name an integrated CodeBuild that isn't crucial to CI/CD pipelines.", - "A CloudFormation stack is an automated deployment from the right perspective. A designed VPC's subnet comes with it the thought that the well-architected framework is a secure design. Their infrastructure was, in this moment, a robust deployment. This could be, or perhaps the microservices could be said to resemble scalable architectures. An AWS CLI is a powerful tool from the right perspective. However, a Lambda function is a key component. The integration of an API Gateway becomes a scalable endpoint. Their stack was, in this moment.", - "Authors often misinterpret the cloud as a simple hosting solution, when in actuality it feels more like an advanced computing environment. Few can name an optimized EC2 instance that isn't a powerful computing resource. They were lost without the comprehensive monitoring that composed their CloudWatch setup. Those security groups are nothing more than firewalls. Few can name a scalable S3 bucket that isn't a fundamental storage solution. Though we assume the latter, the literature would have us believe.", - "This could be, or perhaps few can name an encrypted EBS snapshot that isn't a secure backup. A Lambda function is a compute unit. Authors often misinterpret AWS Kinesis as a simple data stream, when in actuality it feels more like a real-time data processing powerhouse. Some posit the efficient AWS Step Functions to be less than crucial. We know that the roles could be said to resemble managed policies. Before instances, AMIs were only images. Their deployment was, in this moment.", - "The monitoring of an application becomes a critical insight. Buckets are secure storage solutions. The detailed CloudTrail reveals itself as a critical audit log to those who look. Few can name a scalable RDS instance that isn't a managed database. However, they were lost without the encrypted EBS volume that composed their secure storage. Nowhere is it disputed that a well-architected framework is a best practice from the right perspective. One cannot separate IAM roles from secure policies. What we don't know for sure is whether.", - "A CloudFormation stack is a managed deployment from the right perspective. We know that a scalable ECS cluster comes with it the thought that the managed services are a reliable solution. Their architecture was, in this moment, a robust design. The region is an AWS entity. Far from the truth, they were lost without the configured security group that composed their VPC. A CloudWatch dashboard can hardly be considered a comprehensive monitoring tool without also being an insightful resource. The availability zone of a region becomes.", - "The regions could be said to resemble multiple data centers. One cannot separate VPCs from isolated networks. Far from the truth, the EC2 instance of a deployment becomes a powerful compute resource. An S3 bucket can hardly be considered a scalable storage solution without also being secure. The first detailed CloudTrail log is, in its own way, an audit trail. Extending this logic, the AWS Glue jobs could be said to resemble powerful ETL processes. Framed in a different way, an efficient RDS instance is a managed.", - "Far from the truth, an unencrypted EBS volume without snapshots is truly an insecure storage solution. An AWS environment without IAM roles is truly an unsecured setup. A security group sees a VPC as a fundamental firewall. The zeitgeist contends that some detailed CloudWatch logs are thought of simply as valuable insights. An API Gateway is a managed endpoint. The CloudFront distribution reveals itself as a fast CDN to those who look. Recent innovations aside.", - "The comprehensive monitoring reveals itself as an insightful CloudWatch dashboard to those who look. This could be, or perhaps the integration of an API Gateway becomes a scalable endpoint. In recent years, some posit the highly available RDS to be less than critical. It's an undeniable fact, really; the robust Lambda function reveals itself as a key serverless compute unit to those who look. In ancient times, an AMI is an image of a server. The deployment of a CloudFormation stack becomes an automated process.", - "If this was somewhat unclear, an IAM role is a secure policy from the right perspective. An optimized deployment is a streamlined process of the mind. To be more specific, a CloudFormation stack is a template from the right perspective. Authors often misinterpret the VPC as a simple network, when in actuality it feels more like an isolated cloud environment. Though we assume the latter, the first detailed CloudTrail log is, in its own way, an audit trail. We know that the API Gateway of an integration becomes a managed endpoint.", - "A managed service's efficiency comes with it the thought that the scalable Lambda function is a key component. The configuration of a VPC becomes a secure network. If this was somewhat unclear, secure IAM policies show us how permissions can be managed effectively. Their monitoring was, in this moment, a critical insight. An S3 bucket is the backbone of a storage solution. They were lost without the detailed CloudTrail log that composed their audit trail. In modern times, an API Gateway of the integration is assumed to be a managed endpoint.", - "Those S3 buckets are nothing more than scalable storage solutions. This could be, or perhaps before VPCs, networks were only isolated. An instance of the EC2 is assumed to be a powerful compute resource. A stack is the deployment of a CloudFormation. In ancient times, the first managed RDS instance is, in its own way, a scalable database. Few can name an optimized EBS volume that isn't a reliable storage option. Extending this logic, a Lambda function is the serverless compute of an application. Those CloudFront distributions are nothing more than CDNs." + "Amazon EC2 (Elastic Compute Cloud) is a web service that provides resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. With Amazon EC2, you can launch virtual servers, known as instances, within minutes. These instances can be scaled up or down based on your requirements, offering flexibility and cost-efficiency. Amazon EC2 supports a wide range of instance types optimized for different use cases, such as general-purpose, compute-optimized, memory-optimized, and storage-optimized instances. Additionally, EC2 integrates seamlessly with other AWS services, allowing you to build comprehensive and scalable applications. You can choose from a variety of operating systems, including Linux, Windows, and custom AMIs (Amazon Machine Images), providing you with the flexibility to run your preferred environment. The service also offers advanced features like auto-scaling, load balancing, and virtual networking, enabling you to manage your infrastructure more effectively. Security is a top priority with EC2, as it provides multiple layers of protection, including network firewalls, encryption, and IAM (Identity and Access Management) controls.", + "Amazon S3 (Simple Storage Service) is an object storage service that offers industry-leading scalability, data availability, security, and performance. S3 allows you to store and retrieve any amount of data at any time from anywhere on the web. It is designed to deliver 99.999999999% durability, ensuring that your data is protected against hardware failures and other potential data loss scenarios. S3 is commonly used for backup and restore, disaster recovery, data archiving, big data analytics, and static website hosting. The service supports a wide range of storage classes, allowing you to optimize costs based on your access patterns. These classes include S3 Standard for frequently accessed data, S3 Intelligent-Tiering for data with unknown or changing access patterns, S3 Standard-IA (Infrequent Access) for long-lived but less frequently accessed data, and S3 Glacier for archival storage. Amazon S3 also offers comprehensive security and compliance capabilities, including data encryption at rest and in transit, access control policies, and integration with AWS IAM. Additionally, S3 integrates with other AWS services, such as AWS Lambda, enabling you to build serverless applications that can process data as it arrives in your S3 buckets.", + "AWS Lambda is a serverless compute service that lets you run code without provisioning or managing servers. With Lambda, you can execute your code in response to a variety of events, such as changes to data in an Amazon S3 bucket, updates to a DynamoDB table, or HTTP requests from API Gateway. Lambda automatically scales your application by running code in response to each trigger, ensuring high availability and fault tolerance. You only pay for the compute time you consume, which is billed in 100-millisecond increments. This cost-effective model makes Lambda ideal for a wide range of applications, including data processing, real-time file processing, and back-end services for web and mobile applications. Lambda supports multiple programming languages, including Node.js, Python, Java, Ruby, C#, and Go, allowing you to use the language that best suits your needs. The service integrates with many other AWS services, such as AWS Step Functions for orchestration, Amazon SNS (Simple Notification Service) for messaging, and Amazon Kinesis for real-time data streaming. Security is a key feature of Lambda, with built-in support for AWS IAM to control access to your functions and resources.", + "Amazon RDS (Relational Database Service) is a managed relational database service that makes it easy to set up, operate, and scale a relational database in the cloud. It provides cost-efficient and resizable capacity while automating time-consuming administrative tasks, such as hardware provisioning, database setup, patching, and backups. RDS supports multiple database engines, including Amazon Aurora, MySQL, PostgreSQL, MariaDB, Oracle, and Microsoft SQL Server, allowing you to choose the database that best fits your needs. The service offers high availability and durability through Multi-AZ deployments, where data is synchronously replicated to a standby instance in a different Availability Zone. RDS also provides automated backups, snapshots, and point-in-time recovery to help protect your data. With RDS, you can scale your database instance’s compute and storage resources with a few clicks or API calls, ensuring that your database can handle varying workloads. The service integrates with other AWS services, such as Amazon VPC for network isolation, AWS IAM for access control, and Amazon CloudWatch for monitoring. Additionally, RDS offers enhanced security features, including encryption at rest and in transit, and the ability to enforce SSL connections for data access.", + "Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance with seamless scalability. It is designed to handle a wide range of applications, including web, mobile, gaming, IoT, and more. DynamoDB supports both document and key-value data models, allowing you to store and retrieve any amount of data with flexible schemas. The service is known for its low latency and high throughput, capable of serving millions of requests per second. DynamoDB automatically scales its throughput capacity to meet your application’s demands and provides built-in fault tolerance and high availability by replicating data across multiple Availability Zones. The service also offers fine-grained access control with AWS IAM, allowing you to define who can access specific data and how they can interact with it. DynamoDB integrates with other AWS services, such as AWS Lambda for serverless applications, Amazon Kinesis for real-time data processing, and Amazon Redshift for analytics. Additionally, DynamoDB provides advanced features like Global Tables for multi-region replication, DynamoDB Streams for change data capture, and Time to Live (TTL) for automatic data expiration.", + "Amazon VPC (Virtual Private Cloud) enables you to launch AWS resources into a virtual network that you define. This virtual network closely resembles a traditional network that you might operate in your own data center, but with the benefits of using AWS’s scalable infrastructure. VPC allows you to have complete control over your virtual networking environment, including selecting your own IP address range, creating subnets, and configuring route tables and network gateways. With VPC, you can isolate resources within a private network and control inbound and outbound traffic at the subnet level using network ACLs (Access Control Lists) and security groups. You can also create a VPN connection between your corporate data center and your VPC, extending your on-premises network to the cloud. VPC integrates with many other AWS services, such as EC2 for launching instances, RDS for managed databases, and Lambda for serverless functions. It also supports advanced networking features, such as Elastic IP addresses for static IPs, VPC peering for connecting multiple VPCs, and AWS PrivateLink for private connectivity to AWS services. Security is a core aspect of VPC, with support for encryption in transit, traffic mirroring for network monitoring, and flow logs for capturing IP traffic information.", + "Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency and high transfer speeds. CloudFront integrates with other AWS services, such as S3 for origin storage, EC2 for dynamic content, and Lambda@Edge for serverless edge computing. The service uses a global network of edge locations and regional edge caches to ensure that content is delivered from the location that is closest to the end-user, reducing latency and improving performance. CloudFront supports various content types, including static files, dynamic web pages, media files, and APIs, making it suitable for a wide range of applications. The service also offers comprehensive security features, such as HTTPS support, DDoS protection through AWS Shield, and integration with AWS WAF (Web Application Firewall) for application-layer security. CloudFront provides detailed metrics and logs through Amazon CloudWatch, allowing you to monitor and analyze your content delivery performance. Additionally, CloudFront offers features like Geo Restriction for controlling content distribution based on geographic locations, Signed URLs and Cookies for secure content delivery, and Origin Shield for improving cache hit ratios and reducing origin load.", + "AWS IAM (Identity and Access Management) is a web service that helps you securely control access to AWS services and resources for your users. With IAM, you can create and manage AWS users and groups, and use permissions to allow or deny their access to AWS resources. IAM enables you to manage identities (users, groups, and roles) and their permissions, ensuring that only authorized individuals and services have access to the resources they need. The service supports multi-factor authentication (MFA) for added security, requiring users to provide additional verification beyond their password. IAM also integrates with AWS Organizations, allowing you to manage access across multiple AWS accounts centrally. With IAM policies, you can define granular permissions using JSON-based policy documents, specifying which actions are allowed or denied on specific resources. The service supports federated access, enabling you to use existing identities from your corporate directory or other identity providers to access AWS resources. IAM is essential for implementing the principle of least privilege, ensuring that users and services have only the necessary permissions to perform their tasks, reducing the risk of unauthorized access.", + "Amazon Aurora is a fully managed relational database engine that is compatible with MySQL and PostgreSQL. It combines the performance and availability of high-end commercial databases with the simplicity and cost-effectiveness of open-source databases. Aurora is designed to be highly durable and available, with replication across multiple Availability Zones, continuous backups to Amazon S3, and automated failover. The service offers up to five times the throughput of standard MySQL and up to three times the throughput of standard PostgreSQL, making it ideal for demanding applications. Aurora's storage is automatically scalable, growing in increments of 10GB up to 128TB as needed, without any downtime. Aurora also supports Aurora Serverless, which automatically adjusts capacity based on your application's needs, allowing you to pay only for the database resources you consume. The service integrates with other AWS services, such as AWS Lambda for serverless applications, Amazon Kinesis for real-time data processing, and Amazon Redshift for analytics. Security is a top priority with Aurora, offering encryption at rest and in transit, network isolation with Amazon VPC, and fine-grained access control with AWS IAM.", + "Amazon Redshift is a fully managed data warehouse service that makes it simple and cost-effective to analyze all your data using standard SQL and your existing Business Intelligence (BI) tools. Redshift enables you to run complex queries against petabytes of structured and semi-structured data, with the ability to scale from a few hundred gigabytes to a petabyte or more. The service achieves high performance through columnar storage, data compression, and parallel query execution. Redshift also supports features like materialized views, result caching, and automatic workload management to optimize query performance. The service integrates with a wide range of data sources and BI tools, allowing you to create a unified data platform for analytics. Redshift Spectrum extends your data warehouse to query data directly in S3, without requiring data loading or transformation. Security is a key feature of Redshift, with encryption at rest and in transit, VPC network isolation, and fine-grained access control through AWS IAM. Redshift also provides comprehensive monitoring and management capabilities, including automated backups, snapshots, and integration with Amazon CloudWatch for performance and health monitoring.", + "AWS CloudFormation is a service that helps you model and set up your Amazon Web Services resources so that you can spend less time managing those resources and more time focusing on your applications. With CloudFormation, you define your infrastructure as code using JSON or YAML templates. These templates describe the resources and their configurations, enabling you to create and manage a collection of related AWS resources as a single unit. CloudFormation takes care of provisioning and configuring your resources, handling dependencies between resources, and applying changes in a predictable and repeatable manner. This approach allows you to version control your infrastructure, automate deployments, and ensure consistency across environments. CloudFormation supports a wide range of AWS resources, including EC2 instances, VPCs, RDS databases, S3 buckets, and more. The service also integrates with other AWS tools, such as AWS CodePipeline for continuous delivery and AWS Config for compliance auditing. CloudFormation's drift detection feature helps you identify changes to your resources that were made outside of your templates, ensuring that your infrastructure remains aligned with your desired state.", + "Amazon CloudWatch is a monitoring and observability service built for DevOps engineers, developers, site reliability engineers (SREs), and IT managers. CloudWatch provides data and actionable insights to monitor your applications, respond to system-wide performance changes, optimize resource utilization, and get a unified view of operational health. The service collects monitoring and operational data in the form of logs, metrics, and events from AWS resources, applications, and services running on-premises or in the cloud. CloudWatch enables you to set alarms and automate actions based on predefined thresholds, such as scaling resources, stopping or starting instances, and sending notifications. The service also supports custom metrics and logs, allowing you to monitor specific aspects of your applications and infrastructure. CloudWatch integrates with other AWS services, such as AWS Lambda for serverless monitoring, Amazon EC2 Auto Scaling for dynamic scaling, and AWS Systems Manager for operational insights and management. Additionally, CloudWatch provides features like dashboards for real-time visualization, anomaly detection for identifying unusual patterns, and synthetic monitoring for testing application endpoints.", + "AWS Elastic Beanstalk is an easy-to-use service for deploying and scaling web applications and services. It supports multiple programming languages and frameworks, including Java, .NET, PHP, Node.js, Python, Ruby, Go, and Docker. With Elastic Beanstalk, you can quickly deploy your applications without worrying about the underlying infrastructure. The service handles all the details of capacity provisioning, load balancing, scaling, and application health monitoring. You simply upload your code, and Elastic Beanstalk automatically deploys and manages your application, providing a pre-configured environment that includes a web server, an application server, and an operating system. Elastic Beanstalk also integrates with other AWS services, such as Amazon RDS for databases, Amazon S3 for storage, and Amazon CloudFront for content delivery. The service provides a web-based management console, a command-line interface (CLI), and APIs for easy interaction and automation. Elastic Beanstalk supports continuous deployment and versioning, allowing you to deploy new versions of your application and roll back to previous versions if needed. Security is built into Elastic Beanstalk, with support for VPC network isolation, IAM roles for fine-grained access control, and HTTPS for secure communication.", + "Amazon Route 53 is a scalable and highly available Domain Name System (DNS) web service designed to route end users to Internet applications by translating human-readable names, such as www.example.com, into IP addresses like 192.0.2.1. Route 53 effectively connects user requests to infrastructure running in AWS, such as EC2 instances, Elastic Load Balancers, or S3 buckets, and can also route users to infrastructure outside of AWS. The service offers domain registration, DNS routing, and health checking, enabling you to manage your domain names and DNS records easily. Route 53 supports various routing policies, including simple, weighted, latency-based, geolocation, geoproximity, and multi-value answer routing, allowing you to route traffic based on your specific requirements. Health checks monitor the health and performance of your applications and endpoints, automatically routing traffic away from unhealthy resources. Route 53 integrates with other AWS services, such as CloudFront for CDN, Elastic Load Balancing for traffic distribution, and AWS IAM for access control. Security features include DNSSEC (Domain Name System Security Extensions) for protecting against DNS spoofing and encryption for data in transit.", + "AWS Step Functions is a serverless orchestration service that lets you combine AWS Lambda functions and other AWS services to build and run resilient serverless workflows. Step Functions makes it easy to coordinate the components of distributed applications and microservices using visual workflows. You define state machines using JSON-based Amazon States Language (ASL), specifying the sequence of steps, branching, error handling, and retry logic. Step Functions automatically triggers and tracks each step, ensuring that your application executes in the correct order and manages failures gracefully. The service integrates with a wide range of AWS services, including Lambda, ECS, Fargate, DynamoDB, S3, SNS, SQS, and more, allowing you to build complex workflows that span multiple services. Step Functions also supports callback patterns, enabling you to pause workflows and wait for external events before resuming execution. Security is a core aspect of Step Functions, with support for IAM roles and policies to control access to your workflows and integrated monitoring through Amazon CloudWatch for tracking execution history and performance metrics. Step Functions is ideal for various use cases, including data processing pipelines, microservices orchestration, IT automation, and business process automation." ]; diff --git a/js/script.js b/js/script.js index 9ef3574..0cb45f1 100644 --- a/js/script.js +++ b/js/script.js @@ -13,17 +13,19 @@ let timer, maxTime = 60, timeLeft = maxTime, charIndex = mistakes = isTyping = 0, - isPopupOpen = false; - + isPopupOpen = false, + lineHeight = 21, + initialLines = 3, + currentLine = 0; function loadParagraph() { const ranIndex = Math.floor(Math.random() * paragraphs.length); typingText.innerHTML = ""; paragraphs[ranIndex].split("").forEach(char => { - let span = `${char}` + let span = `${char}`; typingText.innerHTML += span; }); - typingText.querySelectorAll("span")[0].classList.add("active"); + typingText.querySelectorAll(".char")[0].classList.add("active"); document.addEventListener("keydown", (e) => { if (!isPopupOpen) inpField.focus(); }); @@ -35,7 +37,7 @@ function loadParagraph() { function initTyping() { if (isPopupOpen) return; // Prevent typing test when popup is open - let characters = typingText.querySelectorAll("span"); + let characters = typingText.querySelectorAll(".char"); let typedChar = inpField.value.split("")[charIndex]; if (charIndex < characters.length && timeLeft > 0) { // Allow typing till the end of characters if (!isTyping) { @@ -72,6 +74,24 @@ function initTyping() { clearInterval(timer); inpField.value = ""; } + + const activeChar = typingText.querySelector(".char.active"); + const activeCharTop = activeChar.getBoundingClientRect().top; + const previousChar = activeChar.previousElementSibling; + + if (window.matchMedia("(max-width: 795px)").matches) { + lineHeight = 19; + } + + if (previousChar) { + const previousCharTop = previousChar.getBoundingClientRect().top; + if (activeCharTop > previousCharTop + lineHeight) { + currentLine++; + if (currentLine > initialLines) { + typingText.style.marginTop = -(lineHeight * (currentLine - initialLines))*1.52 + "px"; + } + } + } } function initTimer() { @@ -95,6 +115,8 @@ function resetGame() { wpmTag.innerText = 0; mistakeTag.innerText = 0; cpmTag.innerText = 0; + typingText.style.marginTop = "0px"; + currentLine = 0; } // Function to open the popup diff --git a/styles/footer.css b/styles/footer.css index d9bce8a..04668bf 100644 --- a/styles/footer.css +++ b/styles/footer.css @@ -1,7 +1,7 @@ @import url('variables.css'); .footer-container { - margin: 3rem 5rem 0 5rem; + margin: 3rem 5rem 1rem 5rem; -webkit-user-select: none; user-select: none; display: grid; diff --git a/styles/type.css b/styles/type.css index bd8d196..fe48c71 100644 --- a/styles/type.css +++ b/styles/type.css @@ -17,7 +17,7 @@ main { flex-direction: column; align-items: center; justify-content: center; -margin: 1rem; + margin: 1rem; } ::selection{ @@ -48,40 +48,41 @@ margin: 1rem; .content-box .typing-text{ overflow: hidden; - max-height: 20rem; + height: 178px; } -.typing-text::-webkit-scrollbar{ +/* .typing-text::-webkit-scrollbar{ width: 0; -} +} */ .typing-text p{ font-size: 21px; - text-align: justify; + text-align: left; letter-spacing: 1px; - /* word-break: break-all; */ + word-break: break-all; } -.typing-text p span{ + +.typing-text p .char{ position: relative; } -.typing-text p span.correct{ +.typing-text p .char.correct{ color: var(--correct); } -.typing-text p span.incorrect{ +.typing-text p .char.incorrect{ color: var(--incorrectA ); outline: 1px solid var(--black); background: var(--wrong-highlighted); border-radius: 4px; } -.typing-text p span.active{ +.typing-text p .char.active{ color: var(--neon); } -.typing-text p span.active::before{ +.typing-text p .char.active::before{ position: absolute; content: ""; height: 2px; @@ -175,7 +176,7 @@ li:not(:first-child) span{ padding: 20px 0; } .content-box .typing-text{ - max-height: 20rem; + max-height: 161px; } .typing-text p{ font-size: 19px;