Skip to content

Commit c6ba22c

Browse files
hmukesh5hmukesh5
committed
made letter spacing even tighter
(only on mobile)
1 parent 621401b commit c6ba22c

File tree

2 files changed

+26
-26
lines changed

2 files changed

+26
-26
lines changed

‎src/App.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -286,69 +286,69 @@ function App() {
286286
<br/><br/>
287287
Server Status: <span className={`font-bold ${statusclass}`}>{serverstatus}</span>
288288
<div className="mt-8" />
289-
<span className="font-heading tracking-tight sm:tracking-normal font-bold">DNS Lookup:</span>
289+
<span className="font-heading tracking-tighter sm:tracking-normal font-bold">DNS Lookup:</span>
290290
<br/>
291291
<p className="mb-2">
292292
DNS stands for Domain Name Service.
293293
It allows applications to lookup the IP addresses of domains like "youtube.com" so that it can connect to YouTube's servers.
294294
Below, you can lookup those IP addresses yourself on {googleDNSLink}.
295295
Try typing in "google.com", or this website, "hmukesh.me".
296296
</p>
297-
<div className="font-heading tracking-tight sm:tracking-normal">
298-
<span className='font-heading tracking-tight sm:tracking-normal'>Domain/IP:</span>
297+
<div className="font-heading tracking-tighter sm:tracking-normal">
298+
<span className='font-heading tracking-tighter sm:tracking-normal'>Domain/IP:</span>
299299
<div>
300-
<input id="dnslookuptext" type="text" name="query" placeholder='ex "google.com"' className={`font-heading tracking-tight sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-64 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
300+
<input id="dnslookuptext" type="text" name="query" placeholder='ex "google.com"' className={`font-heading tracking-tighter sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-64 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
301301
<button disabled={dnsLookupDisable} onClick={handleDNSLookupSubmit} className={`mt-2 px-2 border-2 border-black rounded sm:text-sm text-xs ${darkMode ? 'border-neutral-200 hover:bg-neutral-200 hover:text-black' : 'border-neutral-900 hover:bg-neutral-900 hover:text-neutral-200'}`}>run</button>
302302
</div>
303-
<span className='font-heading tracking-tight sm:tracking-normal'>Output:</span>
303+
<span className='font-heading tracking-tighter sm:tracking-normal'>Output:</span>
304304
<br/>
305-
<textarea className={`font-heading tracking-tight sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
305+
<textarea className={`font-heading tracking-tighter sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
306306
placeholder='output will appear here...'
307307
value={dnsLookupResult}
308308
>
309309
</textarea>
310310
</div>
311311

312312
<div className="mt-4">
313-
<span className="font-heading tracking-tight sm:tracking-normal font-bold">HTTP Packet Sender and Parser:</span>
313+
<span className="font-heading tracking-tighter sm:tracking-normal font-bold">HTTP Packet Sender and Parser:</span>
314314
<p className="mb-2">
315315
A HTTP Packet sender and parser that validates, sends, and parses HTTP packets, displaying details about the entire process (including a DNS lookup, shown above).
316316
One of the key features is that it can parse through the HTTP reply and extract the number of outgoing links, laying the foundation for a web crawler.
317317
Try typing in "http://google.com" to see the HTTP response from the home page of Google.
318318
</p>
319319

320-
<span className='font-heading tracking-tight sm:tracking-normal'>URL:</span>
320+
<span className='font-heading tracking-tighter sm:tracking-normal'>URL:</span>
321321
<div>
322-
<input id="httpapptext" type="text" name="query" placeholder='ex "http://google.com"' className={`font-heading tracking-tight sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-64 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
322+
<input id="httpapptext" type="text" name="query" placeholder='ex "http://google.com"' className={`font-heading tracking-tighter sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-64 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
323323
<button disabled={HTTPAppDisable} onClick={handleHTTPSubmit} className={`mt-2 px-2 border-2 border-black rounded sm:text-sm text-xs ${darkMode ? 'border-neutral-200 hover:bg-neutral-200 hover:text-black' : 'border-neutral-900 hover:bg-neutral-900 hover:text-neutral-200'}`}>run</button>
324324
</div>
325-
<span className='font-heading tracking-tight sm:tracking-normal'>Output:</span>
325+
<span className='font-heading tracking-tighter sm:tracking-normal'>Output:</span>
326326
<br/>
327-
<textarea className={`font-heading tracking-tight sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
327+
<textarea className={`font-heading tracking-tighter sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
328328
placeholder='output will appear here...'
329329
value={HTTPAppResult}
330330
>
331331
</textarea>
332332
</div>
333333

334334
<div className="mt-4">
335-
<span className="font-heading tracking-tight sm:tracking-normal font-bold">TCP Demonstration:</span>
335+
<span className="font-heading tracking-tighter sm:tracking-normal font-bold">TCP Demonstration:</span>
336336
<p className="mb-2">
337337
TCP stands for Transmission Control Protocol, and it's widely used for reliable data transfer.
338338
Although not fast enough for videos or games, this protocol ensures that all packets are delivered by re-transmitting lost packets.
339339
Below, you can edit the forward and reverse loss rate of a TCP transfer and observe the effects.
340340
Input 2 numbers between 0 and 1.
341341
</p>
342342

343-
<span className='font-heading tracking-tight sm:tracking-normal'>Loss Rate:</span>
343+
<span className='font-heading tracking-tighter sm:tracking-normal'>Loss Rate:</span>
344344
<div>
345-
<input id="forwardloss" type="number" name="query" placeholder='forward loss' className={`font-heading tracking-tight sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-32 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
346-
<input id="reverseloss" type="number" name="query" placeholder='reverse loss' className={`font-heading tracking-tight sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-32 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
345+
<input id="forwardloss" type="number" name="query" placeholder='forward loss' className={`font-heading tracking-tighter sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-32 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
346+
<input id="reverseloss" type="number" name="query" placeholder='reverse loss' className={`font-heading tracking-tighter sm:tracking-normal mt-2 mb-2 mr-2 px-2 border-2 border-neutral-500 rounded w-32 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} />
347347
<button disabled={TCPAppDisable} onClick={handleTCPSubmit} className={`mt-2 px-2 border-2 border-black rounded sm:text-sm text-xs ${darkMode ? 'border-neutral-200 hover:bg-neutral-200 hover:text-black' : 'border-neutral-900 hover:bg-neutral-900 hover:text-neutral-200'}`}>run</button>
348348
</div>
349-
<span className='font-heading tracking-tight sm:tracking-normal'>Output:</span>
349+
<span className='font-heading tracking-tighter sm:tracking-normal'>Output:</span>
350350
<br/>
351-
<textarea className={`font-heading tracking-tight sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
351+
<textarea className={`font-heading tracking-tighter sm:tracking-normal mt-2 px-2 py-1 border-2 border-neutral-500 rounded w-full h-80 sm:text-sm text-xs ${darkMode ? 'bg-neutral-900' : ''}`} readOnly
352352
placeholder='output will appear here...'
353353
value={TCPAppResult}
354354
>
@@ -375,15 +375,15 @@ function App() {
375375
<div className="min-h-screen max-w-4xl mx-auto py-6 sm:py-8 px-4 sm:px-6">
376376

377377
<div className="mb-4">
378-
<p className="font-semibold text-4xl sm:text-5xl font-heading tracking-tight sm:tracking-normal">Hemanth Mukesh</p>
378+
<p className="font-semibold text-4xl sm:text-5xl font-heading tracking-tighter sm:tracking-normal">Hemanth Mukesh</p>
379379
</div>
380380

381381
<div className="mt-5 mb-5 sm:mt-6 sm:mb-6 flex justify-between w-16 sm:w-24 items-center">
382382
<a className={darkMode ? "invert" : ""} href="https://linkedin.com/in/hmukesh5" target="_blank"><img src={linkedin} className="w-6 sm:w-8"></img></a>
383383
<a className={darkMode ? "invert" : ""} href="https://github.com/hmukesh5" target="_blank"><img src={github} className="w-6 sm:w-8"></img></a>
384384
</div>
385385

386-
<h3 className="font-bold text-xl sm:text-2xl font-heading tracking-tight sm:tracking-normal mb-1 sm:mb-2">about</h3>
386+
<h3 className="font-bold text-xl sm:text-2xl font-heading tracking-tighter sm:tracking-normal mb-1 sm:mb-2">about</h3>
387387
<div className="mb-3 text-base sm:text-xl font-body">
388388
<p>Hello! My name is Hemanth Mukesh, and I'm a computer science senior at Texas A&M University.
389389
This website serves to showcase my work throughout college.
@@ -393,7 +393,7 @@ function App() {
393393

394394
<div className="max-w-fit">
395395
<div className="flex align-middle mb-3 sm:mb-4 mt-5 sm:mt-6">
396-
<h3 className="font-bold text-xl sm:text-2xl font-heading tracking-tight sm:tracking-normal">projects</h3>
396+
<h3 className="font-bold text-xl sm:text-2xl font-heading tracking-tighter sm:tracking-normal">projects</h3>
397397
<button onClick={expandAll} className={`ml-4 border-black border-2 rounded text-base px-2 ${darkMode ? 'border-neutral-200 hover:bg-neutral-200 hover:text-black' : 'border-neutral-900 hover:bg-neutral-900 hover:text-neutral-200'}`}>
398398
{expandedItems.length === websites.length + games.length + other.length + ai.length ? "collapse all" :
399399
expandedItems.length == 0 ? "expand all" : "expand rest"}
@@ -402,7 +402,7 @@ function App() {
402402

403403
<Accordion.Root value={expandedItems} type='multiple' className="flex flex-col gap-2 sm:gap-3">
404404

405-
<h1 className={`text-base sm:text-xl font-heading tracking-tight sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'}`}>websites</h1>
405+
<h1 className={`text-base sm:text-xl font-heading tracking-tighter sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'}`}>websites</h1>
406406
{websites.map(project => (
407407
<Project
408408
value={project.value}
@@ -415,7 +415,7 @@ function App() {
415415
/>
416416
))}
417417

418-
<h1 className={`text-base sm:text-xl font-heading tracking-tight sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>ai</h1>
418+
<h1 className={`text-base sm:text-xl font-heading tracking-tighter sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>ai</h1>
419419
{ai.map(project => (
420420
<Project
421421
value={project.value}
@@ -428,7 +428,7 @@ function App() {
428428
/>
429429
))}
430430

431-
<h1 className={`text-base sm:text-xl font-heading tracking-tight sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>python</h1>
431+
<h1 className={`text-base sm:text-xl font-heading tracking-tighter sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>python</h1>
432432
{games.map(project => (
433433
<Project
434434
value={project.value}
@@ -441,7 +441,7 @@ function App() {
441441
/>
442442
))}
443443

444-
<h1 className={`text-base sm:text-xl font-heading tracking-tight sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>c++</h1>
444+
<h1 className={`text-base sm:text-xl font-heading tracking-tighter sm:tracking-normal ${darkMode ? 'text-neutral-400' : 'text-neutral-600'} mt-2`}>c++</h1>
445445
{other.map(project => (
446446
<Project
447447
value={project.value}
@@ -459,7 +459,7 @@ function App() {
459459

460460
<br/>
461461
<div className="flex items-center">
462-
<p className="font-heading tracking-tight sm:tracking-normal text-base sm:text-lg mr-3 inline align-top">dark mode</p>
462+
<p className="font-heading tracking-tighter sm:tracking-normal text-base sm:text-lg mr-3 inline align-top">dark mode</p>
463463

464464
<Switch.Root className="SwitchRoot align-center" id="airplane-mode" checked={darkMode} onCheckedChange={(checked) => {
465465
setDarkMode(checked);

‎src/components/project.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Project: React.FC<ProjectProps> = ({value, project_title, project_link, co
2121
setExpandedItems((prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]);
2222
}}
2323
/>
24-
<div className='font-semibold font-heading tracking-tight sm:tracking-normal text-base sm:text-xl' >
24+
<div className='font-semibold font-heading tracking-tighter sm:tracking-normal text-base sm:text-xl' >
2525
<span onClick={() => {
2626
setExpandedItems((prev) => prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]);
2727
}}>

0 commit comments

Comments
 (0)