jamigibbs · EllenLI2000 · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024 · Feb 23, 2024
diff --git a/ChatWithFakeMe.md b/ChatWithFakeMe.md
@@ -0,0 +1,7 @@
+---
+layout: chatbotLayout
+title: Chat with AI Ellen
+permalink: /Chatbot/
+---
+Chat with AI Ellen
+Please chat with the real Ellen through her email ([email protected])[[email protected]]
diff --git a/_config.yml b/_config.yml
@@ -13,14 +13,16 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: "Hello. I'm Jami Gibbs."
-email: '[email protected]'
-description: "I'm a software developer and designer from Chicago creating useful things for the web."
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "https://jamigibbs.github.io/phantom" # the base hostname & protocol for your site, e.g. https://example.com
-twitter_username: 'jamigibbs'
-github_username: 'jamigibbs'
-medium_username: 'blog.jamigibbs.com'
+avatar: '/img/favicon_1.png'
+title: "Hi, I'm Zhuoyang (Ellen) Li."
+email: '[email protected]'
+description: "I am a Human-Computer Interaction (HCI) researcher, currently a research assistant at BiWell Lab, City University of Hong Kong. My research interests lie in Conversational Agent (CA), Well-being, Persuasive Technology (PT) and Personal Informatics (PI). I will be joining TU/e in Feb 2025 for my PhD on personalized healthcare technology design. "
+baseurl: "/" # the subpath of your site, e.g. /blog
+url: "https://ellenli2000.github.io" # the base hostname & protocol for your site, e.g. https://example.com
+linkedin_username: 'in/ellenli2000'
+# github_username: 'ellenli2000'
+medium_username: 'medium.com/@lizhuoyang720'
+google_username: 'pFr4MykAAAAJ&hl=en'
 
 # Build settings
 markdown: kramdown
@@ -31,13 +33,17 @@ plugins:
 ############################################################
 # Site configuration for the Jekyll 3 Pagination Gem
 # The values here represent the defaults if nothing is set
+paginate: 10
+paginate_path: "/page:num/"
+
 pagination:
+
 
-  # Site-wide kill switch, disabled here it doesn't run at all 
-  enabled: true
+  # # Site-wide kill switch, disabled here it doesn't run at all 
+  # enabled: true
 
-  # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
-  debug: false
+  # # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
+  # debug: false
 
   # The default document collection to paginate if nothing is specified ('posts' is default)
   collection: 'posts'
@@ -89,13 +95,17 @@ pagination:
 ############################################################
 
 ### Phantom settings
-footer_text: '© 2018 Jami Gibbs'
-admin_name: 'Jami Gibbs'
-google_analytics: "UA-9999999-99" # Update with your own tracking ID
+footer_text: 'Last update: 13/12/2024.'
+admin_name: 'Zhuoyang (Ellen) Li'
+google_analytics: 'G-2SB2FYKLNH' # Update with your own tracking ID
 enable_contact: false
 
 #### Phantom Navigation menu
 enable_nav: true
 nav_item:
   - { url: '/', text: 'Home' }
-  - { url: '/about', text: 'About' }
+  - { url: '/about', text: 'About Me' }
+  - { url: '/pub', text: 'Publication' }
+  - { url: '/misc', text: 'Trivia'}
+  #- { url: '/Chatbot', text: 'Chat with AI Ellen 🤖️'}
+
diff --git a/_includes/analytics.html b/_includes/analytics.html
@@ -0,0 +1,8 @@
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.google_analytics }}');
+</script>
diff --git a/_includes/chatbot.html b/_includes/chatbot.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat with AI Ellen</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #fff;
+            color: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .chat-container {
+            width: 600px;
+            height: 600px;
+            background-color: #f4f4f9;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            margin: auto;
+        }
+        .chat-header {
+            background-color: #000;
+            color: #fff;
+            padding: 15px;
+            text-align: center;
+            font-size: 1.2em;
+        }
+        .chat-messages {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            border-bottom: 1px solid #ddd;
+        }
+        .chat-message {
+            display: flex;
+            align-items: flex-end;
+            margin-bottom: 15px;
+        }
+        .chat-message.user {
+            justify-content: flex-end;
+        }
+        .chat-message.bot {
+            justify-content: flex-start;
+        }
+        .chat-bubble {
+            max-width: 70%;
+            padding: 10px;
+            border-radius: 10px;
+            position: relative;
+        }
+        .chat-bubble.user {
+            background-color: #007bff;
+            color: #fff;
+            border-bottom-right-radius: 0;
+        }
+        .chat-bubble.bot {
+            background-color: #e5e5ea;
+            color: #000;
+            border-bottom-left-radius: 0;
+        }
+        .chat-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin: 0 10px;
+        }
+        .chat-footer {
+            display: flex;
+            border-top: 1px solid #ddd;
+            padding: 10px;
+            background-color: #f9f9f9;
+        }
+        .chat-input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #fff;
+            color: #000;
+        }
+        .chat-send-button {
+            background-color: #000;
+            color: #fff;
+            border: none;
+            padding: 10px 15px;
+            margin-left: 10px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+
+    <p> /
+         /
+         /
+         /
+        Hi there! I'm the AI version of Ellen (powered by GPT-4o), here to help you learn more about me. Whether you're curious about my background, interests, projects, or anything else, feel free to ask. I'm here 24/7 to provide you with the answers you need. If you have any specific questions or need to get in touch with the real me, please don't hesitate to contact me via email.</p>
+    <div class="chat-container">
+        <div class="chat-header">Chat with AI Ellen</div>
+        <div class="chat-messages" id="chatMessages"></div>
+        <div class="chat-footer">
+            <input type="text" id="chatInput" class="chat-input" placeholder="Type a message...">
+            <button class="chat-send-button" onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+
+    <script>
+        const chatMessages = document.getElementById('chatMessages');
+        const chatInput = document.getElementById('chatInput');
+        const apiKey = 'sk-SCkOINNIx2unGgZ3624e2b635e094988B3CfB1D002D504B0';
+
+        async function sendMessage() {
+            const userMessage = chatInput.value.trim();
+            if (!userMessage) return;
+
+            // Display user message
+            displayMessage(userMessage, 'user');
+            chatInput.value = '';
+
+            // Get bot response
+            try {
+                const botResponse = await getBotResponse(userMessage);
+                displayMessage(botResponse, 'bot');
+            } catch (error) {
+                displayMessage("Ellen hasn't bought GPT API, so currently, this function cannot work. But stay tuned!", 'bot');
+                console.error("Error fetching response: ", error);
+            }
+        }
+
+        function displayMessage(message, sender) {
+            const messageElement = document.createElement('div');
+            messageElement.classList.add('chat-message', sender);
+
+            const bubbleElement = document.createElement('div');
+            bubbleElement.classList.add('chat-bubble', sender);
+            bubbleElement.innerText = message;
+
+            const avatarElement = document.createElement('img');
+            avatarElement.classList.add('chat-avatar');
+            avatarElement.src = sender === 'user' ? 'https://via.placeholder.com/40?text=U' : '/img/favicon_1.png';
+
+            if (sender === 'user') {
+                messageElement.appendChild(bubbleElement);
+                messageElement.appendChild(avatarElement);
+            } else {
+                messageElement.appendChild(avatarElement);
+                messageElement.appendChild(bubbleElement);
+            }
+
+            chatMessages.appendChild(messageElement);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        async function getBotResponse(userMessage) {
+            const response = await fetch('fake', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: "gpt-4-1106-preview",
+                    messages: [
+                        {"role": "system", "content": "You are AI Ellen. You should always encourage users to contact Ellen through Email."},
+                        {"role": "user", "content": userMessage}
+                    ]
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (!data || !data.choices || !data.choices.length) {
+                throw new Error("Invalid response format");
+            }
+
+            return data.choices[0].message.content.trim();
+        }
+    </script>
+</body>
+</html>
diff --git a/_includes/contact-modal.html b/_includes/contact-modal.html
@@ -9,10 +9,10 @@
 
       <div class="modal-body">
 
-        <form class="form-horizontal form-contact clearfix" action="https://formspree.io/[email protected]" method="POST">
+        <form class="form-horizontal form-contact clearfix" action="https://formspree.io/f/mjvnrkko" method="POST">
 
           <div class="form-group">
-            <label class="message-label">Dear Jami,</label>
+            <label class="message-label">Hi Ellen,</label>
             <textarea class="message form-control" rows="8" name="body" placeholder="Type your message..."></textarea>
           </div>
 

diff --git a/_includes/contact.html b/_includes/contact.html
@@ -1 +1 @@
-<a data-toggle="modal" data-target="#contact"> Why not get in touch?</a>
+<a data-toggle="modal" data-target="#contact"> Feel free to contact me.</a>
diff --git a/_includes/content-left.html b/_includes/content-left.html
@@ -1,6 +1,6 @@
 <div class="content-wrap">
-
-  <div class="row">
+  
+  <div class="row post-row">  
 
     <div class="col-xs-12 col-md-6">
       {% include post-content.html %}

diff --git a/_includes/content-right.html b/_includes/content-right.html
@@ -1,6 +1,6 @@
 <div class="content-wrap">
 
-  <div class="row">
+  <div class="row post-row">
 
     <div class="col-xs-12 col-md-6">
       {% include featured-image.html %}

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,6 +1,8 @@
 <!doctype html>
 <head>
-
+{% if site.google_analytics and jekyll.environment == 'production' %}
+{% include analytics.html %}
+{% endif %}
   <!-- Meta -->
   <meta charset="utf-8">
 
@@ -15,7 +17,7 @@
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }} - {{ site.description }}" href="{{ site.url }}/atom.xml">
 
   <!-- Favicons -->
-  <link rel="icon" href="{{ site.url }}/img/favicon.png">
+  <link rel="icon" href="{{ site.url }}/img/favicon_1.png">
 
   <!-- Fonts -->
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700|Merriweather:400,300,300italic,400italic,700' rel='stylesheet' type='text/css'>

diff --git a/_includes/home-hero.html b/_includes/home-hero.html
@@ -8,34 +8,48 @@
 
         <div class="hero-content">
 
+          <div class="profile">
+
+          {% if site.avatar !='' %}
+          <img src="https://ellenli2000.github.io{{site.avatar}}"></img>
+            <p> </p>
+          {% endif %}
+
+            </div>
+
           {% if site.title != '' %}
-          <h1 class="text-center">{{site.title}}</h1>
+          <h2 class="text-center">{{site.title}}</h2>
           {% endif %}
 
-          {% if site.description != '' or site.enable_contact == true %}
+          {% if site.description != '' or site.enable_contact != '' %}
           <p class="text-center">
             {% if site.description != '' %}
             {{site.description}}
             {% endif %}
 
-            {% if site.enable_contact == true %}
+            {% if site.enable_contact != '' %}
             {% include contact.html %}
             {% include contact-modal.html %}
             {% endif %}
           </p>
           {% endif %}
 
           <div class="hero-buttons">
-
-            {% if site.twitter_username != '' %}
-              <a href="https://twitter.com/{{ site.twitter_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-twitter fa-lg"></i>Twitter</button></a>
+            {% if site.linkedin_username != '' %}
+              <a href="https://linkedin.com/{{ site.linkedin_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-lg"></i>LinkedIn</button></a>
             {% endif %}
-            {% if site.github_username != '' %}
+
+<!--             {% if site.github_username != '' %}
               <a href="https://github.com/{{ site.github_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-github fa-lg"></i>Github</button></a>
-            {% endif %}
+            {% endif %} -->
+
             {% if site.medium_username != '' %}
               <a href="https://{{ site.medium_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-medium fa-lg"></i>Medium</button></a>
             {% endif %}
+
+            {% if site.google_username != '' %}
+              <a href="https://scholar.google.com/citations?user={{ site.google_username }}"><button class="btn btn-default btn-lg"><i class="fa fa-google fa-lg"></i>Google Scholar</button></a>
+            {% endif %}
 
           </div>
 
@@ -45,7 +59,8 @@ <h1 class="text-center">{{site.title}}</h1>
 
       <a class="section-jump text-center" href="#portfolio">
         <i class="fa fa-angle-down fa-3x"></i>
-      </a>
+      </a> 
+      <h3 class = "text-center" style='margin:10'>Selected Work</h3>
 
     </div>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<a data-toggle="modal" data-target="#contact"> Why not get in touch?</a>
		<a data-toggle="modal" data-target="#contact"> Feel free to contact me.</a>