summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNavan Chauhan <navanchauhan@gmail.com>2025-02-18 18:06:54 -0700
committerNavan Chauhan <navanchauhan@gmail.com>2025-02-18 18:06:54 -0700
commit3633f09b2a881e2c2596ad7c6a50133017e436d0 (patch)
treef0cda6e62dacda49910c3d64d760c82c11358b57
initial commitHEADmaster
Diffstat
-rw-r--r--groq.html232
-rw-r--r--index.html26
-rw-r--r--linktree.html79
-rw-r--r--profile.pngbin0 -> 1022 bytes
-rw-r--r--resume.html187
5 files changed, 524 insertions, 0 deletions
diff --git a/groq.html b/groq.html
new file mode 100644
index 0000000..d47ad40
--- /dev/null
+++ b/groq.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+ <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+ <style>
+ .chat-container {
+ height: 300px;
+ overflow-y: auto;
+ border: 1px solid #dbdbdb;
+ border-radius: 4px;
+ padding: 1rem;
+ margin-bottom: 1rem;
+ }
+ .message {
+ margin-bottom: 1rem;
+ }
+ .message-content {
+ margin-top: 0.5rem;
+ }
+ .typing-indicator {
+ display: none;
+ color: #666;
+ font-style: italic;
+ }
+ .message pre {
+ background-color: #f5f5f5;
+ padding: 1em;
+ border-radius: 4px;
+ overflow-x: auto;
+ }
+ .message code {
+ font-family: monospace;
+ background-color: #f5f5f5;
+ padding: 0.2em 0.4em;
+ border-radius: 3px;
+ }
+ .message p {
+ margin-bottom: 1em;
+ }
+ .message ul, .message ol {
+ margin-left: 2em;
+ margin-bottom: 1em;
+ }
+ </style>
+</head>
+<body>
+ <section class="section">
+ <div class="container">
+ <div class="field">
+ <label class="label">GROQ API Key</label>
+ <div class="control">
+ <input class="input" type="password" id="apiKey" placeholder="Enter your GROQ API key">
+ </div>
+ </div>
+
+ <div class="field">
+ <label class="label">System Prompt</label>
+ <div class="control">
+ <textarea class="textarea" id="systemPrompt" placeholder="Enter your system prompt">You are a helpful assistant</textarea>
+ </div>
+ </div>
+
+ <div class="box chat-container" id="chatBox">
+ <div class="message">
+ <strong>System:</strong>
+ <div class="message-content">
+ <p>Welcome to GROQ Chat! Please enter your API key and system prompt to begin.</p>
+ </div>
+ </div>
+ <div class="typing-indicator" id="typingIndicator">Assistant is typing...</div>
+ </div>
+
+ <div class="field">
+ <div class="control">
+ <textarea class="textarea" id="userInput" placeholder="Type your message here..." rows="2"></textarea>
+ </div>
+ </div>
+
+ <div class="field">
+ <div class="control">
+ <button class="button is-primary" id="sendButton">Send Message</button>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <script>
+ marked.setOptions({
+ breaks: true,
+ gfm: true,
+ headerIds: false,
+ mangle: false
+ });
+
+ const apiKeyInput = document.getElementById('apiKey');
+ const systemPromptInput = document.getElementById('systemPrompt');
+ const userInput = document.getElementById('userInput');
+ const sendButton = document.getElementById('sendButton');
+ const chatBox = document.getElementById('chatBox');
+ const typingIndicator = document.getElementById('typingIndicator');
+
+ let messages = [];
+
+ function addMessageToChat(role, content, useMarkdown = false) {
+ const messageDiv = document.createElement('div');
+ messageDiv.className = 'message';
+
+ const contentDiv = document.createElement('div');
+ contentDiv.className = 'message-content';
+
+ messageDiv.innerHTML = `<strong>${role}:</strong>`;
+ contentDiv.innerHTML = useMarkdown ? marked.parse(content) : `<p>${content}</p>`;
+
+ messageDiv.appendChild(contentDiv);
+ chatBox.insertBefore(messageDiv, typingIndicator);
+ chatBox.scrollTop = chatBox.scrollHeight;
+ }
+
+ async function sendMessage() {
+ const apiKey = apiKeyInput.value;
+ const systemPrompt = systemPromptInput.value;
+ const userMessage = userInput.value.trim();
+
+ if (!apiKey || !userMessage) {
+ alert('Please enter both API key and message');
+ return;
+ }
+
+ // Add user message to chat
+ addMessageToChat('User', userMessage);
+ userInput.value = '';
+
+ // Update messages array
+ if (messages.length === 0) {
+ messages.push({
+ role: 'system',
+ content: systemPrompt
+ });
+ }
+ messages.push({
+ role: 'user',
+ content: userMessage
+ });
+
+ typingIndicator.style.display = 'block';
+
+ try {
+ const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${apiKey}`
+ },
+ body: JSON.stringify({
+ messages: messages,
+ model: 'llama-3.1-8b-instant',
+ temperature: 1,
+ max_tokens: 1024,
+ top_p: 1,
+ stream: true,
+ stop: null
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let assistantResponse = '';
+ let messageDiv = null;
+
+ while (true) {
+ const {value, done} = await reader.read();
+ if (done) break;
+
+ const chunk = decoder.decode(value);
+ const lines = chunk.split('\n');
+
+ for (const line of lines) {
+ if (line.startsWith('data: ') && line !== 'data: [DONE]') {
+ try {
+ const data = JSON.parse(line.substring(6));
+ if (data.choices[0].delta.content) {
+ const content = data.choices[0].delta.content;
+ assistantResponse += content;
+
+ if (!messageDiv) {
+ messageDiv = document.createElement('div');
+ messageDiv.className = 'message';
+ const contentDiv = document.createElement('div');
+ contentDiv.className = 'message-content';
+ messageDiv.innerHTML = '<strong>Assistant:</strong>';
+ messageDiv.appendChild(contentDiv);
+ chatBox.insertBefore(messageDiv, typingIndicator);
+ }
+
+ messageDiv.querySelector('.message-content').innerHTML = marked.parse(assistantResponse);
+ chatBox.scrollTop = chatBox.scrollHeight;
+ }
+ } catch (e) {
+ console.error('Error parsing chunk:', e);
+ }
+ }
+ }
+ }
+
+ messages.push({
+ role: 'assistant',
+ content: assistantResponse
+ });
+
+ } catch (error) {
+ console.error('Error:', error);
+ addMessageToChat('System', `Error: ${error.message}`);
+ } finally {
+ typingIndicator.style.display = 'none';
+ }
+ }
+
+ sendButton.addEventListener('click', sendMessage);
+ userInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ sendMessage();
+ }
+ });
+ </script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..46498ef
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Web Templates</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"></script>
+</head>
+<body>
+ <section class="section">
+ <div class="container">
+ <h1 class="title is-1 has-text-centered">Web Templates</h1>
+ <ul>
+ <li>
+ <a href="linktree.html">Link Tree</a>
+ </li>
+ <li>
+ <a href="resume.html">Resume</a>
+ </li>
+ <li>
+ <a href="groq.html">Groq</a>
+ </li>
+ </ul>
+</body>
+</html>
diff --git a/linktree.html b/linktree.html
new file mode 100644
index 0000000..3abb5dd
--- /dev/null
+++ b/linktree.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>My Link Tree</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js"></script>
+</head>
+<body>
+ <section class="section">
+ <div class="container">
+ <div class="columns is-centered">
+ <div class="column is-half">
+ <!-- Profile Section -->
+ <div class="has-text-centered mb-6">
+ <figure class="image is-128x128 is-inline-block mb-4">
+ <img class="is-rounded" src="profile.png" alt="Profile Picture">
+ </figure>
+ <h1 class="title is-3">John Doe</h1>
+ <p class="subtitle is-5 mb-4">Digital Creator & Developer</p>
+ </div>
+
+ <!-- Links Section -->
+ <div class="buttons is-flex is-flex-direction-column">
+
+ <a href="#" class="button is-fullwidth is-link is-rounded mb-3">
+ <span class="icon">
+ <i class="fab fa-twitter"></i>
+ </span>
+ <span>Twitter</span>
+ </a>
+
+ <a href="#" class="button is-fullwidth is-info is-rounded mb-3">
+ <span class="icon">
+ <i class="fab fa-linkedin"></i>
+ </span>
+ <span>LinkedIn</span>
+ </a>
+
+ <a href="#" class="button is-fullwidth is-dark is-rounded mb-3">
+ <span class="icon">
+ <i class="fab fa-github"></i>
+ </span>
+ <span>GitHub</span>
+ </a>
+
+ <a href="#" class="button is-fullwidth is-danger is-rounded mb-3">
+ <span class="icon">
+ <i class="fab fa-youtube"></i>
+ </span>
+ <span>YouTube</span>
+ </a>
+
+ <!-- Copy past the following block to add more links -->
+ <a href="https://example.com" class="button is-fullwidth is-success is-rounded mb-3">
+ <span class="icon">
+ <!-- Change the icon to any other icon from fontawesome -->
+ <!-- https://fontawesome.com/v6/search?ic=free -->
+ <i class="fas fa-globe"></i>
+ </span>
+ <span>Link to something else</span>
+ </a>
+ <!-- end of block -->
+
+ </div>
+
+ <!-- Footer -->
+ <footer class="mt-6 has-text-centered">
+ <p class="has-text-grey">
+ © 2025 John Doe • Made with <i class="fas fa-heart has-text-danger"> in Boulder, CO</i>
+ </p>
+ </footer>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+</html>
diff --git a/profile.png b/profile.png
new file mode 100644
index 0000000..2ecd4de
--- /dev/null
+++ b/profile.png
Binary files differ
diff --git a/resume.html b/resume.html
new file mode 100644
index 0000000..7de85e3
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mechanical Engineering Student Resume</title>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+ <style>
+ .resume-section { margin-bottom: 1.5rem; }
+ .tag { margin-right: 0.5rem; margin-bottom: 0.5rem; }
+ .timeline-item { margin-bottom: 1rem; }
+ </style>
+</head>
+<body>
+ <section class="section">
+ <div class="container">
+ <!-- Header -->
+ <div class="resume-section">
+ <div class="columns is-vcentered">
+ <div class="column is-8">
+ <h1 class="title is-2">John Doe</h1>
+ <h2 class="subtitle is-4">Mechanical Engineering Student</h2>
+ </div>
+ <div class="column is-4">
+ <div class="content has-text-right">
+ <p>
+ <span class="icon"><i class="fas fa-envelope"></i></span>
+ <a href="mailto:john.doe@colorado.edu">
+ john.doe@colorado.edu
+ </a>
+ </p>
+ <p>
+ <span class="icon"><i class="fas fa-phone"></i></span>
+ <a href="tel:3035550123">
+ (303) 555-0123
+ </a>
+ </p>
+ <p>
+ <span class="icon"><i class="fas fa-map-marker-alt"></i></span>
+ Boulder, CO
+ </p>
+ <p>
+ <span class="icon"><i class="fab fa-linkedin"></i></span>
+ <a href="https://linkedin.com/in/johndoe">
+ linkedin.com/in/johndoe
+ </a>
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Education -->
+ <div class="resume-section">
+ <h3 class="title is-4">Education</h3>
+ <div class="columns">
+ <div class="column is-3">
+ <p class="has-text-weight-bold">Expected May 2025</p>
+ </div>
+ <div class="column">
+ <p class="has-text-weight-bold">Bachelor of Science in Mechanical Engineering</p>
+ <p>University of Colorado Boulder</p>
+ <p>GPA: 3.6/4.0</p>
+ <p>Relevant Coursework: Thermodynamics, Fluid Mechanics, Machine Design, CAD/CAM, Materials Science, Control Systems</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Technical Skills -->
+ <div class="resume-section">
+ <h3 class="title is-4">Technical Skills</h3>
+ <div class="field is-grouped is-grouped-multiline">
+ <span class="tag is-primary">SolidWorks</span>
+ <span class="tag is-primary">AutoCAD</span>
+ <span class="tag is-primary">MATLAB</span>
+ <span class="tag is-info">3D Printing</span>
+ <span class="tag is-info">CNC Machining</span>
+ <span class="tag is-info">FEA Analysis</span>
+ <span class="tag is-success">Python</span>
+ <span class="tag is-success">LabVIEW</span>
+ <span class="tag is-warning">Project Management</span>
+ <span class="tag is-warning">GD&T</span>
+ </div>
+ </div>
+
+ <!-- Experience -->
+ <div class="resume-section">
+ <h3 class="title is-4">Professional Experience</h3>
+
+ <div class="timeline-item">
+ <div class="columns">
+ <div class="column is-3">
+ <p class="has-text-weight-bold">Summer 2024</p>
+ <p class="has-text-weight-semibold">Ball Aerospace</p>
+ </div>
+ <div class="column">
+ <p class="has-text-weight-bold">Mechanical Design Engineering Intern</p>
+ <div class="content">
+ <ul>
+ <li>Developed CAD models for satellite components using SolidWorks, ensuring compliance with aerospace standards</li>
+ <li>Performed thermal analysis on critical components using FEA software</li>
+ <li>Collaborated with cross-functional teams to optimize design for manufacturability</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="columns">
+ <div class="column is-3">
+ <p class="has-text-weight-bold">Summer 2023</p>
+ <p class="has-text-weight-semibold">Lockheed Martin</p>
+ </div>
+ <div class="column">
+ <p class="has-text-weight-bold">Manufacturing Engineering Intern</p>
+ <div class="content">
+ <ul>
+ <li>Optimized assembly line processes resulting in 15% reduction in production time</li>
+ <li>Created technical documentation for manufacturing procedures</li>
+ <li>Assisted in implementing lean manufacturing principles across production floor</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Leadership & Projects -->
+ <div class="resume-section">
+ <h3 class="title is-4">Leadership & Projects</h3>
+
+ <div class="timeline-item">
+ <div class="columns">
+ <div class="column is-3">
+ <p class="has-text-weight-bold">2023 - Present</p>
+ <p class="has-text-weight-semibold">CU Robotics Club</p>
+ </div>
+ <div class="column">
+ <p class="has-text-weight-bold">Project Team Lead</p>
+ <div class="content">
+ <ul>
+ <li>Lead team of 12 students in designing and building autonomous robot for national competition</li>
+ <li>Managed $5,000 budget and project timeline</li>
+ <li>Secured 2nd place in 2024 Regional Robotics Competition</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="columns">
+ <div class="column is-3">
+ <p class="has-text-weight-bold">Fall 2024</p>
+ <p class="has-text-weight-semibold">Senior Design Project</p>
+ </div>
+ <div class="column">
+ <p class="has-text-weight-bold">Team Lead - Solar-Powered Water Purification System</p>
+ <div class="content">
+ <ul>
+ <li>Designing innovative water purification system using renewable energy</li>
+ <li>Conducting thermal efficiency analysis and prototype testing</li>
+ <li>Collaborating with local NGO for implementation in developing regions</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Certifications -->
+ <div class="resume-section">
+ <h3 class="title is-4">Certifications & Awards</h3>
+ <div class="content">
+ <ul>
+ <li>CSWA (Certified SolidWorks Associate)</li>
+ <li>Dean's List (2022-2024)</li>
+ <li>First Place, Engineering Design Expo 2023</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </section>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-11 01:48:32 +0000