Create immersive single-page portfolio with interactive 3D background and motion-driven UI

README.md

@@ -1 +1,15 @@
-# PORTFOLIOO
+# 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`.

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>

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"
+}

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));