From 20333bb9bd3d260180cf9a25436a92db8b50f647 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 25 Jul 2026 12:11:14 +0000
Subject: [PATCH 1/2] Initial plan


From df9a46fcac41672c3e61ce431f2956bb7c44f8c5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 25 Jul 2026 12:24:43 +0000
Subject: [PATCH 2/2] feat: create interactive 3d portfolio landing page

---
 README.md    |  16 +++-
 index.html   |  93 +++++++++++++++++++++
 package.json |  24 ++++++
 script.js    |  65 +++++++++++++++
 styles.css   | 226 +++++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 423 insertions(+), 1 deletion(-)
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 script.js
 create mode 100644 styles.css

diff --git a/README.md b/README.md
index 5158a4c..b203eab 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,15 @@
-# PORTFOLIOO
\ No newline at end of file
+# PORTFOLIOO
+
+A personal portfolio landing page with:
+- 3D animated background (Three.js)
+- Smooth section reveal animations
+- Premium modern glassmorphism UI
+- Sections for projects, skills, achievements, and lifestyle
+
+## Run locally
+
+```bash
+npm start
+```
+
+Then open `http://localhost:4173`.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..577c433
--- /dev/null
+++ b/index.html
@@ -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>My Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <canvas id="scene"></canvas>
+    <div class="overlay"></div>
+
+    <header class="header glass">
+      <a class="brand" href="#home">RAM</a>
+      <nav>
+        <a href="#projects">Projects</a>
+        <a href="#skills">Skills</a>
+        <a href="#achievements">Achievements</a>
+        <a href="#lifestyle">Lifestyle</a>
+      </nav>
+    </header>
+
+    <main id="home">
+      <section class="hero reveal">
+        <p class="kicker">Creative Developer Portfolio</p>
+        <h1>Building premium digital experiences with code, craft & personality.</h1>
+        <p class="intro">
+          I create apps and products that feel modern, interactive, and unforgettable.
+        </p>
+        <div class="cta-row">
+          <a href="#projects" class="btn primary">View Projects</a>
+          <a href="#lifestyle" class="btn ghost">My Lifestyle</a>
+        </div>
+      </section>
+
+      <section id="projects" class="section reveal">
+        <h2>Apps & Projects</h2>
+        <div class="grid cards">
+          <article class="card">
+            <h3>3D Commerce Experience</h3>
+            <p>Immersive product storytelling with cinematic interactions.</p>
+          </article>
+          <article class="card">
+            <h3>AI Productivity Suite</h3>
+            <p>Automated workflows and smart insights for daily execution.</p>
+          </article>
+          <article class="card">
+            <h3>Motion UI Design System</h3>
+            <p>A reusable component system powered by fluid transitions.</p>
+          </article>
+        </div>
+      </section>
+
+      <section id="skills" class="section reveal">
+        <h2>Skills</h2>
+        <div class="pills">
+          <span>JavaScript</span>
+          <span>TypeScript</span>
+          <span>React</span>
+          <span>Node.js</span>
+          <span>Three.js</span>
+          <span>UI/UX</span>
+          <span>Animation</span>
+          <span>Product Thinking</span>
+        </div>
+      </section>
+
+      <section id="achievements" class="section reveal">
+        <h2>Achievements</h2>
+        <ul class="timeline">
+          <li><strong>2026</strong> — Built multi-platform apps with high user retention.</li>
+          <li><strong>2025</strong> — Delivered premium product launches for client brands.</li>
+          <li><strong>2024</strong> — Won recognition for interactive front-end experiences.</li>
+        </ul>
+      </section>
+
+      <section id="lifestyle" class="section reveal">
+        <h2>Lifestyle</h2>
+        <p>
+          Beyond coding, I focus on fitness, travel, and creative exploration to fuel better product ideas and sharper execution.
+        </p>
+      </section>
+    </main>
+
+    <script type="module" src="./script.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..332d63a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "portfolioo",
+  "version": "1.0.0",
+  "description": "Premium personal portfolio website with 3D visuals and smooth animations.",
+  "scripts": {
+    "start": "python3 -m http.server 4173",
+    "test": "echo \"No test infrastructure configured\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RAM830-TECH/PORTFOLIOO.git"
+  },
+  "keywords": [
+    "portfolio",
+    "3d",
+    "animations"
+  ],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/RAM830-TECH/PORTFOLIOO/issues"
+  },
+  "homepage": "https://github.com/RAM830-TECH/PORTFOLIOO#readme"
+}
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..892c8e7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,65 @@
+import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';
+
+const canvas = document.querySelector('#scene');
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 0, 7);
+
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+const geometry = new THREE.IcosahedronGeometry(1.8, 1);
+const material = new THREE.MeshStandardMaterial({
+  color: 0x7cf9ff,
+  emissive: 0x3e3a90,
+  roughness: 0.2,
+  metalness: 0.85,
+  wireframe: true,
+});
+const orb = new THREE.Mesh(geometry, material);
+scene.add(orb);
+
+const ambientLight = new THREE.AmbientLight(0xffffff, 0.45);
+const keyLight = new THREE.PointLight(0x8f6dff, 1.2, 100);
+keyLight.position.set(2, 3, 4);
+scene.add(ambientLight, keyLight);
+
+const pointer = { x: 0, y: 0 };
+window.addEventListener('pointermove', (event) => {
+  pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+  pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+});
+
+const clock = new THREE.Clock();
+const animate = () => {
+  const elapsed = clock.getElapsedTime();
+
+  orb.rotation.x = elapsed * 0.25 + pointer.y * 0.6;
+  orb.rotation.y = elapsed * 0.35 + pointer.x * 0.6;
+  orb.position.y = Math.sin(elapsed * 1.1) * 0.2;
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+};
+animate();
+
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+const reveals = document.querySelectorAll('.reveal');
+const observer = new IntersectionObserver(
+  (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('is-visible');
+      }
+    });
+  },
+  { threshold: 0.18 }
+);
+reveals.forEach((item) => observer.observe(item));
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c8f73bd
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,226 @@
+:root {
+  color-scheme: dark;
+  --bg: #070b16;
+  --surface: rgba(12, 19, 39, 0.55);
+  --border: rgba(255, 255, 255, 0.2);
+  --text: #eef2ff;
+  --muted: #afbbdf;
+  --accent: #7cf9ff;
+  --accent-alt: #8f6dff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: 'Outfit', sans-serif;
+  background: radial-gradient(circle at top, #1a275a 0%, var(--bg) 55%);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+#scene {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -2;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(135deg, rgba(7, 11, 22, 0.82), rgba(7, 11, 22, 0.45));
+}
+
+.glass {
+  backdrop-filter: blur(14px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.28);
+}
+
+.header {
+  position: sticky;
+  top: 1rem;
+  z-index: 20;
+  width: min(1100px, calc(100% - 2rem));
+  margin: 1rem auto 0;
+  border-radius: 999px;
+  padding: 0.9rem 1.4rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.brand {
+  font-weight: 800;
+  text-decoration: none;
+  color: var(--text);
+  letter-spacing: 0.08em;
+}
+
+nav {
+  display: flex;
+  gap: 1rem;
+}
+
+nav a {
+  color: var(--muted);
+  text-decoration: none;
+  transition: color 0.25s ease;
+}
+
+nav a:hover {
+  color: var(--accent);
+}
+
+main {
+  width: min(1100px, calc(100% - 2rem));
+  margin: 2rem auto 5rem;
+}
+
+.hero {
+  margin-top: 4rem;
+  max-width: 760px;
+}
+
+.kicker {
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(2.2rem, 5vw, 4rem);
+  line-height: 1.12;
+}
+
+.intro {
+  color: var(--muted);
+  max-width: 65ch;
+}
+
+.cta-row {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1.6rem;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.72rem 1.2rem;
+  text-decoration: none;
+  font-weight: 600;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+}
+
+.primary {
+  background: linear-gradient(135deg, var(--accent), #84ffc7);
+  color: #031319;
+}
+
+.ghost {
+  color: var(--text);
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.section {
+  margin-top: 4rem;
+  padding: 1.8rem;
+  border-radius: 1.2rem;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+h2 {
+  margin: 0 0 1rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.cards {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.card {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 1rem;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  transition: transform 0.35s ease, border-color 0.35s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(124, 249, 255, 0.55);
+}
+
+.pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+}
+
+.pills span {
+  border: 1px solid var(--border);
+  background: rgba(143, 109, 255, 0.15);
+  padding: 0.4rem 0.8rem;
+  border-radius: 999px;
+}
+
+.timeline {
+  margin: 0;
+  padding-left: 1.2rem;
+  color: var(--muted);
+}
+
+.timeline li + li {
+  margin-top: 0.6rem;
+}
+
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.7s ease, transform 0.7s ease;
+}
+
+.reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (max-width: 700px) {
+  .header {
+    border-radius: 1rem;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  nav {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}