diff --git a/article/ai/2.jpg b/article/ai/2.jpg new file mode 100644 index 0000000..a936cbf Binary files /dev/null and b/article/ai/2.jpg differ diff --git a/article/ai/index.html b/article/ai/index.html new file mode 100644 index 0000000..33bdadc --- /dev/null +++ b/article/ai/index.html @@ -0,0 +1,235 @@ + + + + + + + AI Revolution + + + + + + +
+ +
+ +
+ +
+
+ +

+ T he AI revolution drives the fourth industrial revolution. It + transforms business operations worldwide. AI executes tasks that traditionally require human-level + intelligence. This revolution significantly impacts productivity across all industries. + The AI revolution also changes how organizations collect and process data. It + transforms business operations in every sector. Three major aspects support AI systems: domain + knowledge, data generation, and machine learning.. +

+ + + + +

Core Components of the AI Revolution

+

Domain knowledge represents understanding of real-world scenarios. It + explains why and how we + engineer specific tasks. The data aspect prepares databases for learning algorithms. Machine + learning detects patterns from training data and performs tasks without explicit programming.

+ +
+

Three Key Attributes of AI Technology

+ + +
+

Data Generation:

+

Database preparation for algorithms

+ +
+ +
+

Machine Learning:

+

Pattern detection and autonomous task execution +

+ +
+
+

Domain Knowledge:

+

Real-world understanding and expertise

+ +
+ +
+ + + +

Intelligent Decision Making + +

+

Machine intelligence simulation provides fast solutions to human problems. Advanced data analytics + and machine learning back AI systems. AI learns and gains insights from new data continuously. + + Proper input enables AI to make prompt and accurate decisions. AI’s intelligence promotes + productivity and reduces human dependency. This makes AI highly autonomous and convenient.

+ +

Intentionality in AI Systems

+

Intentionality derives from algorithms and knowledge engineering. This attribute enables AI to + deliver insights from real-time information. AI reacts similarly to its creators and users. + + Responses reflect the social context of creators and users. Data ingestion, storage capacity, and + processing speed improvements enhance AI capabilities. AI responds to issues with increasing + sophistication.

+ +

Adaptability and Prediction

+

Adaptability and Prediction + Machine learning helps AI discover data patterns. This enables AI to change as circumstances change. + Adaptability enhances AI’s prediction and decision-making capabilities. + + Gmail’s Smart Compose feature demonstrates this adaptability. It offers personalized suggestions + while users type sentences. This shows how AI adapts to personal writing patterns.

+ +

The AI Revolution in Business

+

+ The AI revolution profoundly impacts business operations. Companies automate repetitive tasks + requiring minimal human input. Algorithm improvements expand AI beyond productivity enhancement. + + AI becomes essential for customer engagement and service excellence. It drives innovation across + industries. Here are key scenarios showing business transformation.

+ +

Preparing for the Future

+

+ The AI revolution offers tremendous potential in our data-driven era. Business process automation + reduces internal stress and human dependency. It increases operational cost efficiency + simultaneously. + + Machine learning enables intelligent approaches and drives business model evolution. Companies must + prepare for the AI revolution wave. They can leverage technology to achieve optimal operational + excellence.

+ + + +
+ + + +
+
+ AI Robot Concept +
+
+

The AI Revolution is a transformative era that is redefining the boundaries of human capability. + It represents a fundamental shift in how we process information, solve problems, and interact + with the digital world. By integrating machine learning and intelligent algorithms into our + daily systems, this revolution is creating a smarter, faster, and more efficient future across + all industries.

+
+ +
+

Key Areas of Impact

+ +
+ Workforce & Education: +
    +
  • Skill Augmentation:AI acts as a co-pilot, enhancing human capabilities. +
  • +
  • Personalized Learning: Educational platforms adapt to each student's + unique pace and style.
  • +
+
+ +
+ Healthcare & Biotechnology: +
    + +
  • Predictive Diagnostics:AI analyzes patient history to predict health + risks + before symptoms appear. +
  • +
  • Drug Discovery: Identifying new medicine at a fraction of traditional + costs + and time.
  • +
+
+ +
+ Security & Ethics: +
    + +
  • Threat Detection:Real-time monitoring of networks to identify and block + cyber-attacks. +
  • +
  • Ethical Governance: Developing frameworks to ensure AI remains + transparent + and fair.
  • +
+
+ +
+ Industry & Logistics: +
    + +
  • Predictive Maintenance:Sensors predict machinery failure before it + happens + to save costs. +
  • +
  • Supply Chain Optimization:AI calculates the fastest and most efficient + routes for global shipping.
  • +
+
+ +
+ Development & Creative Arts: +
    + +
  • Automated Coding:AI models can write, debug, and optimize software code + in + seconds. +
  • +
  • Rapid Prototyping:Designers can turn simple ideas into interactive + UI/UX + mockups instantly.
  • +
+
+ +
+
+ + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/article/ai/style.css b/article/ai/style.css new file mode 100644 index 0000000..6326286 --- /dev/null +++ b/article/ai/style.css @@ -0,0 +1,369 @@ +:root { + --magazine-purple: #802b7d; + --text-main: #333; + --text-light: #555; + --accent-blue: #2980b9; + --gray-bg: #f5f5f7; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Libre Franklin', sans-serif; + background-color: #ddd; + color: var(--text-main); + line-height: 1.5; +} + +.top-bar, +.article-container, +.main-footer { + max-width: 1100px; + width: 100%; + margin: 0 auto; +} + +/* start nav */ +.top-bar { + background-color: var(--magazine-purple); + color: white; + padding: 10px 50px; + font-weight: 900; + font-size: 0.9rem; + letter-spacing: 1px; + text-transform: uppercase; + position: sticky; + top: 0; + z-index: 100; + max-width: 1100px; + width: 100%; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px 8px 0 0; +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px 8px 0 0; + max-width: 1100px; + margin: 0 auto; + padding: 20px 50px; + flex-wrap: wrap; + gap: 15px; +} + +/* end nav */ + +.article-container { + background: white; + padding: 50px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + margin-top: 0 !important; + border-radius: 0; +} + +.intro-grid { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 50px; + padding: 0; +} + +/* start intro */ +.intro-span { + float: left; + font-size: 5rem; + line-height: 0.8; + font-weight: 900; + margin-right: 12px; + color: var(--accent-blue); +} + +.intro { + font-size: 1.10rem; + font-weight: 600; + margin-bottom: 20px; + text-align: justify; +} + +/* end intro */ + +/* sstart first section */ +.section-title { + color: var(--accent-blue); + font-size: 1.3rem; + border-bottom: 3px solid #eee; + padding-bottom: 5px; + margin: 40px 0 20px; +} + +.Components-main-title { + color: var(--magazine-purple); + margin-top: 20px; +} + +.Components-block { + margin-bottom: 1px; +} + +.Components-block h4 { + font-size: 1.05rem; + margin-bottom: 8px; + color: var(--magazine-purple); + +} + +/* end first section */ + +/* start image */ +.side-image { + width: 100%; + margin-bottom: 25px; + text-align: center; + overflow: hidden; +} + +.side-image img { + width: 100%; + max-width: 280px; + height: 300px; + object-fit: cover; + border-radius: 4px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); + transition: 0.3s; + filter: grayscale(10%); +} + +.side-image img:hover { + transform: scale(1.02); + filter: grayscale(0%); +} + +/* end image */ + +/* start impact area */ + +.side-intro { + margin-bottom: 40px; + border-left: 3px solid #ddd; + padding-left: 15px; +} + +.Impact-box { + background-color: var(--gray-bg); + padding: 20px; + border-radius: 2px; + height: auto; + +} + +.box-title { + font-size: 1.1rem; + margin-bottom: 25px; + color: var(--magazine-purple); + text-align: center; + border-bottom: 1px solid #ddd; + padding-bottom: 10px; +} + +.impact-area { + margin-bottom: 30px; +} + +.area-label { + font-size: 0.85rem; + font-weight: 900; + color: var(--accent-blue); + text-transform: uppercase; +} + +.impact-area h4 { + margin-bottom: 8px; + font-size: 1rem; +} + +.impact-area p { + font-size: 0.88rem; + color: var(--text-light); +} + +.example-list { + margin: 10px 0 0 20px; + list-style-type: square; + font-size: 0.9rem; + color: var(--text-light); +} + +.example-list li { + margin-bottom: 5px; +} + +/* end impact area */ + +/* start footer */ +.main-footer { + background-color: #222; + color: #fff; + width: 100%; + max-width: 1100px; + margin: 0 auto !important; + border-radius: 0 0 8px 8px; + padding: 40px 50px; + box-sizing: border-box; +} + +.footer-container { + display: flex; + justify-content: space-between; + padding: 0; + gap: 40px; + flex-wrap: wrap; + align-items: center; + text-align: center; +} + +.footer-section { + flex: 1; + min-width: 200px; + +} + +.footer-logo { + font-size: 1.2rem; + font-weight: 900; + +} + +.footer-logo span { + color: var(--magazine-purple); +} + +.footer-section p { + font-size: 0.85rem; + color: #aaa; + line-height: 1.6; + +} + +.footer-section h4 { + font-size: 0.9rem; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--magazine-purple); + align-items: center; +} + +.social-icons { + display: flex; + flex-direction: column; + gap: 9px; + align-items: flex-start; + align-items: center; + margin-bottom: 15px; +} + +.social-icons span { + color: var(--accent-blue); +} + +.social-icons a { + text-decoration: none; + color: #aaa; + font-size: 0.9rem; +} + +.social-icons a:hover { + color: var(--magazine-purple); +} + +.footer-bottom { + text-align: center; + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid #333; + font-size: 0.75rem; + color: #666; +} + +.footer-bottom:hover { + + color: var(--magazine-purple); +} + +/* end footer */ +/* Responsiveness */ + +@media screen and (max-width: 992px) { + + .top-bar, + .article-container, + .main-footer { + max-width: 95%; + padding: 30px; + } + + .intro-grid { + grid-template-columns: 1fr; + gap: 30px; + } + + .side-image img { + max-width: 100%; + height: auto; + } +} + +@media screen and (max-width: 768px) { + .top-bar { + padding: 10px 20px; + flex-direction: column; + gap: 10px; + text-align: center; + } + + .nav-container { + padding: 15px 20px; + justify-content: center; + } + + .article-container { + padding: 25px; + } + + .intro-span { + font-size: 3.5rem; + } + + .footer-container { + flex-direction: column; + gap: 30px; + } + + .footer-section { + width: 100%; + } +} + +@media screen and (max-width: 480px) { + .section-title { + font-size: 1.1rem; + } + + .intro { + font-size: 1rem; + text-align: left; + } +} \ No newline at end of file diff --git a/careers/cv/.vscode/settings.json b/careers/cv/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/careers/cv/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/careers/cv/Reem Fawaz Alotaibi.pdf b/careers/cv/Reem Fawaz Alotaibi.pdf new file mode 100644 index 0000000..b9b12ee Binary files /dev/null and b/careers/cv/Reem Fawaz Alotaibi.pdf differ diff --git a/careers/cv/about-me.html b/careers/cv/about-me.html new file mode 100644 index 0000000..a68940c --- /dev/null +++ b/careers/cv/about-me.html @@ -0,0 +1,155 @@ + + + + + + + + + REEM CV + + + + + + + + + + +
+

Get to Know Me

+ +
+ + + +
+
+
+ + + + +

Who I Am

+
+
+

I’m a passionate Full Stack Developer and UI/UX Designer who loves turning ideas into + meaningful digital experiences.

+
+
+
+ + +
+
+
+ + + +

What I Do

+
+
+

I design and build modern, user-friendly websites with clean code and elegant visuals.

+
+
+
+ + +
+
+
+ + + +

My Vision

+
+
+

I aim to create impactful digital solutions that feel smooth, intuitive, and beautiful.

+
+
+
+ + +
+
+
+ + + + + +

My Strength

+
+
+

As a Developer & Designer, I combine creativity and logic to build user-centered products + that solve real problems beautifully.

+
+
+
+ + + + + + Download CV + +
+
+ + + + + + + \ No newline at end of file diff --git a/careers/cv/certificates.html b/careers/cv/certificates.html new file mode 100644 index 0000000..c7ad684 --- /dev/null +++ b/careers/cv/certificates.html @@ -0,0 +1,157 @@ + + + + + + + + + Certificates + + + + + + + +
+

Certificates

+
+
+ Certificate 1 +

game programing and design

+
+ +
+ Certificate 1 +

flutter101

+
+
+ Certificate 1 +

flutter102

+ +
+
+ Certificate 1 +

flutter103

+ +
+
+ Certificate 1 +

flutter104

+ +
+
+ Certificate 1 +

flutter105

+ +
+
+ Certificate 1 +

flutter106

+ +
+
+ Certificate 1 +

dart101

+ +
+
+ Certificate 1 +

dart102

+ +
+
+ Certificate 1 +

dart103

+ +
+
+ Certificate 1 +

dart104

+ +
+ +
+ Certificate 1 +

css

+
+
+ Certificate 1 +

git

+
+
+ Certificate 1 +

html

+
+
+ Certificate 1 +

oop

+
+
+ Certificate 1 +

sql102

+
+
+ Certificate 1 +

sql101

+
+ +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/careers/cv/certificates/c#.png b/careers/cv/certificates/c#.png new file mode 100644 index 0000000..701a383 Binary files /dev/null and b/careers/cv/certificates/c#.png differ diff --git a/careers/cv/certificates/c1.png b/careers/cv/certificates/c1.png new file mode 100644 index 0000000..724af06 Binary files /dev/null and b/careers/cv/certificates/c1.png differ diff --git a/careers/cv/certificates/css.png b/careers/cv/certificates/css.png new file mode 100644 index 0000000..cd9d237 Binary files /dev/null and b/careers/cv/certificates/css.png differ diff --git a/careers/cv/certificates/d1.png b/careers/cv/certificates/d1.png new file mode 100644 index 0000000..d3aa9c3 Binary files /dev/null and b/careers/cv/certificates/d1.png differ diff --git a/careers/cv/certificates/d2.png b/careers/cv/certificates/d2.png new file mode 100644 index 0000000..e77f140 Binary files /dev/null and b/careers/cv/certificates/d2.png differ diff --git a/careers/cv/certificates/d3 (2).png b/careers/cv/certificates/d3 (2).png new file mode 100644 index 0000000..75056d6 Binary files /dev/null and b/careers/cv/certificates/d3 (2).png differ diff --git a/careers/cv/certificates/d3.png b/careers/cv/certificates/d3.png new file mode 100644 index 0000000..05bc74b Binary files /dev/null and b/careers/cv/certificates/d3.png differ diff --git a/careers/cv/certificates/d4.png b/careers/cv/certificates/d4.png new file mode 100644 index 0000000..04cc415 Binary files /dev/null and b/careers/cv/certificates/d4.png differ diff --git a/careers/cv/certificates/f1.png b/careers/cv/certificates/f1.png new file mode 100644 index 0000000..53cc4bb Binary files /dev/null and b/careers/cv/certificates/f1.png differ diff --git a/careers/cv/certificates/f2.png b/careers/cv/certificates/f2.png new file mode 100644 index 0000000..7ed9063 Binary files /dev/null and b/careers/cv/certificates/f2.png differ diff --git a/careers/cv/certificates/f3.png b/careers/cv/certificates/f3.png new file mode 100644 index 0000000..22d7dad Binary files /dev/null and b/careers/cv/certificates/f3.png differ diff --git a/careers/cv/certificates/f4.png b/careers/cv/certificates/f4.png new file mode 100644 index 0000000..f046f33 Binary files /dev/null and b/careers/cv/certificates/f4.png differ diff --git a/careers/cv/certificates/f5.png b/careers/cv/certificates/f5.png new file mode 100644 index 0000000..dec6924 Binary files /dev/null and b/careers/cv/certificates/f5.png differ diff --git a/careers/cv/certificates/f6.png b/careers/cv/certificates/f6.png new file mode 100644 index 0000000..5b459fd Binary files /dev/null and b/careers/cv/certificates/f6.png differ diff --git a/careers/cv/certificates/git.png b/careers/cv/certificates/git.png new file mode 100644 index 0000000..29b32c9 Binary files /dev/null and b/careers/cv/certificates/git.png differ diff --git a/careers/cv/certificates/html.png b/careers/cv/certificates/html.png new file mode 100644 index 0000000..a9b9a93 Binary files /dev/null and b/careers/cv/certificates/html.png differ diff --git a/careers/cv/certificates/oop.png b/careers/cv/certificates/oop.png new file mode 100644 index 0000000..402aea6 Binary files /dev/null and b/careers/cv/certificates/oop.png differ diff --git a/careers/cv/certificates/sql1.png b/careers/cv/certificates/sql1.png new file mode 100644 index 0000000..1b89a9f Binary files /dev/null and b/careers/cv/certificates/sql1.png differ diff --git a/careers/cv/certificates/sql2.png b/careers/cv/certificates/sql2.png new file mode 100644 index 0000000..276f0ee Binary files /dev/null and b/careers/cv/certificates/sql2.png differ diff --git a/careers/cv/contact.html b/careers/cv/contact.html new file mode 100644 index 0000000..a2adcab --- /dev/null +++ b/careers/cv/contact.html @@ -0,0 +1,126 @@ + + + + + + + + + Contact Me + + + + + + + + +
+
+

Contact Me

+ + +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/careers/cv/exp.html b/careers/cv/exp.html new file mode 100644 index 0000000..d58fbce --- /dev/null +++ b/careers/cv/exp.html @@ -0,0 +1,97 @@ + + + + + + + + + experience + + + + + + + + +
+

Experience & Education

+ +
+ +
+

Princess Nourah bint Abdulrahman University

+ 2021 - 2025 + Bachelor in Information System - Riyadh, Saudi Arabia +
+ +
+

Co-op Training

+ 2025 + Ministry of Education Saudi Arabia +
    +
  • Analyzed business requirements to support digital service initiatives .
  • +
  • Prepared BRD, BRS, and UAT documents in coordination with technical and business teams + .
  • +
  • Participated in 5 stakeholder meetings to gather and validate system requirements + .
  • +
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/careers/cv/index.html b/careers/cv/index.html new file mode 100644 index 0000000..e2be28e --- /dev/null +++ b/careers/cv/index.html @@ -0,0 +1,90 @@ + + + + + + + REEM CV + + + + + + + + + +
+ + +
+

Hi , I'm Reem

+

Full Stack Developer & UI/UX Designer

+ About Me + + +
+ +
+
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/careers/cv/projects.html b/careers/cv/projects.html new file mode 100644 index 0000000..2575324 --- /dev/null +++ b/careers/cv/projects.html @@ -0,0 +1,134 @@ + + + + + + + + + projects + + + + + + + + +
+

My Projects

+

Click on the image for more details

+ +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/careers/cv/projects/p1.png b/careers/cv/projects/p1.png new file mode 100644 index 0000000..de9e042 Binary files /dev/null and b/careers/cv/projects/p1.png differ diff --git a/careers/cv/projects/p2.png b/careers/cv/projects/p2.png new file mode 100644 index 0000000..b0ecbc8 Binary files /dev/null and b/careers/cv/projects/p2.png differ diff --git a/careers/cv/projects/p3.png b/careers/cv/projects/p3.png new file mode 100644 index 0000000..d8e66e1 Binary files /dev/null and b/careers/cv/projects/p3.png differ diff --git a/careers/cv/projects/p4 (1).jpg b/careers/cv/projects/p4 (1).jpg new file mode 100644 index 0000000..438b8d5 Binary files /dev/null and b/careers/cv/projects/p4 (1).jpg differ diff --git a/careers/cv/projects/p5.jpg b/careers/cv/projects/p5.jpg new file mode 100644 index 0000000..fac4de2 Binary files /dev/null and b/careers/cv/projects/p5.jpg differ diff --git a/careers/cv/script.js b/careers/cv/script.js new file mode 100644 index 0000000..31fe18f --- /dev/null +++ b/careers/cv/script.js @@ -0,0 +1,39 @@ +const codeLines = [ + "const developer = 'Reem';", + "function buildPortfolio() {", + " console.log('Loading assets...');", + " if (skills.includes('Full Stack')) {", + " renderMagic();", + " }", + "}", + "buildPortfolio();", + "// UI/UX Design mode: active", + "system.status('Optimized');", + "fetching data from server...", + "Done! Welcome to my world." +]; + +const terminal = document.getElementById('code-terminal'); +let lineIndex = 0; + +function typeCode() { + if (lineIndex < codeLines.length) { + let line = document.createElement('div'); + line.textContent = "> " + codeLines[lineIndex]; + terminal.appendChild(line); + + lineIndex++; + + terminal.scrollTop = terminal.scrollHeight; + + setTimeout(typeCode, 600); + } else { + setTimeout(() => { + terminal.innerHTML = ""; + lineIndex = 0; + typeCode(); + }, 3000); + } +} + +window.onload = typeCode; \ No newline at end of file diff --git a/careers/cv/skills.html b/careers/cv/skills.html new file mode 100644 index 0000000..f6869b4 --- /dev/null +++ b/careers/cv/skills.html @@ -0,0 +1,151 @@ + + + + + + + + + + skills + + + + + + + + +
+

Skills

+
+ Java +
+
+
+
+
+ Python +
+
+
+
+ +
+ Flutter +
+
+
+
+ +
+ SQL +
+
+
+
+ +
+ MySQL +
+
+
+
+ +
+ HTML +
+
+
+
+ +
+ CSS +
+
+
+
+ +
+ JavaScript +
+
+
+
+ +
+ PHP +
+
+
+
+ +
+ Asp.net.core +
+
+
+
+ +
+ Dart +
+
+
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/careers/cv/style.css b/careers/cv/style.css new file mode 100644 index 0000000..d712042 --- /dev/null +++ b/careers/cv/style.css @@ -0,0 +1,1023 @@ +body { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #d6d4c9; + line-height: 1.6; +} + +/* start nav */ +.top-bar { + background-color: #b3d6f8a5; + color: rgb(0, 0, 0); + padding: 10px 50px; + font-weight: 900; + font-size: 0.9rem; + letter-spacing: 1px; + text-transform: uppercase; + position: sticky; + top: 0; + z-index: 100; + max-width: 1100px; + width: 90%; + margin: 20px auto; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 90px; +} + +.nav-container { + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 8px 8px 0 0; + max-width: 1100px; + margin: 0 auto; + padding: 20px 50px; + flex-wrap: wrap; + gap: 15px; +} + + +.nav-links { + list-style: none; + display: flex; + gap: 25px; + flex-wrap: wrap; +} + +.nav-links li a { + text-decoration: none; + color: rgb(0, 0, 0); + font-size: 1rem; + font-weight: 600; + transition: 0.3s; +} + +.nav-links li a:hover { + color: #ffd6ff; +} + + +/*start header*/ +.intro { + display: flex; + justify-content: space-around; + align-items: center; + padding: 100px 10px; + background: #9d9f97; + border-radius: 90px; + margin: 30px; + +} + +.intro-content h1 { + font-size: 3rem; + color: #000000; + text-align: center; + width: 100%; +} + + +.laptop { + transform: scale(0.8); + background: transparent; +} + +.screen { + border-radius: 20px; + box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 10px #828282; + height: 318px; + width: 518px; + margin: 0 auto; + padding: 9px 9px 23px 9px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + + background: rgb(0, 0, 0); + backdrop-filter: blur(10px); + border: 1px solid rgba(0, 0, 0, 0.2); + + transform-style: preserve-3d; + transform: perspective(1900px) rotateX(-88.5deg); + transform-origin: 50% 100%; + + animation: open 2s ease-out forwards; +} + +.code-container { + width: 100%; + height: 100%; + padding: 15px; + font-family: 'Courier New', monospace; + font-size: 13px; + color: #ffd6ff; + overflow: hidden; + text-align: left; + line-height: 1.5; +} + + + +.keyboard { + background: #828282f9; + border: solid #a0a3a7; + border-radius: 2px 2px 12px 12px; + border-width: 1px 2px 0 2px; + box-shadow: inset 0 -2px 8px 0 #6c7074; + height: 24px; + margin-top: -10px; + position: relative; + width: 620px; + z-index: 9; +} + + +/* end header */ +/* start footer */ + +.main-footer { + background: rgba(255, 255, 255, 0.4); + backdrop-filter: blur(10px); + padding: 15px 0; + margin-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.5); + color: #000000; + justify-content: center; +} + +.footer-container { + max-width: 1100px; + margin: 0 auto; + display: flex; + justify-content: center; + align-items: flex-start; + flex-wrap: wrap; + gap: 15px; + padding: 0 20px; +} + +.footer-container * { + margin: 0; + padding: 0; + line-height: 1.2; +} + +.footer-section { + min-width: 200px; + text-align: center; +} + + +.footer-section p { + font-size: 0.9rem; + line-height: 1.6; + color: #000000; +} + +.footer-section h4 { + font-size: 1.1rem; + margin-bottom: 20px; + color: #000000; + position: relative; + display: inline-block; +} + + + +.footer-section ul { + list-style: none; + padding: 0; +} + +.footer-section ul li { + margin-bottom: 10px; +} + +.footer-section ul li a { + text-decoration: none; + color: #000000; + font-size: 0.9rem; + transition: 0.3s; +} + +.footer-section ul li a:hover { + color: #ffd6ff; + padding-left: 5px; +} + +.social-icons a { + text-decoration: none; + color: #000000; + margin-right: 15px; + font-weight: bold; + font-size: 0.9rem; + transition: 0.3s; +} + +.social-icons a span { + color: #415365; +} + +.social-icons a:hover { + color: #ffd6ff; +} + +.footer-bottom { + text-align: center; + margin-top: 50px; + padding-top: 20px; + border-top: 1px solid rgba(0, 0, 0, 0.05); + font-size: 0.8rem; + color: #415365; + letter-spacing: 1px; +} + +/* end footer */ +/* start about me */ +/* About Section */ +.about { + text-align: center; + padding: 20px; +} + +.about h2 { + margin-bottom: 20px; + font-size: 1.5rem; +} + +.btn { + display: inline-block; + margin-top: 20px; + margin-left: 60px; + padding: 10px 25px; + background-color: #ffd6ff; + color: rgb(0, 0, 0); + text-decoration: none; + border-radius: 70px; + transition: 0.3s; + align-items: center; +} + +.btn:hover { + background-color: #415365; +} + +.about-cards { + display: grid; + grid-template-columns: repeat(auto-fit, 220px); + + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 50px; + + max-width: 1100px; + margin: auto; + padding: 50px 20px; + +} + +.card { + width: 220px; + height: 280px; + perspective: 1000px; + + opacity: 0; + transform: translateY(40px); + animation: fadeUp 0.8s forwards; +} + +.card:nth-child(1) { + animation-delay: 0.2s; +} + +.card:nth-child(2) { + animation-delay: 0.4s; +} + +.card:nth-child(3) { + animation-delay: 0.6s; +} + +.card:nth-child(4) { + animation-delay: 0.8s; +} + +.card-inner { + width: 100%; + height: 100%; + position: relative; + transform-style: preserve-3d; + transition: transform 0.6s; +} + +.card:hover .card-inner { + transform: rotateY(180deg); +} + +.card-front, +.card-back { + position: absolute; + width: 100%; + height: 100%; + border-radius: 20px; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 20px; + backface-visibility: hidden; +} + +.card-front { + background: #9d9f97; + border: 2px solid transparent; +} + +.card-back { + background: #ffd6ff; + color: #000000; + transform: rotateY(180deg); +} + +.card:hover .card-front { + border: 2px solid #ffd6ff; + box-shadow: 0 0 20px #ffd6ff; +} + +.icon { + width: 40px; + height: 40px; + fill: #ffd6ff; + margin-bottom: 10px; +} + + +.cv-btn { + grid-column: 1 / -1; + justify-self: center; + width: 200px; + margin-top: 30px; + padding: 15px; + border: none; + border-radius: 50px; + background: #ffd6ff; + color: rgb(0, 0, 0); + font-weight: bold; + cursor: pointer; + transition: 0.3s; + text-decoration: none; +} + +.cv-btn:hover { + background: #9d9f97; + transform: scale(1.05); +} + +/* end about me */ + +/* start skills */ +.skills { + width: 70%; + margin: 50px auto; + padding: 40px; + background: #9d9f97; + backdrop-filter: blur(10px); + border-radius: 90px; + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + +} + +.skills h2 { + text-align: center; + margin-top: 0; + margin-bottom: 50px; + color: #333; + font-size: 1.8rem; +} + +.skill { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 25px; +} + +.progress-bar { + flex-grow: 1; + background-color: rgba(0, 0, 0, 0.05); + border-radius: 10px; + height: 12px; + overflow: hidden; + width: 100%; +} + +.progress { + height: 100%; + border-radius: 10px; + width: 0; + display: block; + animation: fill 2s forwards ease-in-out; +} + +.progress.java { + background-color: #866c346d; + --width: 100%; +} + +.progress.python { + background-color: #dee4266d; + --width: 98%; +} + +.progress.flutter { + background-color: #14dbcb6d; + --width: 85%; +} + +.progress.sql { + background-color: #1b2e8a6d; + --width: 100%; +} + +.progress.mysql { + background-color: #6fd0e16d; + --width: 100%; +} + +.progress.html { + background-color: #e44c266d; + --width: 95%; +} + +.progress.css { + background-color: #264ce484; + --width: 90%; +} + +.progress.js { + background-color: #f0da4f7f; + --width: 80%; +} + +.progress.php { + background-color: #777bb481; + --width: 75%; +} + +.progress.dotnet { + background-color: #502bd464; + --width: 55%; +} + +.progress.dart { + background-color: #00b4ab5a; + --width: 70%; +} + +/* end skils */ + +/* strat exp */ +#experience { + padding-top: 20px !important; + padding-bottom: 40px; + font-family: 'Segoe UI', sans-serif; + +} + +.experience-title { + text-align: center; + font-size: 1.8rem; + color: #000000; + margin-bottom: 30px; + position: relative; + margin-top: 0px; +} + +.experience-container { + max-width: 900px; + margin: 0 auto; + position: relative; + padding-left: 20px; +} + +.experience-container::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 4px; + height: 100%; + background: #ffd6ff; + border-radius: 10px; +} + +.experience-card { + background: #9d9f97; + backdrop-filter: blur(10px); + margin-bottom: 40px; + padding: 30px; + border-radius: 20px; + position: relative; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); + transition: all 0.4s ease; + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.experience-card::before { + content: ''; + position: absolute; + left: -28px; + top: 35px; + width: 12px; + height: 12px; + background: white; + border: 4px solid #ffd6ff; + border-radius: 50%; + z-index: 1; +} + +.experience-card:hover { + transform: translateX(10px); + background: #9d9f9755; + box-shadow: 0 15px 40px rgba(255, 143, 171, 0.2); +} + +.experience-card h3 { + margin: 0; + color: #ffd6ff; + font-size: 1.6rem; +} + +.experience-card .date { + display: inline-block; + background: #ffd6ff; + color: rgb(0, 0, 0); + padding: 5px 15px; + border-radius: 50px; + font-size: 0.9rem; + margin: 10px 0; +} + +.experience-card .location { + display: block; + color: #ffd6ff; + font-size: 0.95rem; + margin-bottom: 15px; + font-style: italic; +} + +.experience-card ul { + padding-left: 20px; + color: #ffd6ff; + line-height: 1.6; +} + +.experience-card li { + margin-bottom: 8px; +} + +/* end exp */ + +.projects { + width: 85%; + max-width: 1000px; + margin: 50px auto; + background: #9d9f97; + border-radius: 90px; + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); + padding: 20px 40px 60px 40px; + text-align: center; +} + +.projects h2 { + font-size: 1.8rem; + color: #000000; + margin-top: 0; + margin-bottom: 20px; + padding-top: 0 !important; +} + +.click-info-top { + display: block; + margin-top: 0; + margin-bottom: 40px; + color: #ffd6ff; + font-size: 0.9rem; + font-style: italic; +} + +.project-grid { + display: grid; + grid-template-columns: repeat(2, 30%); + gap: 30px; + justify-content: center; +} + +.project-card { + + position: relative; + border-radius: 20px; + overflow: hidden; + cursor: pointer; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease; +} + +.project-card img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + + +.project-card input { + display: none; +} + + + +.project-card .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(26, 22, 23, 0.8); + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + opacity: 0; + transition: 0.3s; + padding: 20px; + box-sizing: border-box; +} + +.project-card input:checked+label .overlay { + opacity: 1; +} + +/* end project */ + +/* start certificates */ + +.certificates-section { + background-color: #9d9f97; + padding: 50px; + border-radius: 90px; + text-align: center; + margin: 20px auto; + max-width: 1000px; +} + +.certificates-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + margin-top: 30px; +} + +.cert-card { + background: #fff; + padding: 10px; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + overflow: hidden; + transition: transform 0.3s ease; + cursor: pointer; +} + +.cert-card img { + width: 100%; + height: 200px; + display: block; + border-radius: 5px; + transition: transform 0.5s ease; + object-fit: cover; +} + +.cert-card h3 { + text-align: center; + margin-top: 10px; +} + +.cert-card:hover { + transform: translateY(-10px); +} + +.cert-card:hover img { + transform: scale(1.05); +} + +/* end certificates */ + + + +/* start contact */ +.contact-section { + display: flex; + justify-content: center; + align-items: center; + min-height: 80vh; +} + +.contact-container { + background-color: #9d9f97; + backdrop-filter: blur(15px); + padding: 60px; + border-radius: 30px; + border: 1px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); + text-align: center; + display: inline-block; + width: 600px; + height: 500px; +} + +.contact-container h2 { + font-size: 1.8rem; + color: #333; + margin-top: -10px !important; + margin-bottom: 150px; +} + +.main { + display: flex; + flex-direction: column; + gap: 0.5em; + align-items: center; + transform: scale(1.8); + margin: 50px 0; +} + +.up, +.down { + display: flex; + flex-direction: row; + gap: 0.5em; +} + +.card1, +.card2, +.card3, +.card4 { + width: 90px; + height: 90px; + outline: none; + border: none; + background: white; + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + transition: 0.2s ease-in-out; +} + +.card1 { + border-radius: 90px 5px 5px 5px; +} + +.card2 { + border-radius: 5px 90px 5px 5px; +} + +.card3 { + border-radius: 5px 5px 5px 90px; +} + +.card4 { + border-radius: 5px 5px 90px 5px; +} + +.whatsapp { + margin-top: 1.5em; + margin-left: 1.2em; + fill: #00ff00; +} + +.linkedin { + margin-top: 1.5em; + margin-left: -0.9em; + fill: #0077b5; +} + +.github { + margin-top: -0.6em; + margin-left: 1.2em; +} + +.discord { + margin-top: -0.9em; + margin-left: -1.2em; + fill: #8c9eff; +} + +.card1:hover { + cursor: pointer; + scale: 1.1; + background-color: #00ff00; +} + +.card1:hover .whatsapp { + fill: white; +} + +.card2:hover { + cursor: pointer; + scale: 1.1; + background-color: #0077b5; +} + +.card2:hover .linkedin { + fill: white; +} + +.card3:hover { + cursor: pointer; + scale: 1.1; + background-color: black; +} + +.card3:hover .github { + fill: white; +} + +.card4:hover { + cursor: pointer; + scale: 1.1; + background-color: #8c9eff; +} + +.card4:hover .discord { + fill: white; +} + +/* end contact */ + + +@keyframes blink { + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +@keyframes open { + 0% { + transform: perspective(1900px) rotateX(-88.5deg); + } + + 100% { + transform: perspective(1000px) rotateX(0deg); + } +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.05); + } + + 100% { + transform: scale(1); + } +} + +@keyframes fill { + from { + width: 0; + } + + to { + width: var(--width); + } +} + +@media (max-width: 768px) { + + .top-bar { + flex-direction: column; + padding: 20px 15px; + width: 95%; + margin: 10px auto; + height: auto; + border-radius: 30px; + gap: 15px; + } + + .nav-links { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + gap: 10px 25px; + padding: 0; + margin-top: 10px; + } + + .nav-links li a { + font-size: 0.8rem; + letter-spacing: 0; + display: block; + } + + .intro { + flex-direction: column; + padding: 40px 20px; + margin: 15px; + border-radius: 40px; + } + + .intro-content h1 { + font-size: 1.8rem; + } + + .laptop { + transform: scale(0.5); + margin-top: -50px; + } + + .keyboard { + width: 100%; + } + + + + .skills { + width: 92%; + padding: 25px 15px; + } + + .skill span { + font-size: 0.9rem; + min-width: 80px; + } + + .skill { + flex-direction: column; + align-items: flex-start; + gap: 5px; + } + + .project-grid { + grid-template-columns: 1fr; + width: 100%; + } + + .projects { + width: 95%; + padding: 20px; + border-radius: 40px; + } + + .experience-container { + padding-left: 10px; + } + + .experience-card { + padding: 20px; + } + + .contact-container { + width: 90%; + height: auto; + padding: 30px 10px; + } + + .main { + transform: scale(1.2); + } + + .contact-container h2 { + margin-bottom: 80px; + } + + .certificates-section { + padding: 20px; + border-radius: 40px; + } +} \ No newline at end of file diff --git a/css/introduction/.vscode/settings.json b/css/introduction/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/css/introduction/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/introduction/images/A Way Out.jpg b/css/introduction/images/A Way Out.jpg new file mode 100644 index 0000000..ac813c8 Binary files /dev/null and b/css/introduction/images/A Way Out.jpg differ diff --git a/css/introduction/images/Call Of Duty.jpg b/css/introduction/images/Call Of Duty.jpg new file mode 100644 index 0000000..0e1a587 Binary files /dev/null and b/css/introduction/images/Call Of Duty.jpg differ diff --git a/css/introduction/images/Crash.jpg b/css/introduction/images/Crash.jpg new file mode 100644 index 0000000..e203cf2 Binary files /dev/null and b/css/introduction/images/Crash.jpg differ diff --git a/css/introduction/images/Detroit Become Human.jpg b/css/introduction/images/Detroit Become Human.jpg new file mode 100644 index 0000000..2032f57 Binary files /dev/null and b/css/introduction/images/Detroit Become Human.jpg differ diff --git a/css/introduction/images/Forza.jpg b/css/introduction/images/Forza.jpg new file mode 100644 index 0000000..6d97642 Binary files /dev/null and b/css/introduction/images/Forza.jpg differ diff --git a/css/introduction/images/Ghost.jpg b/css/introduction/images/Ghost.jpg new file mode 100644 index 0000000..3a3b559 Binary files /dev/null and b/css/introduction/images/Ghost.jpg differ diff --git a/css/introduction/images/HITMAN.jpg b/css/introduction/images/HITMAN.jpg new file mode 100644 index 0000000..ec5813c Binary files /dev/null and b/css/introduction/images/HITMAN.jpg differ diff --git a/css/introduction/images/It Takes Two.jpg b/css/introduction/images/It Takes Two.jpg new file mode 100644 index 0000000..a2d523d Binary files /dev/null and b/css/introduction/images/It Takes Two.jpg differ diff --git a/css/introduction/images/Overcooked.jpg b/css/introduction/images/Overcooked.jpg new file mode 100644 index 0000000..c319266 Binary files /dev/null and b/css/introduction/images/Overcooked.jpg differ diff --git a/css/introduction/images/Red Dead Redemption 2.jpg b/css/introduction/images/Red Dead Redemption 2.jpg new file mode 100644 index 0000000..9d52a4a Binary files /dev/null and b/css/introduction/images/Red Dead Redemption 2.jpg differ diff --git a/css/introduction/images/Resident Evil.jpg b/css/introduction/images/Resident Evil.jpg new file mode 100644 index 0000000..8b70eab Binary files /dev/null and b/css/introduction/images/Resident Evil.jpg differ diff --git a/css/introduction/images/Silent hill.jpg b/css/introduction/images/Silent hill.jpg new file mode 100644 index 0000000..98f7510 Binary files /dev/null and b/css/introduction/images/Silent hill.jpg differ diff --git a/css/introduction/images/The last.png b/css/introduction/images/The last.png new file mode 100644 index 0000000..cf42e32 Binary files /dev/null and b/css/introduction/images/The last.png differ diff --git a/css/introduction/images/Tomb Raider.jpg b/css/introduction/images/Tomb Raider.jpg new file mode 100644 index 0000000..08e70f0 Binary files /dev/null and b/css/introduction/images/Tomb Raider.jpg differ diff --git a/css/introduction/images/Uncharted legacy of thieves collection.jpg b/css/introduction/images/Uncharted legacy of thieves collection.jpg new file mode 100644 index 0000000..9e241fb Binary files /dev/null and b/css/introduction/images/Uncharted legacy of thieves collection.jpg differ diff --git a/css/introduction/images/a plague tale requiem.jpg b/css/introduction/images/a plague tale requiem.jpg new file mode 100644 index 0000000..402e149 Binary files /dev/null and b/css/introduction/images/a plague tale requiem.jpg differ diff --git a/css/introduction/images/download.jpg b/css/introduction/images/download.jpg new file mode 100644 index 0000000..06b3b17 Binary files /dev/null and b/css/introduction/images/download.jpg differ diff --git a/css/introduction/index.html b/css/introduction/index.html new file mode 100644 index 0000000..3845420 --- /dev/null +++ b/css/introduction/index.html @@ -0,0 +1,516 @@ + + + + + + + + gaming + + + + +
+
+ +
+ + + + + + + + + + + + + +
+ +
+

Welcome to my gaming world

+

Step into epic adventures

+
+ +
+
+ + +
+ + +
+
+ Resident Evil +

Resident Evil

+
+ +
+

A survival horror series about a virus outbreak that turns people into zombies.

+ + + + + + + + + + + + + +
Genre:Survival Horror
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ a plague tale requiem +

A plague Tale Requiem

+
+ +
+

A sister fights to protect her brother from a deadly curse in a world overrun by rats and death. +

+ + + + + + + + + + + + + +
Genre:Action-Adventure
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ The Last of Us +

The Last of Us

+
+ +
+

A broken man escorts a girl who may be humanity’s last hope across a world devastated by a deadly + infection.

+ + + + + + + + + + + + + +
Genre:Survival Horror
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ A Way Out +

A Way Out

+
+ +
+

A co-op story about two prisoners working together to escape and survive.

+ + + + + + + + + + + + + +
Genre:Action / Co-op
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Detroit Become Human +

Detroit Become Human

+
+ +
+

A futuristic story where androids develop emotions and rebel against humans.

+ + + + + + + + + + + + + +
Genre:Interactive Drama, Adventure
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Uncharted +

Uncharted

+
+ +
+

A treasure hunter embarks on thrilling adventures to uncover historical secrets.

+ + + + + + + + + + + + + +
Genre:Action-Adventure
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Tomb Raider +

Tomb Raider

+
+ +
+

Lara Croft explores ancient ruins, solves puzzles, and survives dangerous adventures.

+ + + + + + + + + + + + + +
Genre:Action-Adventure
Rating:10/10
Link:Official Trailer +
+
+
+ +
+
+ Call Of Duty +

Call Of Duty

+
+ +
+

Soldiers engage in intense, cinematic military campaigns across various historical and futuristic + global + conflicts.

+ + + + + + + + + + + + + +
Genre:First-Person Shooter
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Crash +

Crash

+
+ +
+

An genetically enhanced marsupial named Crash must jump and spin through levels to stop the evil + Doctor Neo + Cortex

+ + + + + + + + + + + + + +
Genre:Platformer
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Forza +

Forza

+
+ +
+

Players compete in high-stakes racing festivals or professional circuits to become the ultimate + driving champion.

+ + + + + + + + + + + + + +
Genre:Racing / Simulation.
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ Ghost of Tsushima +

Ghost of Tsushima

+
+ +
+

A samurai must break his code to protect Tsushima from a Mongol invasion.

+ + + + + + + + + + + + + +
Genre:Action-Adventure / Open World.
Rating:10/10
Link:Official Trailer +
+
+
+ + +
+
+ It Takes Two +

It Takes Two

+
+ +
+

A clashing couple transformed into dolls must cooperate through magical challenges to fix their + relationship and return to their daughter.

+ + + + + + + + + + + + + +
Genre:Cooperative Action.
Rating:10/10
Link:Official Trailer +
+
+
+ + + +
+
+ Overcooked +

Overcooked

+
+ +
+

Chefs team up in chaotic kitchens to save the Onion Kingdom from a food monster.

+ + + + + + + + + + + + + +
Genre:Cooperative / Cooking Simulation
Rating:10/10
Link:Official Trailer +
+
+
+ + + +
+
+ Red Dead Redemption +

Red Dead Redemption

+
+ +
+

Outlaw Arthur Morgan struggles to survive the decline of the Wild West while dealing with the + internal collapse + of his gang.

+ + + + + + + + + + + + + +
Genre:Western Action-Adventure.
Rating:10/10
Link:Official Trailer +
+
+
+ + + +
+
+ Silent Hill +

Silent Hill

+
+ +
+ +

A protagonist enters a fog-shrouded town to search for a missing loved one, only to face their + deepest + psychological fears.

+ + + + + + + + + + + + + +
Genre:Psychological Horror / Survival.
Rating:10/10
Link:Official Trailer +
+
+
+ + + +
+
+ Hit Man +

Hit Man

+
+ +
+

Professional assassin Agent 47 travels the globe to eliminate high-profile targets in a high-stakes + world of + corporate and political conspiracy.

+ + + + + + + + + + + + + +
Genre:Stealth / Sandbox Action.
Rating:10/10
Link:Official Trailer +
+
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/css/introduction/style.css b/css/introduction/style.css new file mode 100644 index 0000000..2511f83 --- /dev/null +++ b/css/introduction/style.css @@ -0,0 +1,380 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; +} + +body { + background-color: #040f1d; + color: #ffffff; + line-height: 1.6; + overflow-x: hidden; +} + +/* start header */ + +.header-section { + position: relative; + height: 80vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url('images/download.jpg') no-repeat center; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-bottom: 2px solid rgba(0, 171, 255, 0.3); +} + +.glass-box { + position: relative; + z-index: 10; + text-align: center; + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + padding: 60px 40px; + border-radius: 40px; + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); + max-width: 650px; + width: 90%; +} + +.ps-icons-group { + display: flex; + justify-content: center; + gap: 30px; + margin-bottom: 25px; +} + +.ps-icons-group svg { + width: 50px; + height: 50px; + opacity: 0; + filter: drop-shadow(0 0 10px currentColor); +} + +.header-text h1 { + font-size: 2.2rem; + color: #fff; + margin-bottom: 15px; + text-shadow: 0 0 20px rgba(0, 171, 255, 0.5); +} + +.header-text p { + font-size: 1.2rem; + color: #d1d1d1; + max-width: 500px; + margin: 0 auto; +} + +#triangle { + animation: bounceIn 0.8s ease-out forwards, floating 3s ease-in-out infinite alternate 0.8s; + stroke: #00ff00; +} + +#circle { + animation: scaleUp 0.8s ease-out 0.2s forwards, floating 3.5s ease-in-out infinite alternate 1s; + stroke: #ff0000; +} + +#x { + animation: rotateIn 0.8s ease-out 0.4s forwards, floating 2.8s ease-in-out infinite alternate 1.2s; + stroke: #00ffff; +} + +#square { + animation: slideUp 0.8s ease-out 0.6s forwards, floating 3.2s ease-in-out infinite alternate 1.4s; + stroke: #ff00ff; +} + +/* end header */ +/* start gallery */ + +.games-gallery-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 40px; + padding: 20px 8%; + margin-bottom: 80px; +} + +.game-card { + position: relative; + border-radius: 20px; + overflow: hidden; + background: #16213e; + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); + transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + aspect-ratio: 3/4; + +} + +.game-card:hover { + transform: translateY(-15px) scale(1.02); +} + +.game-card img { + width: 100%; + height: 100%; + transition: 0.6s ease; + object-fit: contain; + +} + +.game-card:hover img { + transform: scale(1.1) blur(4px); +} + +.card-hover-details { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(13, 17, 23, 0.9); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + opacity: 0; + visibility: hidden; + transition: all 0.4s ease; +} + +.game-card:hover .card-hover-details { + opacity: 1; + visibility: visible; +} + +.card-hover-details h3 { + margin-bottom: 20px; + font-size: 1.4rem; + color: #00abff; + border-bottom: 2px solid #00abff; + padding-bottom: 5px; +} + +.specs-table { + width: 100%; + border-collapse: collapse; +} + +.specs-table td { + padding: 12px 5px; + font-size: 0.95rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.specs-table td:first-child { + color: #ee55df; + font-weight: bold; + text-align: left; +} + +.specs-table td:last-child { + text-align: right; + color: #fff; +} + +.specs-table a { + display: inline-block; + color: #0d1117; + background: #00abff; + padding: 5px 12px; + border-radius: 6px; + text-decoration: none; + font-weight: bold; + font-size: 0.85rem; + transition: 0.3s; +} + +.specs-table a:hover { + background: #46e74e; + transform: scale(1.05); +} + +/* end gallery */ +/* start footer */ +footer { + background-color: rgb(71, 186, 235); + color: white; + padding: 40px; + border-radius: 30px; + margin: 50px auto; + text-align: center; + width: 400px; +} + + +.form-container input[type="text"] { + padding: 12px; + border-radius: 10px; + border: none; + margin: 10px; + width: 250px; +} + +button, +input[type="submit"] { + background-color: rgb(42, 44, 65); + color: var(--dark-blue); + border: none; + padding: 12px 30px; + border-radius: 25px; + font-weight: bold; + cursor: pointer; + transition: 0.3s; +} + +button:hover { + background-color: #46e74e; +} + +ul { + list-style-type: none; + padding: 0; +} + +footer a { + color: var(--primary-blue); + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} + +/* end footer */ + +/* Animations */ + +@keyframes floating { + 0% { + transform: translateY(0px); + filter: drop-shadow(0 0 10px currentColor); + } + + 100% { + transform: translateY(-15px); + filter: drop-shadow(0 0 20px currentColor); + } +} + +@keyframes bounceIn { + 0% { + transform: translateY(-50px) scale(0.5); + opacity: 0; + } + + 100% { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +@keyframes scaleUp { + 0% { + transform: scale(0); + opacity: 0; + } + + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes rotateIn { + 0% { + transform: rotate(-360deg) scale(0); + opacity: 0; + } + + 100% { + transform: rotate(0deg) scale(1.1); + opacity: 1; + } +} + +@keyframes slideUp { + 0% { + transform: translateY(50px); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} + +/* Responsiveness */ + +@media (max-width: 1024px) { + .games-gallery-container { + grid-template-columns: repeat(2, 1fr); + padding: 20px 5%; + } +} + +@media (max-width: 768px) { + + .header-section { + height: 60vh; + } + + .glass-box { + padding: 30px 20px; + } + + .header-text h1 { + font-size: 1.8rem; + } + + .ps-icons-group { + gap: 15px; + } + + .ps-icons-group svg { + width: 35px; + height: 35px; + } + + .games-gallery-container { + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 20px; + padding: 20px 15px; + } + + footer { + width: 90%; + padding: 30px 15px; + } + + .form-container input[type="text"] { + width: 100%; + margin: 10px 0; + } +} + +@media (max-width:414px) { + .header-text h1 { + font-size: 1.5rem; + } + + .header-text p { + font-size: 1rem; + } + + .games-gallery-container { + grid-template-columns: 1fr; + } + + .game-card { + height: 500px; + aspect-ratio: unset; + } +} \ No newline at end of file diff --git a/html/introduction/images/A Way Out.jpg b/html/introduction/images/A Way Out.jpg new file mode 100644 index 0000000..ac813c8 Binary files /dev/null and b/html/introduction/images/A Way Out.jpg differ diff --git a/html/introduction/images/Call Of Duty.jpg b/html/introduction/images/Call Of Duty.jpg new file mode 100644 index 0000000..0e1a587 Binary files /dev/null and b/html/introduction/images/Call Of Duty.jpg differ diff --git a/html/introduction/images/Crash.jpg b/html/introduction/images/Crash.jpg new file mode 100644 index 0000000..e203cf2 Binary files /dev/null and b/html/introduction/images/Crash.jpg differ diff --git a/html/introduction/images/Detroit Become Human.jpg b/html/introduction/images/Detroit Become Human.jpg new file mode 100644 index 0000000..2032f57 Binary files /dev/null and b/html/introduction/images/Detroit Become Human.jpg differ diff --git a/html/introduction/images/Forza.jpg b/html/introduction/images/Forza.jpg new file mode 100644 index 0000000..6d97642 Binary files /dev/null and b/html/introduction/images/Forza.jpg differ diff --git a/html/introduction/images/Ghost.jpg b/html/introduction/images/Ghost.jpg new file mode 100644 index 0000000..3a3b559 Binary files /dev/null and b/html/introduction/images/Ghost.jpg differ diff --git a/html/introduction/images/HITMAN.jpg b/html/introduction/images/HITMAN.jpg new file mode 100644 index 0000000..ec5813c Binary files /dev/null and b/html/introduction/images/HITMAN.jpg differ diff --git a/html/introduction/images/It Takes Two.jpg b/html/introduction/images/It Takes Two.jpg new file mode 100644 index 0000000..a2d523d Binary files /dev/null and b/html/introduction/images/It Takes Two.jpg differ diff --git a/html/introduction/images/Overcooked.jpg b/html/introduction/images/Overcooked.jpg new file mode 100644 index 0000000..c319266 Binary files /dev/null and b/html/introduction/images/Overcooked.jpg differ diff --git a/html/introduction/images/Red Dead Redemption 2.jpg b/html/introduction/images/Red Dead Redemption 2.jpg new file mode 100644 index 0000000..9d52a4a Binary files /dev/null and b/html/introduction/images/Red Dead Redemption 2.jpg differ diff --git a/html/introduction/images/Resident Evil.jpg b/html/introduction/images/Resident Evil.jpg new file mode 100644 index 0000000..9fdbfc3 Binary files /dev/null and b/html/introduction/images/Resident Evil.jpg differ diff --git a/html/introduction/images/Silent hill.jpg b/html/introduction/images/Silent hill.jpg new file mode 100644 index 0000000..98f7510 Binary files /dev/null and b/html/introduction/images/Silent hill.jpg differ diff --git a/html/introduction/images/The Last of Us.jpg b/html/introduction/images/The Last of Us.jpg new file mode 100644 index 0000000..0ae7151 Binary files /dev/null and b/html/introduction/images/The Last of Us.jpg differ diff --git a/html/introduction/images/Tomb Raider.jpg b/html/introduction/images/Tomb Raider.jpg new file mode 100644 index 0000000..08e70f0 Binary files /dev/null and b/html/introduction/images/Tomb Raider.jpg differ diff --git a/html/introduction/images/Uncharted.jpg b/html/introduction/images/Uncharted.jpg new file mode 100644 index 0000000..299e7b6 Binary files /dev/null and b/html/introduction/images/Uncharted.jpg differ diff --git a/html/introduction/images/a plague tale requiem.jpg b/html/introduction/images/a plague tale requiem.jpg new file mode 100644 index 0000000..402e149 Binary files /dev/null and b/html/introduction/images/a plague tale requiem.jpg differ diff --git a/html/introduction/index.html b/html/introduction/index.html new file mode 100644 index 0000000..f8ed02c --- /dev/null +++ b/html/introduction/index.html @@ -0,0 +1,383 @@ + + + + + + Document + + + +

Welcome to my gaming world

+

Step into epic adventures

+ + +

My favorite games

+ Resident Evil +

Resident Evil

+ + +

A survival horror series about a virus outbreak that turns people into zombies.

+ + + + + + + + + + + + + +
Genre:Survival Horror
Rating:10/10
Link:Official Trailer +
+ + + + + + a plague tale requiem +

A plague Tale Requiem

+ +

A sister fights to protect her brother from a deadly curse in a world overrun by rats and death. +

+ + Genre: + Action-Adventure + + + Rating: + 10/10 + + + Link: + Official Trailer + + + + + + + + The Last of Us +

The Last of Us

+ +

A broken man escorts a girl who may be humanity’s last hope across a world devastated by a deadly + infection.

+ + + + + + + + + + + + + +
Genre:Survival Horror
Rating:10/10
Link:Official Trailer +
+ + + + + + A Way Out +

A Way Out

+ + +

A co-op story about two prisoners working together to escape and survive.

+ + + + + + + + + + + + + +
Genre:Action / Co-op
Rating:10/10
Link:Official Trailer +
+ + + + Detroit Become Human +

Detroit Become Human

+ +

A futuristic story where androids develop emotions and rebel against humans.

+ + + + + + + + + + + + + +
Genre:Interactive Drama, Adventure
Rating:10/10
Link:Official Trailer +
+ + + + + Uncharted +

Uncharted

+ + +

A treasure hunter embarks on thrilling adventures to uncover historical secrets.

+ + + + + + + + + + + + + +
Genre:Action-Adventure
Rating:10/10
Link:Official Trailer +
+ + + + + Tomb Raider +

Tomb Raider

+ +

Lara Croft explores ancient ruins, solves puzzles, and survives dangerous adventures.

+ + + + + + + + + + + + + +
Genre:Action-Adventure
Rating:10/10
Link:Official Trailer +
+ + + Call Of Duty +

Call Of Duty

+ +

Soldiers engage in intense, cinematic military campaigns across various historical and futuristic global + conflicts.

+ + + + + + + + + + + + + +
Genre:First-Person Shooter
Rating:10/10
Link:Official Trailer +
+ + + Crash +

Crash

+ +

An genetically enhanced marsupial named Crash must jump and spin through levels to stop the evil Doctor Neo + Cortex

+ + + + + + + + + + + + + +
Genre:Platformer
Rating:9/10
Link:Official Trailer +
+ + + Forza +

Forza

+ +

Players compete in high-stakes racing festivals or professional circuits to become the ultimate driving + champion.

+ + + + + + + + + + + + + +
Genre:Racing / Simulation.
Rating:10/10
Link:Official Trailer +
+ + + Ghost of Tsushima +

Ghost of Tsushima

+ +

Samurai Jin Sakai must choose between his code and unconventional warfare to protect Tsushima Island from a + Mongol invasion.

+ + + + + + + + + + + + + +
Genre:Action-Adventure / Open World.
Rating:10/10
Link:Official Trailer +
+ + + It Takes Two +

It Takes Two

+ +

A clashing couple transformed into dolls must cooperate through magical challenges to fix their relationship and + return to their daughter.

+ + + + + + + + + + + + + +
Genre:Cooperative Action.
Rating:10/10
Link:Official Trailer +
+ + + Overcooked +

Overcooked

+ +

Chefs must work together in chaotic, shifting kitchens to prepare meals and save the Onion Kingdom from an + ancient edible beast.

+ + + + + + + + + + + + + +
Genre:Cooperative / Cooking Simulation.
Rating:10/10
Link:Official Trailer +
+ + + Red Dead Redemption +

Red Dead Redemption

+ +

Outlaw Arthur Morgan struggles to survive the decline of the Wild West while dealing with the internal collapse + of his gang.

+ + + + + + + + + + + + + +
Genre:Western Action-Adventure.
Rating:10/10
Link:Official Trailer +
+ + + Silent Hill +

Silent Hill

+ +

A protagonist enters a fog-shrouded town to search for a missing loved one, only to face their deepest + psychological fears.

+ + + + + + + + + + + + + +
Genre:Psychological Horror / Survival.
Rating:10/10
Link:Official Trailer +
+ + + Hit Man +

Hit Man

+ +

Professional assassin Agent 47 travels the globe to eliminate high-profile targets in a high-stakes world of + corporate and political conspiracy.

+ + + + + + + + + + + + + +
Genre:Stealth / Sandbox Action.
Rating:10/10
Link:Official Trailer +
+

Suggest a Game

+
+ + + +
+ + + \ No newline at end of file