add: basic structure

LazarusAA · Sep 19, 2024 · 18936ba · 18936ba
commit 18936ba
Show file tree

Hide file tree

Showing 3 changed files with 584 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Machine Learning Projects Portfolio</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Machine Learning Projects Portfolio</h1>
+        <p class="tagline">Projects that demonstrate my passion and skills in AI and Machine Learning.</p>
+    </header>
+
+    <main>
+        <section id="projects">
+            <!-- Project cards will be dynamically added here -->
+        </section>
+    </main>
+
+    <div id="project-modal" class="modal">
+        <div class="modal-content notebook">
+            <span class="close">&times;</span>
+            <h2 id="modal-title" class="notebook-title"></h2>
+            <div id="notebook-cells">
+                <!-- Cells will be dynamically added here -->
+            </div>
+            <a id="modal-link" href="#" target="_blank" class="notebook-link">View on GitHub</a>
+        </div>
+    </div>
+
+    <footer>
+        <p>Contact me: <a href="mailto:[email protected]">[email protected]</a></p>
+        <p>© 2023 Alvaro Lazarus. All rights reserved.</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,233 @@
+const projects = [
+    {
+        title: "Image Classification with CNNs",
+        description: "Developed a Convolutional Neural Network (CNN) for image classification using TensorFlow and Keras.",
+        link: "https://github.com/yourusername/image-classification-cnn",
+        cells: [
+            {
+                type: "markdown",
+                content: `# Image Classification with CNNs
+
+This project implements a state-of-the-art CNN for image classification. Key features include:
+
+- Custom CNN architecture with 5 convolutional layers
+- Data augmentation to improve model generalization
+- Transfer learning using pre-trained weights from ImageNet
+- Visualization of model predictions and feature maps`
+            },
+            {
+                type: "code",
+                content: `import tensorflow as tf
+from tensorflow.keras.models import Sequential
+from tensorflow.keras.layers import Conv2D, MaxPooling2D, Flatten, Dense
+
+model = Sequential([
+    Conv2D(32, (3, 3), activation='relu', input_shape=(224, 224, 3)),
+    MaxPooling2D((2, 2)),
+    Conv2D(64, (3, 3), activation='relu'),
+    MaxPooling2D((2, 2)),
+    Conv2D(64, (3, 3), activation='relu'),
+    Flatten(),
+    Dense(64, activation='relu'),
+    Dense(10, activation='softmax')
+])`
+            },
+            {
+                type: "markdown",
+                content: `## Model Training
+
+The model is trained on a dataset of 10,000 images across 10 classes. We use data augmentation to improve generalization.`
+            },
+            {
+                type: "code",
+                content: `from tensorflow.keras.preprocessing.image import ImageDataGenerator
+
+train_datagen = ImageDataGenerator(
+    rescale=1./255,
+    rotation_range=20,
+    width_shift_range=0.2,
+    height_shift_range=0.2,
+    horizontal_flip=True
+)
+
+train_generator = train_datagen.flow_from_directory(
+    'dataset/train',
+    target_size=(224, 224),
+    batch_size=32,
+    class_mode='categorical'
+)
+
+model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=['accuracy'])
+model.fit(train_generator, epochs=20)`
+            },
+            {
+                type: "markdown",
+                content: `## Results
+
+The model achieved 95% accuracy on the test set, demonstrating its effectiveness in image classification tasks.`
+            }
+        ]
+    },
+    {
+        title: "Natural Language Processing Chatbot",
+        description: "Created an intelligent chatbot using NLP techniques and the GPT-3 API for human-like conversations.",
+        link: "https://github.com/yourusername/nlp-chatbot",
+        cells: [
+            {
+                type: "markdown",
+                content: `# Natural Language Processing Chatbot
+
+This NLP-powered chatbot leverages the GPT-3 API to engage in human-like conversations. Key features include:
+
+- Context-aware responses
+- Multi-turn conversation handling
+- Integration with popular messaging platforms
+- Customizable personality and knowledge base`
+            },
+            {
+                type: "code",
+                content: `import openai
+
+response = openai.Completion.create(
+    engine="text-davinci-002",
+    prompt="Translate the following English text to French: '{}'",
+    max_tokens=60
+)
+
+print(response.choices[0].text.strip())`
+            },
+            {
+                type: "markdown",
+                content: `## Example Conversation
+
+<pre><code>
+User: Hello, how are you?
+Chatbot: <rewritten>I'm an AI, so I don't have feelings, but I'm here to help you!</rewritten>
+User: <rewritten>What's your favorite color?</rewritten>
+Chatbot: <rewritten>As a chatbot, I don't have a personal favorite color.</rewritten>
+User: <rewritten>Tell me a joke.</rewritten>
+Chatbot: <rewritten>Why don't scientists trust atoms?</rewritten>
+<rewritten>Because they make up everything!</rewritten>
+</code></pre>`
+            }
+        ]
+    },
+    {
+        title: "Predictive Maintenance with IoT Data",
+        description: "Implemented a machine learning model to predict equipment failures using IoT sensor data and scikit-learn.",
+        link: "https://github.com/yourusername/predictive-maintenance-ml",
+        cells: [
+            {
+                type: "markdown",
+                content: `# Predictive Maintenance with IoT Data
+
+This project uses IoT sensor data to predict equipment failures before they occur. Key features include:
+
+- Real-time data processing with Apache Kafka
+- Feature engineering to extract meaningful patterns from sensor data
+- Ensemble model combining Random Forest and Gradient Boosting
+- Interactive dashboard for monitoring equipment health`
+            },
+            {
+                type: "code",
+                content: `from sklearn.ensemble import RandomForestClassifier, GradientBoostingClassifier
+from sklearn.model_selection import train_test_split
+from sklearn.metrics import classification_report
+
+# Load sensor data
+data = pd.read_csv('sensor_data.csv')
+
+# Split data into features and target
+X = data.drop('failure', axis=1)
+y = data['failure']
+
+# Split data into training and test sets
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+
+# Train Random Forest classifier
+rf = RandomForestClassifier(n_estimators=100, random_state=42)
+rf.fit(X_train, y_train)
+
+# Train Gradient Boosting classifier
+gb = GradientBoostingClassifier(n_estimators=100, random_state=42)
+gb.fit(X_train, y_train)
+
+# Evaluate models
+print("Random Forest Classifier:")
+print(classification_report(y_test, rf.predict(X_test)))
+print("Gradient Boosting Classifier:")
+print(classification_report(y_test, gb.predict(X_test)))`
+            },
+            {
+                type: "markdown",
+                content: `## Results
+
+The ensemble model combining Random Forest and Gradient Boosting achieved an accuracy of 98% on the test set, demonstrating its effectiveness in predicting equipment failures.`
+            }
+        ]
+    }
+];
+
+function createProjectCard(project) {
+    const card = document.createElement('div');
+    card.className = 'project-card';
+    card.innerHTML = `
+        <h2>${project.title}</h2>
+        <p>${project.description}</p>
+    `;
+    card.addEventListener('click', () => openModal(project));
+    return card;
+}
+
+function renderProjects() {
+    const projectsContainer = document.getElementById('projects');
+    projects.forEach(project => {
+        const card = createProjectCard(project);
+        projectsContainer.appendChild(card);
+    });
+}
+
+function createNotebookCell(cell) {
+    const cellElement = document.createElement('div');
+    cellElement.className = 'notebook-cell';
+    cellElement.innerHTML = `
+        <div class="cell-type">[${cell.type}]</div>
+        <div class="cell-content">${cell.type === 'code' ? `<pre><code>${cell.content}</code></pre>` : cell.content}</div>
+    `;
+    return cellElement;
+}
+
+function openModal(project) {
+    const modal = document.getElementById('project-modal');
+    const modalTitle = document.getElementById('modal-title');
+    const notebookCells = document.getElementById('notebook-cells');
+    const modalLink = document.getElementById('modal-link');
+
+    modalTitle.textContent = project.title;
+    notebookCells.innerHTML = '';
+    project.cells.forEach(cell => {
+        notebookCells.appendChild(createNotebookCell(cell));
+    });
+    modalLink.href = project.link;
+
+    modal.style.display = 'block';
+}
+
+function closeModal() {
+    const modal = document.getElementById('project-modal');
+    modal.style.display = 'none';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    renderProjects();
+
+    const closeBtn = document.querySelector('.close');
+    closeBtn.addEventListener('click', closeModal);
+
+    window.addEventListener('click', (event) => {
+        const modal = document.getElementById('project-modal');
+        if (event.target === modal) {
+            closeModal();
+        }
+    });
+});