@@ -23,7 +23,9 @@ export default function HomePage() {
2323
2424 const [ selectedDomains , setSelectedDomains ] = useState < string [ ] > ( [ ] )
2525 const [ visibleProjectsCount , setVisibleProjectsCount ] = useState ( 5 )
26+ const [ expandedProject , setExpandedProject ] = useState < number | null > ( null )
2627 const [ visibleExperiencesCount , setVisibleExperiencesCount ] = useState ( 3 )
28+ const [ expandedExperience , setExpandedExperience ] = useState < number | null > ( null )
2729
2830 const filteredProjects = selectedDomains . length > 0
2931 ? projects . filter ( project =>
@@ -98,6 +100,33 @@ export default function HomePage() {
98100 setVisibleExperiencesCount ( 3 )
99101 }
100102
103+ const toggleExperience = ( index : number ) => {
104+ setExpandedExperience ( prev => prev === index ? null : index )
105+ }
106+
107+ const toggleProject = ( index : number ) => {
108+ setExpandedProject ( prev => prev === index ? null : index )
109+ }
110+
111+ const handleSmoothScroll = ( e : React . MouseEvent < HTMLAnchorElement > , path : string ) => {
112+ e . preventDefault ( )
113+ const elementId = path . replace ( '/#' , '' )
114+ const element = document . getElementById ( elementId )
115+
116+ if ( element ) {
117+ const headerOffset = 80
118+ const elementPosition = element . getBoundingClientRect ( ) . top
119+ const offsetPosition = elementPosition + window . pageYOffset - headerOffset
120+
121+ window . scrollTo ( {
122+ top : offsetPosition ,
123+ behavior : 'smooth'
124+ } )
125+
126+ window . history . pushState ( null , '' , path )
127+ }
128+ }
129+
101130 const visibleProjects = filteredProjects . slice ( 0 , visibleProjectsCount )
102131 const visibleExperiences = experiences . technical . slice ( 0 , visibleExperiencesCount )
103132
@@ -121,8 +150,8 @@ export default function HomePage() {
121150 < Link href = "#about" className = "text-blue-500 hover:underline" >
122151 Know more About Me and My Skills.
123152 </ Link > < br /> < br />
124- < b > Currently</ b > , looking for < u > SDE /AI</ u > Spring '25 internship and May'25 full-time opportunities. < br />
125- < br /> < b > Prev</ b > , building Pricing Engine @ Stealth AI Startup , NYC. < br /> < br />
153+ < b > Currently</ b > , looking for SWE /AI May'25 full-time opportunities. < br />
154+ < br /> < b > Prev</ b > , building Pricing Engine @ Mobility Intel , NYC. < br /> < br />
126155 < a href = "mailto:reet.nandy@nyu.edu" className = "text-blue-500 hover:underline" >
127156 reet.nandy@nyu.edu
128157 </ a >
@@ -136,14 +165,15 @@ export default function HomePage() {
136165 { href : "https://github.com/techpertz" , label : "GitHub" } ,
137166 { href : "https://linkedin.com/in/reetnandy" , label : "LinkedIn" } ,
138167 { href : "https://x.com/reetnandy" , label : "X/Twitter" } ,
139- { href : "/ReetNandy_Resume.pdf " , label : "Resume" }
168+ { href : "/#resume " , label : "Resume" , isInternal : true }
140169 ] . map ( ( link ) => (
141170 < Link
142171 key = { link . label }
143172 href = { link . href }
144173 className = "px-6 py-3 rounded-corners neu-button text-sm dark:bg-gray-700 dark:text-white"
145- target = "_blank"
146- rel = "noopener noreferrer"
174+ onClick = { link . isInternal ? ( e ) => handleSmoothScroll ( e , link . href ) : undefined }
175+ target = { ! link . isInternal ? "_blank" : undefined }
176+ rel = { ! link . isInternal ? "noopener noreferrer" : undefined }
147177 >
148178 { link . label }
149179 </ Link >
@@ -212,7 +242,11 @@ export default function HomePage() {
212242 < h2 className = "text-3xl font-bold mb-6 dark:text-white" > Experience</ h2 >
213243 < div className = "space-y-8" >
214244 { visibleExperiences . map ( ( exp , index ) => (
215- < div key = { index } className = "neu-card p-6 dark:bg-gray-800" >
245+ < div
246+ key = { index }
247+ onClick = { ( ) => toggleExperience ( index ) }
248+ className = "neu-card p-6 dark:bg-gray-800 cursor-pointer transition-all duration-300 ease-in-out hover:scale-[1.02]"
249+ >
216250 < div className = "flex flex-col mb-4" >
217251 < h3 className = "text-xl font-semibold dark:text-white" > { exp . company } </ h3 > < br />
218252 < p className = "text-lg text-gray-600 dark:text-white" > { exp . title } </ p >
@@ -229,7 +263,16 @@ export default function HomePage() {
229263 ) ) }
230264 </ div >
231265 </ div >
232- < div >
266+ < div className = "text-blue-500 hover:underline dark:text-blue-400 mt-2" >
267+ { expandedExperience === index ? "Click to show less" : "Click to expand and know more" }
268+ </ div >
269+ < div
270+ className = { `mt-4 overflow-hidden transition-all duration-300 ease-in-out ${
271+ expandedExperience === index
272+ ? 'max-h-[1000px] opacity-100'
273+ : 'max-h-0 opacity-0'
274+ } `}
275+ >
233276 < h4 className = "text-sm font-semibold mb-2 dark:text-white" > Key Responsibilities:</ h4 >
234277 < ul className = "list-disc custom-list space-y-2 dark:text-gray-100" >
235278 { exp . responsibilities . map ( ( resp , i ) => (
@@ -301,7 +344,10 @@ export default function HomePage() {
301344 { visibleProjects . map ( ( project , index ) => (
302345 < div
303346 key = { index }
304- className = { `neu-card p-6 rounded-corners dark:bg-gray-800 dark:text-white ${ index === 0 ? 'border-2 border-blue-500 dark:border-blue-400' : '' } }
347+ onClick = { ( ) => toggleProject ( index ) }
348+ className = { `neu-card p-6 rounded-corners dark:bg-gray-800 dark:text-white cursor-pointer transition-all duration-300 ease-in-out hover:scale-[1.02] ${
349+ index === 0 ? 'border-2 border-blue-500 dark:border-blue-400' : ''
350+ } `}
305351 >
306352 < div className = "flex flex-col mb-4" >
307353 < h3 className = "text-lg font-medium mb-3" >
@@ -314,32 +360,51 @@ export default function HomePage() {
314360 className = "inline-block px-3 py-1 rounded-corners neu-button text-sm dark:bg-gray-600"
315361 target = "_blank"
316362 rel = "noopener noreferrer"
363+ onClick = { ( e ) => e . stopPropagation ( ) } // Prevent card click when clicking link
317364 >
318365 { project . linkText }
319366 </ a >
320367 ) : (
321368 < button
322369 className = "inline-block px-3 py-1 rounded-corners neu-button text-sm dark:bg-gray-600"
323370 disabled
371+ onClick = { ( e ) => e . stopPropagation ( ) }
324372 >
325373 { project . linkText }
326374 </ button >
327375 ) }
328376 </ div >
329377 </ div >
330- < ul className = "list-disc custom-list mb-2" >
331- { project . description . map ( ( desc , i ) => (
332- < li key = { i } >
333- < FormattedText text = { desc } />
334- </ li >
335- ) ) }
336- </ ul >
337- < div className = "mb-2" >
338- { project . tags . map ( tag => (
339- < span key = { tag } className = "inline-block bg-gray-200 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2" >
340- { tag }
341- </ span >
342- ) ) }
378+ < div className = "mb-4" >
379+ < div className = "flex flex-wrap gap-2 mb-4" >
380+ { project . tags . map ( tag => (
381+ < span
382+ key = { tag }
383+ className = "inline-block bg-gray-200 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200"
384+ onClick = { ( e ) => e . stopPropagation ( ) }
385+ >
386+ { tag }
387+ </ span >
388+ ) ) }
389+ </ div >
390+ </ div >
391+ < div className = "text-blue-500 hover:underline dark:text-blue-400 mt-2" >
392+ { expandedProject === index ? "Click to show less" : "Click to expand and know more" }
393+ </ div >
394+ < div
395+ className = { `mt-4 overflow-hidden transition-all duration-300 ease-in-out ${
396+ expandedProject === index
397+ ? 'max-h-[1000px] opacity-100'
398+ : 'max-h-0 opacity-0'
399+ } `}
400+ >
401+ < ul className = "list-disc custom-list mb-2" >
402+ { project . description . map ( ( desc , i ) => (
403+ < li key = { i } >
404+ < FormattedText text = { desc } />
405+ </ li >
406+ ) ) }
407+ </ ul >
343408 </ div >
344409 </ div >
345410 ) ) }
@@ -368,19 +433,19 @@ export default function HomePage() {
368433 </ section >
369434
370435 < section id = "resume" ref = { resumeRef } className = "py-12" >
371- < h2 className = "text-3xl font-bold mb-6 dark:text-white" > Resume</ h2 >
372- < p className = "mb-4 dark:text-gray-300" > Click the button below to view my full resume < span className = "highlight" > (2 Pages) </ span > :</ p >
436+ < h2 className = "text-3xl font-bold mb-6 dark:text-white" > Role Specific Resume</ h2 >
437+ < p className = "mb-4 dark:text-gray-300" > < span className = "highlight" > AI Engineer </ span > (AI/ML + Fullstack + Cloud) :</ p >
373438 < Link
374- href = "/ReetNandy_Resume .pdf"
439+ href = "/ReetNandy_AI .pdf"
375440 className = "inline-block px-6 py-3 rounded-corners neu-button text-sm dark:bg-gray-700 dark:text-white mb-4"
376441 target = "_blank"
377442 rel = "noopener noreferrer"
378443 >
379444 View Full Resume (PDF)
380445 </ Link >
381- < p className = "mb-4 dark:text-gray-300" > Or, want job specific resume < span className = "highlight" > (1 Page) </ span > ? </ p >
446+ < p className = "mb-4 dark:text-gray-300" > < span className = "highlight" > Software Engineer / SWE </ span > (Fullstack + Cloud + Core) </ p >
382447 < Link
383- href = "/ReetNandy_SdeAI .pdf"
448+ href = "/ReetNandy_SWE .pdf"
384449 className = "inline-block px-6 py-3 rounded-corners neu-button text-sm dark:bg-gray-700 dark:text-white"
385450 target = "_blank"
386451 rel = "noopener noreferrer"
0 commit comments