Skip to content

Commit 385e4be

Browse files
anshumanjadiya1102anshumanjadiya1102
authored
Create index.js
1 parent 7657b47 commit 385e4be

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed

‎index.js‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import { useEffect, useState } from "react";
2+
import { motion } from "framer-motion";
3+
import { Github, Gitlab, Mail, Twitter, Globe, Reddit, CheckSquare, Calculator, Dice5, Football } from "lucide-react";
4+
import "./index.css";
5+
6+
function App() {
7+
const [active, setActive] = useState("home");
8+
9+
useEffect(() => {
10+
const handleScroll = () => {
11+
const sections = ["home", "about", "stack", "stats", "projects", "blog", "contact"];
12+
const scrollPos = window.scrollY + 200;
13+
for (let sec of sections) {
14+
const element = document.getElementById(sec);
15+
if (element && element.offsetTop <= scrollPos && element.offsetTop + element.offsetHeight > scrollPos) {
16+
setActive(sec);
17+
}
18+
}
19+
};
20+
window.addEventListener("scroll", handleScroll);
21+
return () => window.removeEventListener("scroll", handleScroll);
22+
}, []);
23+
24+
return (
25+
<div className="bg-black text-white font-sans cursor-crosshair">
26+
{/* Navbar */}
27+
<nav className="fixed w-full top-0 left-0 bg-black/90 backdrop-blur-lg z-50 shadow-md flex items-center justify-between px-6">
28+
{/* Logo */}
29+
<div className="flex items-center space-x-2">
30+
<img src="/assets/logo.png" alt="Drive-for-Java Logo" className="w-10 h-10 rounded-full animate-pulse" />
31+
<span className="text-red-500 font-bold text-xl">Drive-for-Java</span>
32+
</div>
33+
34+
{/* Links */}
35+
<ul className="flex space-x-6 py-4 text-lg">
36+
{["home","about","stack","stats","projects","blog","contact"].map(section => (
37+
<li key={section}>
38+
<a href={`#${section}`} className={`transition ${active === section ? "text-green-400 font-bold" : "hover:text-red-500"}`}>
39+
{section.charAt(0).toUpperCase()+section.slice(1)}
40+
</a>
41+
</li>
42+
))}
43+
</ul>
44+
</nav>
45+
46+
{/* Hero */}
47+
<section id="home" className="h-screen flex flex-col items-center justify-center text-center px-4">
48+
<motion.img src="/assets/logo.png" alt="Drive-for-Java" className="w-40 h-40 rounded-full border-4 border-green-500 mb-6 shadow-xl hover:scale-110 transition" initial={{scale:0}} animate={{scale:1}} transition={{duration:1}} />
49+
<motion.h1 className="text-4xl md:text-6xl font-bold text-red-500" initial={{y:-50,opacity:0}} animate={{y:0,opacity:1}} transition={{duration:1}}>
50+
Anshuman Jadiya
51+
</motion.h1>
52+
<p className="text-xl mt-4 text-green-400">🚀 Drive-for-Java • Building & Learning</p>
53+
</section>
54+
55+
{/* About */}
56+
<section id="about" className="min-h-screen flex flex-col items-center justify-center px-6 py-16">
57+
<h2 className="text-3xl font-bold mb-6 text-red-500">About Me</h2>
58+
<p className="max-w-3xl text-center text-gray-300 leading-relaxed">
59+
🌱 Exploring the world of Java • 📫 Building apps and tools • 🔭 Passionate about coding & problem-solving • 🎶 Learning HTML & Python • 👋 Always curious and doing more with code
60+
</p>
61+
</section>
62+
63+
{/* Tech Stack */}
64+
<section id="stack" className="min-h-screen bg-gray-900 px-6 py-16">
65+
<h2 className="text-3xl font-bold mb-10 text-green-400 text-center">Tech Stack</h2>
66+
<div className="flex flex-wrap justify-center gap-4">
67+
<img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" />
68+
<img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" />
69+
<img src="https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white" />
70+
<img src="https://img.shields.io/badge/java-%23ED8B00.svg?style=for-the-badge&logo=openjdk&logoColor=white" />
71+
<img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" />
72+
<img src="https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54" />
73+
</div>
74+
</section>
75+
76+
{/* Stats */}
77+
<section id="stats" className="min-h-screen px-6 py-16 flex flex-col items-center bg-black">
78+
<h2 className="text-3xl font-bold mb-10 text-red-500">GitHub Stats</h2>
79+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full justify-items-center">
80+
<img src="https://github-readme-stats.vercel.app/api?username=anshumanjadiya1102&theme=dark&hide_border=false&include_all_commits=true&count_private=true" className="shadow-lg hover:scale-105 transition" />
81+
<img src="https://nirzak-streak-stats.vercel.app/?user=anshumanjadiya1102&theme=dark&hide_border=false" className="shadow-lg hover:scale-105 transition" />
82+
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=anshumanjadiya1102&theme=dark&hide_border=false&layout=compact" className="shadow-lg hover:scale-105 transition" />
83+
<img src="https://github-readme-activity-graph.vercel.app/graph?username=anshumanjadiya1102&bg_color=0d1117&color=ffffff&line=f85c03&point=ffffff&area=true&hide_border=true" className="shadow-lg hover:scale-105 transition" />
84+
</div>
85+
</section>
86+
87+
{/* Projects */}
88+
<section id="projects" className="min-h-screen bg-gray-900 px-6 py-16">
89+
<h2 className="text-3xl font-bold mb-10 text-green-400 text-center">Projects</h2>
90+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">
91+
{/* Calculator */}
92+
<div className="bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-red-500/30 transition w-full md:w-80">
93+
<Calculator className="w-10 h-10 text-red-500 mb-4" />
94+
<h3 className="text-xl font-bold text-green-400 mb-2">Calculator</h3>
95+
<p className="text-gray-300 mb-4">A simple Java calculator app with basic arithmetic operations.</p>
96+
<a href="#" target="_blank" className="inline-block bg-red-500 px-4 py-2 rounded-lg hover:bg-red-600 transition">View on GitHub</a>
97+
</div>
98+
99+
{/* Todo App */}
100+
<div className="bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-green-500/30 transition w-full md:w-80">
101+
<CheckSquare className="w-10 h-10 text-green-400 mb-4" />
102+
<h3 className="text-xl font-bold text-red-400 mb-2">Todo App</h3>
103+
<p className="text-gray-300 mb-4">Task manager app to add, delete and mark completed todos.</p>
104+
<a href="#" target="_blank" className="inline-block bg-green-500 px-4 py-2 rounded-lg hover:bg-green-600 transition">View on GitHub</a>
105+
</div>
106+
107+
{/* Number Guessing Game */}
108+
<div className="bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-yellow-500/30 transition w-full md:w-80">
109+
<Dice5 className="w-10 h-10 text-yellow-400 mb-4" />
110+
<h3 className="text-xl font-bold text-green-400 mb-2">Number Guessing Game</h3>
111+
<p className="text-gray-300 mb-4">Java console game where you guess the secret number.</p>
112+
<a href="#" target="_blank" className="inline-block bg-yellow-500 px-4 py-2 rounded-lg hover:bg-yellow-600 transition">View on GitHub</a>
113+
</div>
114+
115+
{/* Football Game */}
116+
<div className="bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-blue-500/30 transition w-full md:w-80">
117+
<Football className="w-10 h-10 text-blue-400 mb-4" />
118+
<h3 className="text-xl font-bold text-red-400 mb-2">Football Game</h3>
119+
<p className="text-gray-300 mb-4">A simple football game simulation built in Java.</p>
120+
<a href="#" target="_blank" className="inline-block bg-blue-500 px-4 py-2 rounded-lg hover:bg-blue-600 transition">View on GitHub</a>
121+
</div>
122+
</div>
123+
</section>
124+
125+
{/* Blog */}
126+
<section id="blog" className="min-h-screen px-6 py-16">
127+
<h2 className="text-3xl font-bold mb-10 text-red-500 text-center">Blog</h2>
128+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
129+
{[1,2,3].map(post => (
130+
<div key={post} className="bg-gray-800 p-6 rounded-xl hover:scale-105 transition shadow-md">
131+
<h3 className="text-xl font-bold text-green-400 mb-2">Blog Post {post}</h3>
132+
<p className="text-gray-300 mb-4">This is a placeholder for an awesome blog post. You can write about coding, projects, or tutorials.</p>
133+
<a href="#" className="text-red-400 hover:underline">Read More →</a>
134+
</div>
135+
))}
136+
</div>
137+
</section>
138+
139+
{/* Contact */}
140+
<section id="contact" className="min-h-screen bg-gray-900 px-6 py-16 flex flex-col items-center">
141+
<h2 className="text-3xl font-bold mb-10 text-green-400">Contact Me</h2>
142+
<div className="flex flex-wrap justify-center gap-6">
143+
<a href="https://anshumanjadiya1102.github.io" target="_blank"><Globe className="w-10 h-10 text-red-400 hover:scale-125 transition" /></a>
144+
<a href="https://github.com/anshumanjadiya1102" target="_blank"><Github className="w-10 h-10 text-green-400 hover:scale-125 transition" /></a>
145+
<a href="https://gitlab.com/anshumanjadiya1102" target="_blank"><Gitlab className="w-10 h-10 text-red-500 hover:scale-125 transition" /></a>
146+
<a href="mailto:anshuman.jadiya03@gmail.com" target="_blank"><Mail className="w-10 h-10 text-yellow-400 hover:scale-125 transition" /></a>
147+
<a href="https://x.com/anshumanjadiya" target="_blank"><Twitter className="w-10 h-10 text-blue-400 hover:scale-125 transition" /></a>
148+
<a href="https://www.reddit.com/user/anshumanjadiya1102/" target="_blank"><Reddit className="w-10 h-10 text-orange-500 hover:scale-125 transition" /></a>
149+
</div>
150+
</section>
151+
152+
{/* Footer */}
153+
<footer className="bg-black py-6 text-center border-t border-gray-800">
154+
<p className="text-gray-400">© 2025 Drive-for-Java • Built with ❤️ by Anshuman Jadiya</p>
155+
</footer>
156+
</div>
157+
);
158+
}
159+
160+
export default App;

0 commit comments

Comments
 (0)