CodeRifle.github.io/index.html at main · CodeRifle/CodeRifle.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rishabh Gupta - AI Engineer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="site-container"> <!-- New overall container -->
        <nav id="navbar">
            <div class="container"> <!-- To keep content aligned with other sections -->
                <a href="#home" class="nav-logo">Rishabh Gupta</a>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#projects">Projects</a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <header>
            <h1>Rishabh Gupta</h1>
            <div class="subtitle">AI Engineer</div>
        </header>
        <main> <!-- Main content wrapper -->
            <div id="home" class="container"> <!-- Renamed original chat container div -->
                <div class="chat-container"> <!-- This class is for the chat specific styling -->
                    <div class="chat-messages">
                        <div class="message bot-message visible">
                            Hello! I'm Rishabh's portfolio assistant. Feel free to ask me anything about Rishabh's work, experience, or skills!
                        </div>
                    </div>

                    <div class="typing-indicator">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>

                    <div class="chat-input">
                        <input type="text" placeholder="Ask me anything about Rishabh..." id="userInput">
                        <button onclick="sendMessage()">Send</button>
                    </div>

                    <div class="suggested-prompts">
                        <div class="prompt-chip" onclick="usePrompt('Who is Rishabh Gupta?')">Who is Rishabh Gupta?</div>
                        <div class="prompt-chip" onclick="usePrompt('What are his skills?')">What are his skills?</div>
                        <div class="prompt-chip" onclick="usePrompt('Show me his projects')">Show me his projects</div>
                    </div>
                </div>
            </div>
            <section id="about" class="container">
                <h2>About Me</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p>Hello! I'm Rishabh Gupta, an AI Engineer driven by a passion for building intelligent systems that solve real-world problems. My journey into the world of Artificial Intelligence began with a fascination for how machines can learn, adapt, and make decisions.</p>
                        <p>Over the years, I've honed my skills in machine learning, deep learning, natural language processing, and computer vision. I thrive on tackling complex challenges and transforming innovative ideas into tangible AI solutions. I believe in the transformative power of AI and am dedicated to contributing to its ethical and impactful advancement.</p>
                        <p>When I'm not immersed in code or exploring new algorithms, I enjoy reading about the latest tech advancements, hiking, and contributing to open-source projects.</p>
                    </div>
                    <div class="about-image">
                        <img src="https://via.placeholder.com/250" alt="Rishabh Gupta - Profile Picture" style="width:100%;max-width:250px;border-radius:10px;">
                    </div>
                </div>
            </section>
            <section id="projects" class="container">
                <h2>My Projects</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <img src="https://via.placeholder.com/350x200?text=Project+Alpha" alt="Project Alpha Thumbnail">
                        <h3>Project Alpha</h3>
                        <p>An innovative AI solution for advanced data analytics, leveraging machine learning to uncover hidden patterns and provide actionable insights from complex datasets.</p>
                        <p><strong>Technologies:</strong> Python, Scikit-learn, Pandas, TensorFlow</p>
                        <div class="project-links">
                            <a href="#" class="btn-link">View on GitHub</a>
                            <a href="#" class="btn-link">Live Demo</a>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="https://via.placeholder.com/350x200?text=Project+Beta" alt="Project Beta Thumbnail">
                        <h3>Project Beta</h3>
                        <p>A natural language processing engine designed for real-time sentiment analysis and topic modeling from various text sources, enhancing customer feedback understanding.</p>
                        <p><strong>Technologies:</strong> Python, NLTK, SpaCy, PyTorch</p>
                        <div class="project-links">
                            <a href="#" class="btn-link">View on GitHub</a>
                            <a href="#" class="btn-link">Live Demo</a>
                        </div>
                    </div>
                     <div class="project-card">
                        <img src="https://via.placeholder.com/350x200?text=Project+Gamma" alt="Project Gamma Thumbnail">
                        <h3>Project Gamma</h3>
                        <p>A computer vision system for automated object detection and classification in images and videos, built for scalability and high accuracy in diverse environments.</p>
                        <p><strong>Technologies:</strong> Python, OpenCV, YOLO, Keras</p>
                        <div class="project-links">
                            <a href="#" class="btn-link">View on GitHub</a>
                            <a href="#" class="btn-link">Live Demo</a>
                        </div>
                    </div>
                </div>
            </section>
            <section id="skills" class="container"></section>
            <section id="contact" class="container">
                <h2>Get In Touch</h2>
                <p>If you'd like to discuss a project or opportunity, feel free to reach out to me at <a href="mailto:rishabh.placeholder@example.com">rishabh.placeholder@example.com</a>.</p>
            </section>
        </main>
        <footer id="footer">
            <div class="container">
                <p>&copy; 2024 Rishabh Gupta. All Rights Reserved.</p>
                <div class="social-links">
                    <a href="#" target="_blank">LinkedIn</a>
                    <a href="#" target="_blank">GitHub</a>
                    <a href="#" target="_blank">Twitter</a>
                </div>
            </div>
        </footer>
    </div>
    <!-- Assuming Google Gemini SDK. Replace with the correct SDK if different -->
    <script type="module">
        // This is a placeholder. The actual LanguageModel library (e.g., from a CDN)
        // would make `LanguageModel` available globally or as a module.
        // For demonstration, we'll mock a simple version if it's not already defined.
        if (typeof window.LanguageModel === 'undefined') {
            console.log("Mocking LanguageModel for development purposes.");
            window.LanguageModel = {
                create: async (config) => {
                    console.log("Mock LanguageModel.create() called");
                    if (config?.initialPrompts?.[0]?.content) {
                        console.log("Mock LanguageModel received system prompt:", config.initialPrompts[0].content);
                    }
                    return {
                        prompt: async (message) => {
                            console.log(`Mock session.prompt() called with: "${message}"`);
                            await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network delay
                            if (message.toLowerCase().includes("error test")) {
                                throw new Error("Simulated LLM error.");
                            }
                            return `Mock response to: "${message}"`;
                        }
                    };
                }
            };
        }
    </script>
    <script src="script.js"></script>
</body>
</html>