Skip to content

Commit 06fb765

Browse files
subhayu99subhayu99
committed
feat: redesign terminal welcome screen
- **New "Quick Overview" Section:** - Displays key information at a glance in a styled box, including name, role, location, and contact details. - Adds a direct link to the resume PDF, supported by a new `resume_url` field in the data source (`resume.yaml`) and schema. - **Interactive Core Commands:** - The list of essential commands is now presented as clickable links. - Clicking a command auto-fills and executes it, significantly improving usability and discoverability. - Each command is paired with a short description for clarity. - **Improved Layout and Polish:** - The welcome message is now more structured and visually appealing with a dynamic ASCII art header. - The phone number is sanitized for use in `tel:` links. This commit completely overhauls the terminal's welcome screen to provide a richer, more interactive, and informative initial experience for users.
1 parent 80b6d41 commit 06fb765

4 files changed

Lines changed: 95 additions & 12 deletions

File tree

‎client/public/data/resume.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"cv": {
33
"name": "Subhayu Kumar Bala",
4+
"resume_url": "https://subhayu99.github.io/resume.pdf",
45
"location": "Kolkata, India",
56
"email": "balasubhayu99@gmail.com",
67
"phone": "tel:+91-9382877751",

‎client/public/data/resume.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ cv:
44
email: "balasubhayu99@gmail.com"
55
phone: "tel:+91-9382877751"
66
website: "https://subhayu99.github.io/"
7+
resume_url: "https://subhayu99.github.io/resume.pdf"
78
social_networks:
89
- network: "LinkedIn"
910
username: "subhayu-kumar-bala"

‎client/src/components/Terminal.tsx‎

Lines changed: 92 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default function Terminal() {
2525
retry: 3,
2626
staleTime: 5 * 60 * 1000, // 5 minutes
2727
});
28+
const sanitizedPhone = portfolioData?.cv.phone.replace(/[^\d+]/g, '');
2829

2930
const {
3031
lines,
@@ -274,8 +275,9 @@ export default function Terminal() {
274275
onClick={handleTerminalClick}
275276
>
276277
{/* Welcome Screen */}
277-
{showWelcome && (
278+
{showWelcome && portfolioData && (
278279
<div className="mb-4 sm:mb-6">
280+
{/* ASCII Art Header */}
279281
<div className="mb-3 sm:mb-4">
280282
<pre className="text-terminal-bright-green text-xs leading-tight overflow-x-auto hidden sm:block">
281283
{` ___ _ _ _ __ ___ _
@@ -284,31 +286,109 @@ export default function Terminal() {
284286
|___/\\_,_|_.__/_||_\\__,_|\\_, |\\_,_| |_|\\_\\_,_|_|_|_\\__,_|_| |___/\\__,_|_\\__,_|
285287
|__/ `}
286288
</pre>
287-
{/* Mobile version - simplified ASCII */}
288289
<div className="sm:hidden text-terminal-bright-green text-center mb-3">
289-
<div className="text-lg font-bold">SUBHAYU KUMAR BALA</div>
290+
<div className="text-lg font-bold">{portfolioData.cv.name.toUpperCase()}</div>
290291
<div className="text-sm">TERMINAL PORTFOLIO</div>
291292
</div>
292293
</div>
293-
<div className="mb-4 sm:mb-6">
294+
295+
{/* Main Introduction */}
296+
<div className="mb-4">
294297
<p className="text-terminal-green mb-2 text-sm sm:text-base">Welcome to my portfolio!</p>
295298
<p className="text-white/80 mb-2 text-xs sm:text-sm leading-relaxed">
296299
{portfolioData ?
297-
`Hello! I'm ${portfolioData.cv.name}, a ${portfolioData.cv.sections.intro[0]}.` :
298-
"Loading professional information..."
300+
`${portfolioData.cv.sections.intro[0]}` : "Loading professional information..."
299301
}
300302
</p>
301-
<div className="mb-4 text-xs sm:text-sm space-y-2">
302-
<p className="text-terminal-bright-green">
303-
Essential commands: <span className="font-bold">about</span>, <span className="font-bold">skills</span>, <span className="font-bold">experience</span>, <span className="font-bold">projects</span>, <span className="font-bold">contact</span>, <span className="font-bold">help</span>.
304-
Type '<span className="font-bold">help</span>' to see available commands or explore with tab completion.
305-
</p>
303+
</div>
304+
305+
{/* Quick Overview Box */}
306+
<div className="border border-terminal-green/50 rounded-sm mb-4 terminal-glow">
307+
<div className="border-b border-terminal-green/30 px-3 py-1">
308+
<span className="text-terminal-bright-green text-sm font-bold">QUICK OVERVIEW</span>
309+
</div>
310+
<div className="p-3 space-y-1 text-xs sm:text-sm">
311+
<div className="flex">
312+
<span className="text-terminal-yellow w-16 font-bold">USER</span>
313+
<span className="text-white">{portfolioData?.cv.name}</span>
314+
</div>
315+
<div className="flex">
316+
<span className="text-terminal-yellow w-16 font-bold">ROLE</span>
317+
<span className="text-white">{portfolioData?.cv.sections.experience[0].position}</span>
318+
</div>
319+
<div className="flex">
320+
<span className="text-terminal-yellow w-16 font-bold">LOC</span>
321+
<span className="text-white">{portfolioData?.cv.location}</span>
322+
</div>
323+
<div className="flex">
324+
<span className="text-terminal-yellow w-16 font-bold">WEB</span>
325+
<span className="text-terminal-green"><a href={portfolioData?.cv.website} className="hover:text-terminal-bright-green hover:underline transition-colors duration-200">{portfolioData?.cv.website}</a></span>
326+
</div>
327+
<div className="flex">
328+
<span className="text-terminal-yellow w-16 font-bold">EMAIL</span>
329+
<span className="text-terminal-green"><a href={`mailto:${portfolioData?.cv.email}`} className="hover:text-terminal-bright-green hover:underline transition-colors duration-200">{portfolioData?.cv.email}</a></span>
330+
</div>
331+
<div className="flex">
332+
<span className="text-terminal-yellow w-16 font-bold">RESUME</span>
333+
<span className="text-terminal-green"><a href={portfolioData?.cv.resume_url} className="hover:text-terminal-bright-green hover:underline transition-colors duration-200">resume.pdf</a></span>
334+
</div>
335+
<div className="flex">
336+
<span className="text-terminal-yellow w-16 font-bold">PHONE</span>
337+
<span className="text-terminal-green"><a href={`tel:${sanitizedPhone}`} className="hover:text-terminal-bright-green hover:underline transition-colors duration-200">{sanitizedPhone}</a></span>
338+
</div>
339+
</div>
340+
</div>
341+
342+
{/* Core Commands Section */}
343+
<div className="mb-4">
344+
<p className="text-terminal-green mb-2 text-sm sm:text-base">
345+
🚀 Start exploring with these core commands (or click them):
346+
</p>
347+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm">
348+
<div className="flex items-center space-x-2">
349+
<span className="text-terminal-bright-green">→</span>
350+
<span className="text-terminal-yellow font-bold"><a href="?cmd=about" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">about</a></span>
351+
<span className="text-white/80">learn more about me</span>
352+
</div>
353+
<div className="flex items-center space-x-2">
354+
<span className="text-terminal-bright-green">→</span>
355+
<span className="text-terminal-yellow font-bold"><a href="?cmd=skills" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">skills</a></span>
356+
<span className="text-white/80">view technical expertise</span>
357+
</div>
358+
<div className="flex items-center space-x-2">
359+
<span className="text-terminal-bright-green">→</span>
360+
<span className="text-terminal-yellow font-bold"><a href="?cmd=experience" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">experience</a></span>
361+
<span className="text-white/80">see professional work</span>
362+
</div>
363+
<div className="flex items-center space-x-2">
364+
<span className="text-terminal-bright-green">→</span>
365+
<span className="text-terminal-yellow font-bold"><a href="?cmd=projects" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">projects</a></span>
366+
<span className="text-white/80">see professional projects</span>
367+
</div>
368+
<div className="flex items-center space-x-2">
369+
<span className="text-terminal-bright-green">→</span>
370+
<span className="text-terminal-yellow font-bold"><a href="?cmd=personal" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">personal</a></span>
371+
<span className="text-white/80">see personal projects</span>
372+
</div>
373+
<div className="flex items-center space-x-2">
374+
<span className="text-terminal-bright-green">→</span>
375+
<span className="text-terminal-yellow font-bold"><a href="?cmd=contact" className="hover:text-terminal-bright-yellow hover:underline transition-colors duration-200">contact</a></span>
376+
<span className="text-white/80">display contact details</span>
377+
</div>
378+
</div>
379+
</div>
380+
381+
{/* Tips Section */}
382+
<div className="text-xs sm:text-sm space-y-2">
383+
<div className="flex items-center space-x-2 text-terminal-green/80">
384+
<span>💡</span>
385+
<span>Type <span className="font-bold text-terminal-bright-green">help</span> for all commands</span>
386+
</div>
306387
{/* {isInstallable && (
307388
<p className="text-terminal-yellow">
308389
💡 Install this portfolio as an app for offline access and better performance!
309390
</p>
310391
)} */}
311-
</div>
312392
</div>
313393
</div>
314394
)}

‎shared/schema.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const publicationSchema = z.object({
4646
export const portfolioSchema = z.object({
4747
cv: z.object({
4848
name: z.string(),
49+
resume_url: z.string(),
4950
location: z.string(),
5051
email: z.string(),
5152
phone: z.string(),

0 commit comments

Comments
 (0)