Skip to content

4 projects #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aljuhanisharifah-cell wants to merge 1 commit into
base: main
Choose a base branch
from
Open

4 projects #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 93 additions & 0 deletions article/ai/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The AI Revolution | Future Insights</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<header class="navbar">
<nav class="container">
<div class="logo">FUTURE<span>AI</span></div>
<ul class="nav-links">
<li><a href="#vision">Vision</a></li>
<li><a href="#forecast">Forecast</a></li>
<li><a href="#methodology">Methodology</a></li>
</ul>
</nav>
</header>

<main class="container main-layout">
<article class="main-content">
<header class="article-header">
<h1>Redefining Tomorrow: The AI-Driven World</h1>
<p class="subtitle">An analytical exploration of intelligent adaptation, predictive harmony, and human-AI symbiosis.</p>

<div class="author-meta">
<img src="https://ui-avatars.com/api/?name=Sharifah&background=4facfe&color=fff" alt="Sharifah" class="author-img">
<div class="author-text">
<strong>Sharifah Salem Aljohani</strong>
<span>AI Specialist & Researcher</span>
</div>
</div>
</header>

<figure class="hero-image">
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&w=1200&q=80" alt="Futuristic AI Interface">
<figcaption>Technology Foresight: Mapping the trajectory of autonomous systems and neural growth.</figcaption>
</figure>

<section id="vision">
<h2>1. The Era of Intelligent Adaptation</h2>
<p class="drop-cap">The future of AI is not about robots replacing people; it is about the <strong>Democratization of Intelligence</strong>. Imagine a world where every individual has access to the collective knowledge of humanity, refined and personalized in real-time. This adaptation means that the barriers between an idea and its execution are disappearing.</p>
</section>

<section id="forecast">
<h2>2. Scientific Forecasts (2027 - 2035)</h2>
<p>By analyzing current trajectories in Multimodal AI and Reinforcement Learning, we can project key milestones that will redefine our global infrastructure:</p>

<div class="video-container">
<iframe src="https://www.youtube.com/embed/ad79nYk2keg" title="The Future of AI" frameborder="0" allowfullscreen></iframe>
</div>

<ul>
<li><strong>Linguistic Fluidity (2027):</strong> Real-time, zero-latency translation will effectively eliminate language barriers in high-stakes environments.</li>
<li><strong>Augmented Creativity (2030):</strong> The shift to co-creative AI where human intent and machine execution achieve perfect alignment.</li>
</ul>
</section>

<section id="methodology">
<h2>3. Methodology & Technology Foresight</h2>
<p>The insights presented are rooted in Technology Foresight. This involves analyzing the exponential growth of Compute Power, the refinement of Attention Mechanisms, and adoption cycles in the Fourth Industrial Revolution.</p>
<blockquote>"The AI revolution is the beginning of human liberation from mundane cognition."</blockquote>
</section>
</article>

<aside class="sidebar">
<div class="sidebar-wrapper">
<div class="widget">
<h3>Future Milestones</h3>
<ul class="milestones">
<li><strong>2027:</strong> Seamless Global Translation.</li>
<li><strong>2030:</strong> $15.7T AI Economic Impact.</li>
<li><strong>2035:</strong> Autonomous Climate Management.</li>
</ul>
</div>

<div class="widget highlight">
<h3>Key Concept: Symbiosis</h3>
<p>The future isn't a race against the machine; it's a journey with it. Our role evolves from operators to architects of intent.</p>
</div>
</div>
</aside>
</main>

<footer class="footer">
<p>&copy; 2026 AI Perspectives | Insights by Sharifah</p>
</footer>

</body>
</html>
129 changes: 129 additions & 0 deletions article/ai/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
:root {
--primary: #4facfe;
--bg: #05070a;
--card: #0d1117;
--text: #f0f6fc;
--dim: #8b949e;
--border: #30363d;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body { background-color: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; line-height: 1.8; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 30px; }

/* Navbar */
.navbar {
background: rgba(5, 7, 10, 0.8);
backdrop-filter: blur(10px);
padding: 20px 0;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var(--border);
}

nav { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Space Grotesk', sans-serif; font-weight: bold; font-size: 1.3rem; }
.logo span { color: var(--primary); }
.nav-links { display: flex; list-style: none; gap: 25px; }
.nav-links a { text-decoration: none; color: var(--dim); font-size: 0.85rem; transition: 0.3s; }
.nav-links a:hover { color: var(--primary); }

/* Main Layout Grid */
.main-layout {
display: grid;
grid-template-columns: 2.5fr 1fr;
gap: 50px;
margin-top: 60px;
}

/* Article Styling */
.badge { background: rgba(79, 172, 254, 0.1); color: var(--primary); padding: 5px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; }

.article-header h1 { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; margin: 20px 0; line-height: 1.1; }

.subtitle { font-size: 1.2rem; color: var(--dim); margin-bottom: 40px; }

.author-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 40px; }
.author-img { width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--primary); }

.hero-image img { width: 100%; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
figcaption { text-align: center; font-size: 0.8rem; color: var(--dim); margin-top: 15px; }

/* Text Effects */
.drop-cap::first-letter {
float: left;
font-size: 4rem;
line-height: 1;
padding-right: 12px;
color: var(--primary);
font-family: 'Space Grotesk', sans-serif;
}

h2 { margin: 50px 0 20px; color: var(--primary); font-family: 'Space Grotesk', sans-serif; }

blockquote {
border-left: 4px solid var(--primary);
padding: 30px;
background: rgba(255,255,255,0.02);
font-size: 1.4rem;
font-style: italic;
margin: 40px 0;
}

/* References Section */
.references-section { margin-top: 60px; }
.references-section hr { border: 0; border-top: 1px solid var(--border); margin-bottom: 30px; }
.ref-list { padding-left: 20px; color: var(--dim); font-size: 0.85rem; }
.ref-list li { margin-bottom: 12px; }
cite { font-style: normal; }

/* Sidebar Solution */
.sidebar-wrapper {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 30px;
}

.widget {
background: var(--card);
padding: 30px;
border-radius: 20px;
border: 1px solid var(--border);
}

.widget h3 { margin-bottom: 15px; font-size: 1rem; color: var(--primary); font-family: 'Space Grotesk', sans-serif; }

.milestones li {
list-style: none;
padding: 12px 0;
border-bottom: 1px solid #21262d;
font-size: 0.85rem;
}
.milestones li:last-child { border-bottom: none; }

.highlight { border-left: 3px solid var(--primary); }

/* Video Container */
.video-container {
margin: 40px 0;
position: relative;
padding-bottom: 56.25%;
height: 0;
border-radius: 15px;
overflow: hidden;
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Responsive */
@media (max-width: 992px) {
.main-layout { grid-template-columns: 1fr; }
.sidebar-wrapper { position: static; }
.article-header h1 { font-size: 2.2rem; }
}

footer { padding: 60px 0; text-align: center; border-top: 1px solid var(--border); margin-top: 80px; color: var(--dim); font-size: 0.8rem; }
Loading