Paritoshcodes.github.io/index.html at main · Paritoshcodes/Paritoshcodes.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paritosh's Portfolio</title>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-image: url('websitebg.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
        section {
            scroll-snap-align: start;
            transition: opacity 0.5s ease-in-out;
        }
        .hidden-section {
            opacity: 0;
        }
        .visible-section {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const { useState, useEffect, useRef } = React;

        const App = () => {
            const [activeSection, setActiveSection] = useState('home');
            const sectionsRef = useRef([]);

            useEffect(() => {
                const observerOptions = {
                    root: null,
                    rootMargin: '0px',
                    threshold: 0.5
                };

                const observerCallback = (entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            setActiveSection(entry.target.id);
                        }
                    });
                };

                const observer = new IntersectionObserver(observerCallback, observerOptions);

                sectionsRef.current.forEach(section => {
                    if (section) observer.observe(section);
                });

                return () => {
                    sectionsRef.current.forEach(section => {
                        if (section) observer.unobserve(section);
                    });
                };
            }, []);

            return (
                <div className="min-h-screen scroll-smooth">
                    <header className="bg-white shadow-md fixed w-full z-10">
                        <div className="container mx-auto px-6 py-4 flex justify-between items-center">
                            <div className="text-2xl font-bold">Paritosh's Portfolio</div>
                            <nav className="space-x-4">
                                <button onClick={() => sectionsRef.current[0].scrollIntoView({ behavior: 'smooth' })} className={`text-lg ${activeSection === 'home' ? 'text-blue-500' : 'text-gray-700'}`}>Home</button>
                                <button onClick={() => sectionsRef.current[1].scrollIntoView({ behavior: 'smooth' })} className={`text-lg ${activeSection === 'about' ? 'text-blue-500' : 'text-gray-700'}`}>About</button>
                                <button onClick={() => sectionsRef.current[2].scrollIntoView({ behavior: 'smooth' })} className={`text-lg ${activeSection === 'projects' ? 'text-blue-500' : 'text-gray-700'}`}>Projects</button>
                                <button onClick={() => sectionsRef.current[3].scrollIntoView({ behavior: 'smooth' })} className={`text-lg ${activeSection === 'contact' ? 'text-blue-500' : 'text-gray-700'}`}>Contact</button>
                            </nav>
                        </div>
                    </header>

                    <main className="pt-20 scroll-snap-y">
                        <section id="home" ref={el => sectionsRef.current[0] = el} className={`container mx-auto px-6 py-20 text-center ${activeSection === 'home' ? 'visible-section' : 'hidden-section'}`}>
                            <h1 className="text-4xl font-bold mb-4">Welcome to My Portfolio</h1>
                            <p className="text-lg text-gray-700 mb-8">Discover my work and projects.</p>
                            <img src="https://placehold.co/600x400" alt="A placeholder image of a creative workspace with a laptop, notebook, and coffee cup" className="mx-auto rounded-lg shadow-lg"/>
                        </section>
                        <section id="about" ref={el => sectionsRef.current[1] = el} className={`container mx-auto px-6 py-20 ${activeSection === 'about' ? 'visible-section' : 'hidden-section'}`}>
                            <h2 className="text-3xl font-bold mb-4">About Me</h2>
                            <p className="text-lg text-gray-700 mb-8">I am a 2nd year Data Science student and I love to learn and explore new technologies.</p>
                            <img src="https://placehold.co/600x400" alt="A placeholder image of a person coding on a laptop" className="mx-auto rounded-lg shadow-lg"/>
                        </section>
                        <section id="projects" ref={el => sectionsRef.current[2] = el} className={`container mx-auto px-6 py-20 ${activeSection === 'projects' ? 'visible-section' : 'hidden-section'}`}>
                            <h2 className="text-3xl font-bold mb-4">Projects</h2>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                <div className="bg-white p-6 rounded-lg shadow-lg">
                                    <img src="https://placehold.co/300x200" alt="A placeholder image of a project screenshot" className="mb-4 rounded-lg"/>
                                    <h3 className="text-2xl font-bold mb-2">Fraudulent Transaction Detection</h3>
                                    <p className="text-gray-700">A python application designed to detect fraudulent transactions on a given dataset using ml algorithms</p>
                                </div>
                                <div className="bg-white p-6 rounded-lg shadow-lg">
                                    <img src="https://placehold.co/300x200" alt="A placeholder image of a project screenshot" className="mb-4 rounded-lg"/>
                                    <h3 className="text-2xl font-bold mb-2">GameLauncher</h3>
                                    <p className="text-gray-700">A Game Launcher hub application developed using java with classic games like Flappy Bird, Tictactoe etc.</p>
                                </div>
                                <div className="bg-white p-6 rounded-lg shadow-lg">
                                    <img src="https://placehold.co/300x200" alt="A placeholder image of a project screenshot" className="mb-4 rounded-lg"/>
                                    <h3 className="text-2xl font-bold mb-2">Food Inventory management system</h3>
                                    <p className="text-gray-700">A food inventory management system designed with priority queue and hashmap data structure in c.</p>
                                </div>
                            </div>
                        </section>
                        <section id="contact" ref={el => sectionsRef.current[3] = el} className={`container mx-auto px-6 py-20 ${activeSection === 'contact' ? 'visible-section' : 'hidden-section'}`}>
                            <h2 className="text-3xl font-bold mb-4">Contact Me</h2>
                            <p className="text-lg text-gray-700 mb-8">Feel free to reach out to me through the following platforms:</p>
                            <div className="flex justify-center space-x-6">
                                <a href="https://twitter.com" className="text-blue-500 text-3xl"><i className="fab fa-twitter"></i></a>
                                <a href="https://linkedin.com" className="text-blue-700 text-3xl"><i className="fab fa-linkedin"></i></a>
                                <a href="https://github.com" className="text-gray-900 text-3xl"><i className="fab fa-github"></i></a>
                            </div>
                        </section>
                    </main>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>