Spaces:

gaara09
/

pixel-prophet-pro

Running

App Files Files Community

gaara09 commited on Nov 8, 2025

Commit

6f90ecc

verified ·

1 Parent(s): 8b755f1

the background seems too plain or ordinary for someone working in gaming

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +144 -19
script.js +15 -0
style.css +88 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pixel Prophet Pro
-emoji: 🦀
-colorFrom: purple
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Pixel Prophet Pro  🎮
+colorFrom: red
 colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,144 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GameMetrics Guru | Product Analyst</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body>
+<custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <!-- Hero Section -->
+        <section class="text-center mb-20">
+            <div class="max-w-4xl mx-auto">
+                <h1 class="text-5xl font-bold text-gray-800 mb-6">Turning Game Data Into Winning Strategies</h1>
+                <p class="text-xl text-gray-600 mb-8">I analyze player behavior to optimize game economies and maximize engagement in free-to-play titles.</p>
+                <div class="flex justify-center space-x-4">
+                    <a href="#contact" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Get In Touch</a>
+                    <a href="#work" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition duration-300">See My Work</a>
+                </div>
+            </div>
+        </section>
+        <!-- Stats Section -->
+        <section class="mb-20">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i data-feather="trending-up" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">+15% Retention</h3>
+                    <p class="text-gray-600">Improved player retention through targeted feature optimization</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i data-feather="dollar-sign" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">+30% Revenue</h3>
+                    <p class="text-gray-600">Redesigned monetization funnels that increased conversion</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+                    <div class="text-indigo-600 mb-4">
+                        <i data-feather="users" class="w-10 h-10"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">5M+ Players</h3>
+                    <p class="text-gray-600">Analyzed behavior patterns across large player bases</p>
+                </div>
+            </div>
+        </section>
+        <!-- Work Section -->
+        <section id="work" class="mb-20">
+            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Featured Projects</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
+                    <img src="http://static.photos/gaming/1024x576/1" alt="Game Analytics Dashboard" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Player Segmentation Model</h3>
+                        <p class="text-gray-600 mb-4">Developed clustering algorithms to identify distinct player archetypes and tailor experiences accordingly.</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Python</span>
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">SQL</span>
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Tableau</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100">
+                    <img src="http://static.photos/technology/1024x576/2" alt="Economy Optimization" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Virtual Economy Balancing</h3>
+                        <p class="text-gray-600 mb-4">Redesigned in-game currency flows and pricing strategies that increased monetization without harming retention.</p>
+                        <div class="flex flex-wrap gap-2">
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Econometrics</span>
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">A/B Testing</span>
+                            <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Game Design</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- About Section -->
+        <section class="mb-20">
+            <div class="flex flex-col md:flex-row items-center gap-12">
+                <div class="md:w-1/3">
+                    <img src="http://static.photos/people/640x360/3" alt="Profile" class="rounded-xl shadow-sm w-full">
+                </div>
+                <div class="md:w-2/3">
+                    <h2 class="text-3xl font-bold text-gray-800 mb-6">About Me</h2>
+                    <p class="text-gray-600 mb-4">With 5+ years in free-to-play game analytics, I specialize in transforming raw data into actionable insights that drive player engagement and revenue growth.</p>
+                    <p class="text-gray-600 mb-6">My approach combines technical data skills with deep understanding of game design principles and player psychology.</p>
+                    <div class="flex flex-wrap gap-4">
+                        <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800">
+                            <i data-feather="linkedin" class="mr-2"></i> LinkedIn
+                        </a>
+                        <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800">
+                            <i data-feather="github" class="mr-2"></i> GitHub
+                        </a>
+                        <a href="#" class="flex items-center text-indigo-600 hover:text-indigo-800">
+                            <i data-feather="file-text" class="mr-2"></i> Resume
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Contact Section -->
+        <section id="contact" class="mb-20">
+            <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-sm border border-gray-100">
+                <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">Let's Connect</h2>
+                <form class="space-y-6">
+                    <div>
+                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
+                        <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div>
+                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                        <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
+                    </div>
+                    <div>
+                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                        <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
+                    </div>
+                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Send Message</button>
+                </form>
+            </div>
+        </section>
+    </main>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,15 @@

+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
+});
+// Form submission handling
+const contactForm = document.querySelector('form');
+if (contactForm) {
+    contactForm.addEventListener('submit', function(e) {

style.css CHANGED Viewed

@@ -1,28 +1,98 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles that extend Tailwind */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+    background:
+        radial-gradient(circle at 10% 20%, rgba(103, 58, 183, 0.1) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(255, 152, 0, 0.1) 0%, transparent 20%),
+        linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+    color: #e2e8f0;
+    min-height: 100vh;
+}
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Custom animation for stats cards */
+.stats-card:hover {
+    transform: translateY(-5px);
+    transition: transform 0.3s ease;
+}
+/* Project card hover effect */
+.project-card {
+    transition: all 0.3s ease;
+    background: rgba(26, 32, 44, 0.7);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.project-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
+    border-color: rgba(99, 102, 241, 0.5);
+}
+/* Stats cards */
+.bg-white {
+    background: rgba(26, 32, 44, 0.7) !important;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #e2e8f0 !important;
+}
+.text-gray-800 {
+    color: #e2e8f0 !important;
 }
+.text-gray-600 {
+    color: #a0aec0 !important;
+}
+.border-gray-100 {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+}
+/* Custom underline for section headings */
+.section-heading {
+    position: relative;
+    display: inline-block;
+}
+.section-heading:after {
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 4px;
+    bottom: -8px;
+    left: 0;
+    background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+    border-radius: 2px;
 }
+/* Glowing button effect */
+.bg-indigo-600 {
+    position: relative;
+    overflow: hidden;
 }
+.bg-indigo-600::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(
+        to bottom right,
+        rgba(99, 102, 241, 0),
+        rgba(168, 85, 247, 0.3),
+        rgba(99, 102, 241, 0)
+    );
+    transform: rotate(30deg);
+    animation: shine 3s infinite;
 }
+@keyframes shine {
+    0% { transform: rotate(30deg) translate(-30%, -30%); }
+    100% { transform: rotate(30deg) translate(30%, 30%); }
 }