Skip to content

Commit d6565d0

Browse files
rohitdavasrohitdavas
committed
added the first cursor animation for code.
1 parent 2e4aa7c commit d6565d0

File tree

4 files changed

+65
-78
lines changed

4 files changed

+65
-78
lines changed

‎components/hero.html‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
<section id="home" class="hero">
2-
<div class="code-background">
3-
<div class="typing-container">
4-
<div class="code-line" data-text="import me">import me</div>
5-
<div class="code-line" data-text="me.whoIam()">me.whoIam()</div>
6-
<div class="code-line code-output" data-text=">>> &quot;Rohit&quot;">&gt;&gt;&gt; "Rohit"</div>
7-
<div class="typing-cursor"></div>
8-
</div>
1+
<div class="code-background">
2+
<div class="typing-container">
3+
<div class="code-line">import me</div>
4+
<div class="code-line">me.whoIam()</div>
5+
<div class="code-line code-output">&gt;&gt;&gt; "Rohit"</div>
96
</div>
10-
</section>
7+
</div>

‎index.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,25 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Rohit Kumar - Personal Website</title>
6+
<title>Rohit Kumar - AI Software Developer</title>
77
<link rel="stylesheet" href="styles.css">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
99
</head>
1010
<body>
1111
<!-- Components will be loaded here -->
1212
<div id="navbar-placeholder"></div>
13-
<div id="hero-placeholder"></div>
13+
14+
<!-- Hero Section -->
15+
<section id="home" class="hero">
16+
<div class="code-background">
17+
<div class="typing-container">
18+
<div class="code-line">import me</div>
19+
<div class="code-line">me.whoIam()</div>
20+
<div class="code-line code-output">&gt;&gt;&gt; "Rohit"</div>
21+
</div>
22+
</div>
23+
</section>
24+
1425
<div id="about-placeholder"></div>
1526
<div id="timeline-placeholder"></div>
1627
<div id="interests-placeholder"></div>

‎js/typing.js‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,47 @@
11
document.addEventListener('DOMContentLoaded', function() {
2+
const container = document.querySelector('.typing-container');
23
const lines = document.querySelectorAll('.code-line');
3-
const cursor = document.querySelector('.typing-cursor');
4+
5+
// Create cursor element
6+
const cursor = document.createElement('div');
7+
cursor.className = 'typing-cursor';
8+
container.appendChild(cursor);
9+
410
let currentLine = 0;
5-
11+
612
function updateCursorPosition() {
7-
const activeLine = document.querySelector('.code-line.typing');
13+
const activeLine = lines[currentLine];
814
if (activeLine) {
915
const lineRect = activeLine.getBoundingClientRect();
10-
const containerRect = document.querySelector('.typing-container').getBoundingClientRect();
16+
const containerRect = container.getBoundingClientRect();
17+
cursor.style.left = `${activeLine.offsetWidth}px`;
1118
cursor.style.top = `${lineRect.top - containerRect.top}px`;
12-
cursor.style.left = `${lineRect.left - containerRect.left + activeLine.offsetWidth}px`;
19+
20+
// Change cursor color for output line
21+
if (activeLine.classList.contains('code-output')) {
22+
cursor.classList.add('at-output');
23+
} else {
24+
cursor.classList.remove('at-output');
25+
}
1326
}
1427
}
1528

1629
function typeLine() {
1730
if (currentLine < lines.length) {
18-
lines[currentLine].classList.add('typing');
19-
20-
const typingDuration = 2000; // 2 seconds per line
21-
const lineDelay = 500; // 0.5 second delay between lines
22-
23-
// Update cursor position during typing
31+
// Start cursor animation for current line
2432
const cursorInterval = setInterval(updateCursorPosition, 50);
2533

34+
// After typing animation completes
2635
setTimeout(() => {
2736
clearInterval(cursorInterval);
2837
currentLine++;
2938
if (currentLine < lines.length) {
30-
setTimeout(typeLine, lineDelay);
39+
setTimeout(typeLine, 500); // Delay before next line
3140
}
32-
}, typingDuration);
41+
}, 2000); // Match with CSS animation duration
3342
}
3443
}
3544

36-
// Start typing
37-
typeLine();
45+
// Start typing after a short delay
46+
setTimeout(typeLine, 500);
3847
});

‎styles.css‎

Lines changed: 22 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,7 @@ body {
6363
display: flex;
6464
align-items: center;
6565
justify-content: center;
66-
text-align: center;
67-
background: #2b2b2b; /* Slightly lighter dark background */
68-
padding: 2rem;
66+
background: #2b2b2b;
6967
position: relative;
7068
overflow: hidden;
7169
}
@@ -76,80 +74,53 @@ body {
7674
left: 0;
7775
width: 100%;
7876
height: 100%;
79-
opacity: 0.3;
80-
font-family: 'Consolas', 'Monaco', monospace;
81-
color: #00ff9d;
82-
font-size: 1.5rem;
8377
display: flex;
8478
flex-direction: column;
8579
justify-content: center;
86-
padding-left: 5%; /* Just a small padding from the left edge */
80+
padding-left: 5%;
81+
font-family: 'Consolas', 'Monaco', monospace;
82+
color: #00ff9d;
83+
font-size: 1.5rem;
84+
z-index: 1;
85+
}
86+
87+
.typing-container {
88+
position: relative;
89+
width: fit-content;
8790
}
8891

8992
.code-line {
90-
width: auto;
91-
text-align: left;
93+
color: #00ff9d;
9294
white-space: pre;
93-
opacity: 0;
95+
margin-bottom: 0.5rem;
96+
position: relative;
97+
width: 0;
98+
overflow: hidden;
99+
animation: typing 2s steps(20, end) forwards;
94100
}
95101

96102
.code-line:nth-child(1) {
97-
padding-left: 1rem; /* Indent for class */
98-
opacity: 1;
103+
animation-delay: 0.5s;
99104
}
100105

101106
.code-line:nth-child(2) {
102-
padding-left: 1rem; /* Indent for method */
103-
opacity: 1;
107+
animation-delay: 2.5s;
104108
}
105109

106110
.code-line:nth-child(3) {
107-
padding-left: 1rem; /* Indent for output */
111+
animation-delay: 4.5s;
108112
color: #ff9d00;
109-
opacity: 1;
110-
}
111-
112-
.code-output {
113-
color: #00a2ff;
114-
}
115-
116-
.typing-container {
117-
position: relative;
118-
width: fit-content;
119-
padding: 1rem;
120-
font-family: 'Consolas', 'Monaco', monospace;
121-
}
122-
123-
.code-line {
124-
width: auto;
125-
text-align: left;
126-
white-space: pre;
127-
color: #00ff9d;
128-
overflow: hidden;
129-
position: relative;
130-
display: none;
131-
}
132-
133-
.code-line.typing {
134-
display: block;
135-
animation: typing 2s steps(30, end);
136113
}
137114

138115
.typing-cursor {
139116
position: absolute;
140117
width: 2px;
141118
height: 1.2em;
142119
background-color: #00ff9d;
143-
left: 1rem;
144-
top: 1rem;
145120
animation: blink 0.7s infinite;
146121
}
147122

148-
.code-line.code-output {
149-
color: #ff9d00;
150-
}
151-
152-
.code-line.code-output + .typing-cursor {
123+
.typing-cursor.at-output {
153124
background-color: #ff9d00;
154125
}
155126

@@ -159,8 +130,7 @@ body {
159130
}
160131

161132
@keyframes blink {
162-
0%, 100% { opacity: 1; }
163-
50% { opacity: 0; }
133+
50% { opacity: 0 }
164134
}
165135

166136
.hero-content {

0 commit comments

Comments
 (0)