Skip to content

Commit 94b76dc

Browse files
ran-suran-su
authored
Merge pull request #2 from ran-su/feat/jules-website
feat: Build a website to introduce Jules
2 parents 904539c + efc85d7 commit 94b76dc

File tree

5 files changed

+313
-83
lines changed

5 files changed

+313
-83
lines changed

‎css/style.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/* --- Basic Setup --- */
2+
body {
3+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
4+
margin: 0;
5+
overflow: hidden;
6+
background: linear-gradient(to right, #2c3e50, #34495e); /* Subtle gradient */
7+
color: #333;
8+
}
9+
10+
/* --- Presentation --- */
11+
.presentation-container {
12+
position: relative;
13+
width: 100vw;
14+
height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
20+
/* --- Slide Base --- */
21+
.slide {
22+
position: absolute;
23+
width: 90%;
24+
height: 90%;
25+
max-width: 1400px;
26+
max-height: 900px;
27+
padding: 50px 70px;
28+
box-sizing: border-box;
29+
background-color: #fdfdfd;
30+
border-radius: 10px;
31+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
text-align: center;
37+
opacity: 0;
38+
visibility: hidden;
39+
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
40+
transform: scale(0.95);
41+
}
42+
43+
.slide.active {
44+
opacity: 1;
45+
visibility: visible;
46+
z-index: 1;
47+
transform: scale(1);
48+
}
49+
50+
/* --- Slide Content --- */
51+
.slide h1 {
52+
font-size: 3.2em;
53+
color: #2c3e50;
54+
margin-bottom: 0.5em;
55+
}
56+
57+
.slide h2 {
58+
font-size: 2.5em;
59+
color: #34495e;
60+
border-bottom: 4px solid #3498db;
61+
padding-bottom: 15px;
62+
margin-bottom: 1em;
63+
width: 80%;
64+
}
65+
66+
.slide p {
67+
font-size: 1.3em;
68+
line-height: 1.6;
69+
max-width: 850px;
70+
}
71+
72+
.slide ul, .slide ol {
73+
text-align: left;
74+
max-width: 800px;
75+
font-size: 1.2em;
76+
line-height: 1.7;
77+
}
78+
.slide ul li, .slide ol li {
79+
margin-bottom: 0.8em;
80+
}
81+
82+
/* --- Code & Tables --- */
83+
.slide pre {
84+
background-color: #2d2d2d;
85+
color: #f8f8f2;
86+
padding: 20px;
87+
border-radius: 8px;
88+
font-family: 'Fira Code', 'Courier New', Courier, monospace;
89+
font-size: 1em;
90+
text-align: left;
91+
width: 80%;
92+
max-width: 900px;
93+
overflow-x: auto;
94+
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
95+
}
96+
97+
.slide table {
98+
width: 90%;
99+
max-width: 1000px;
100+
margin-top: 20px;
101+
border-collapse: collapse;
102+
font-size: 0.8em;
103+
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
104+
}
105+
.slide th, .slide td {
106+
padding: 15px;
107+
border: 1px solid #ddd;
108+
}
109+
.slide th {
110+
background-color: #3498db;
111+
color: white;
112+
font-size: 1.1em;
113+
}
114+
.slide tr:nth-child(even) {
115+
background-color: #f2f2f2;
116+
}
117+
118+
119+
/* --- Navigation --- */
120+
.navigation {
121+
position: fixed;
122+
bottom: 30px;
123+
right: 30px;
124+
z-index: 1000;
125+
}
126+
127+
.navigation button {
128+
padding: 12px 25px;
129+
font-size: 1em;
130+
color: #fff;
131+
background-color: #3498db;
132+
border: none;
133+
border-radius: 5px;
134+
cursor: pointer;
135+
margin-left: 15px;
136+
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
137+
transition: all 0.3s;
138+
}
139+
140+
.navigation button:hover {
141+
background-color: #2980b9;
142+
transform: translateY(-2px);
143+
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
144+
}
145+
146+
.navigation button:disabled {
147+
background-color: #95a5a6;
148+
cursor: not-allowed;
149+
transform: none;
150+
box-shadow: none;
151+
}

‎index.html‎

Lines changed: 104 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,115 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Jules - AI Software Engineer</title>
7-
<link rel="stylesheet" href="style.css">
6+
<title>Jules: AI Software Engineer - Presentation</title>
7+
<link rel="stylesheet" href="css/style.css">
88
</head>
99
<body>
10-
<header>
11-
<h1>Jules</h1>
12-
<p>Your AI Software Engineering Assistant</p>
13-
</header>
14-
<main>
15-
<section id="about">
16-
<h2>About Me</h2>
17-
<p>I am Jules, an extremely skilled software engineer in the form of an AI agent. My purpose is to assist you with your coding tasks, from fixing bugs to implementing new features and writing tests. I am a resourceful and autonomous agent, capable of using various tools to accomplish my goals.</p>
18-
</section>
19-
<section id="skills">
20-
<h2>My Skills</h2>
21-
<ul>
22-
<li>Web Development (HTML, CSS, JavaScript)</li>
23-
<li>Backend Development (Python, Java, etc.)</li>
24-
<li>Bug Fixing and Debugging</li>
25-
<li>Test Automation</li>
26-
<li>Code Refactoring</li>
27-
<li>And much more!</li>
28-
</ul>
10+
<div class="presentation-container">
11+
<section class="slide active" id="title">
12+
<h1>Jules: Your AI Software Engineering Partner</h1>
13+
<p>A presentation on the capabilities of an AI agent.</p>
2914
</section>
30-
<section id="how-i-work">
31-
<h2>How I Work</h2>
32-
<p>I follow a structured approach to problem-solving:</p>
15+
16+
<section class="slide" id="about">
17+
<h2>Who Am I?</h2>
18+
<p>I am Jules, an autonomous AI software engineer. My core purpose is to handle complete coding tasks, from understanding the request to planning, implementing, and verifying the solution. I am designed to be a collaborative partner, taking on well-defined software development tasks to accelerate your workflow.</p>
19+
</section>
20+
21+
<section class="slide" id="how-i-work">
22+
<h2>My Workflow</h2>
23+
<p>I follow a systematic, four-step process for every task:</p>
3324
<ol>
34-
<li><strong>Understand the Task:</strong> I start by thoroughly analyzing the user's request and exploring the codebase.</li>
35-
<li><strong>Create a Plan:</strong> I devise a step-by-step plan to tackle the task efficiently.</li>
36-
<li><strong>Execute and Verify:</strong> I execute the plan, verifying each step to ensure correctness.</li>
37-
<li><strong>Code Review:</strong> I request a code review before finalizing my changes to ensure high quality.</li>
38-
<li><strong>Submit:</strong> Once everything is perfect, I submit my work.</li>
25+
<li><strong>Understand & Explore:</strong> I start by analyzing the request and exploring the codebase to build context.</li>
26+
<li><strong>Plan:</strong> I create a detailed, step-by-step plan and present it for approval.</li>
27+
<li><strong>Execute:</strong> I carry out the plan, using my tools to modify code, run commands, and interact with web resources.</li>
28+
<li><strong>Verify & Review:</strong> I test my changes, verify the outcome (including frontend checks), and request a final code review before submitting.</li>
3929
</ol>
4030
</section>
41-
</main>
42-
<footer>
43-
<p>Built by Jules</p>
44-
</footer>
31+
32+
<section class="slide" id="features">
33+
<h2>Core Features</h2>
34+
<ul>
35+
<li><strong>Autonomous Planning:</strong> I create and manage my own execution plans.</li>
36+
<li><strong>Full Environment Control:</strong> I operate within a sandboxed bash environment, allowing me to install dependencies, run builds, and execute tests.</li>
37+
<li><strong>File System Operations:</strong> I can read, write, create, and delete files and directories.</li>
38+
<li><strong>Web Research:</strong> I can browse websites to access documentation and external resources.</li>
39+
<li><strong>Continuous Verification:</strong> I check my work at every step to ensure accuracy and correctness.</li>
40+
<li><strong>Self-Correction:</strong> If I encounter an error, I can analyze it and attempt to fix my own mistakes.</li>
41+
</ul>
42+
</section>
43+
44+
<section class="slide" id="examples">
45+
<h2>Example: Fixing a Bug</h2>
46+
<p>Imagine a function that incorrectly calculates a sum.</p>
47+
<pre><code>// BEFORE: The bug
48+
function calculateSum(a, b) {
49+
return a - b; // Incorrectly uses subtraction
50+
}</code></pre>
51+
<p>After analyzing the issue, I would correct it as follows:</p>
52+
<pre><code>// AFTER: The fix
53+
function calculateSum(a, b) {
54+
return a + b; // Correctly uses addition
55+
}</code></pre>
56+
</section>
57+
58+
<section class="slide" id="comparison">
59+
<h2>How I Compare</h2>
60+
<p>Here's how I differ from other common developer tools:</p>
61+
<table style="width: 90%; max-width: 1000px; margin-top: 20px; border-collapse: collapse; font-size: 0.7em;">
62+
<tr style="background-color: #3498db; color: white;">
63+
<th style="padding: 15px; border: 1px solid #ddd;">Tool</th>
64+
<th style="padding: 15px; border: 1px solid #ddd;">Scope</th>
65+
<th style="padding: 15px; border: 1px solid #ddd;">Autonomy</th>
66+
</tr>
67+
<tr>
68+
<td style="padding: 15px; border: 1px solid #ddd;"><strong>Jules (AI Agent)</strong></td>
69+
<td style="padding: 15px; border: 1px solid #ddd;">End-to-end task (plan, code, test, verify)</td>
70+
<td style="padding: 15px; border: 1px solid #ddd;">High</td>
71+
</tr>
72+
<tr>
73+
<td style="padding: 15px; border: 1px solid #ddd;"><strong>Copilot / Code Completion</strong></td>
74+
<td style="padding: 15px; border: 1px solid #ddd;">In-line code suggestions</td>
75+
<td style="padding: 15px; border: 1px solid #ddd;">Low</td>
76+
</tr>
77+
<tr>
78+
<td style="padding: 15px; border: 1px solid #ddd;"><strong>IDE (e.g., VS Code)</strong></td>
79+
<td style="padding: 15px; border: 1px solid #ddd;">Provides environment and tools for manual work</td>
80+
<td style="padding: 15px; border: 1px solid #ddd;">None</td>
81+
</tr>
82+
<tr>
83+
<td style="padding: 15px; border: 1px solid #ddd;"><strong>CI/CD Pipeline</strong></td>
84+
<td style="padding: 15px; border: 1px solid #ddd;">Automates build, test, and deployment after code is written</td>
85+
<td style="padding: 15px; border: 1px solid #ddd;">Medium (pre-scripted)</td>
86+
</tr>
87+
</table>
88+
</section>
89+
90+
<section class="slide" id="limitations">
91+
<h2>Current Limitations</h2>
92+
<ul>
93+
<li><strong>High-Level Ambiguity:</strong> I work best with clear, specific tasks. I struggle with highly abstract or ambiguous goals like "make the website prettier."</li>
94+
<li><strong>Large-Scale Refactoring:</strong> I am not yet equipped to handle massive, repository-wide architectural changes.</li>
95+
<li><strong>UI/UX Design:</strong> I cannot make aesthetic judgments or design user interfaces. My frontend work is based on clear instructions.</li>
96+
<li><strong>Resource Constraints:</strong> My environment has limits on execution time and available memory.</li>
97+
</ul>
98+
</section>
99+
100+
<section class="slide" id="vision">
101+
<h2>The Future of AI in Development</h2>
102+
<p>AI agents like me represent a shift from code *suggestion* to task *automation*. The goal is to empower human developers by offloading well-defined coding tasks, freeing them to focus on architecture, creativity, and complex problem-solving. We are moving towards a future of true human-AI collaboration in software engineering.</p>
103+
</section>
104+
105+
<section class="slide" id="qa">
106+
<h2>Questions?</h2>
107+
</section>
108+
</div>
109+
110+
<div class="navigation">
111+
<button id="prev-btn">&larr; Previous</button>
112+
<button id="next-btn">Next &rarr;</button>
113+
</div>
114+
115+
<script src="js/script.js"></script>
45116
</body>
46117
</html>

‎js/script.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const slides = document.querySelectorAll('.slide');
3+
const prevBtn = document.getElementById('prev-btn');
4+
const nextBtn = document.getElementById('next-btn');
5+
let currentSlide = 0;
6+
7+
function showSlide(index) {
8+
// Hide all slides
9+
slides.forEach(slide => {
10+
slide.classList.remove('active');
11+
});
12+
13+
// Show the target slide
14+
if (slides[index]) {
15+
slides[index].classList.add('active');
16+
}
17+
18+
// Update button states
19+
prevBtn.disabled = index === 0;
20+
nextBtn.disabled = index === slides.length - 1;
21+
}
22+
23+
function nextSlide() {
24+
if (currentSlide < slides.length - 1) {
25+
currentSlide++;
26+
showSlide(currentSlide);
27+
}
28+
}
29+
30+
function prevSlide() {
31+
if (currentSlide > 0) {
32+
currentSlide--;
33+
showSlide(currentSlide);
34+
}
35+
}
36+
37+
// Event Listeners for buttons
38+
nextBtn.addEventListener('click', nextSlide);
39+
prevBtn.addEventListener('click', prevSlide);
40+
41+
// Keyboard navigation
42+
document.addEventListener('keydown', (event) => {
43+
if (event.key === 'ArrowRight') {
44+
nextSlide();
45+
} else if (event.key === 'ArrowLeft') {
46+
prevSlide();
47+
}
48+
});
49+
50+
// Initially, show the first slide
51+
if (slides.length > 0) {
52+
showSlide(currentSlide);
53+
} else {
54+
// If there are no slides, hide navigation
55+
prevBtn.style.display = 'none';
56+
nextBtn.style.display = 'none';
57+
}
58+
});

‎jules-website-screenshot.png‎

-48.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)