Dr. Koushik Roy Portfolio Website

A responsive portfolio website built with Astro and Tailwind CSS, featuring reusable UI components and multiple pages showcasing education, professional experience, awards, publications, and conference papers.

Features

• Responsive Design: Mobile-first approach with Tailwind CSS.
• Reusable Components: NavPill, DynamicHeading, ExpandableListItem, ImagePlacard, YearLabel, PublicationCard, ExternalLink, Carousel.
• Multi-page Structure: Home, About, Experience, Awards, Education, Publications, Conferences.
• Dynamic Data: Publications and conference data parsed and rendered from structured datasets.
• Carousel: Auto-play image carousel with manual navigation arrows on the About page.

Project Structure

src/
  ├── components/      # Reusable UI components
  ├── layouts/         # Base layout
  ├── pages/           # Route-based page components
  └── styles.css       # Global Tailwind styles
public/
  └── resources/images/ # Static images organized by route

Installation

1. Clone or extract the project to your workspace.

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The site will be available at http://localhost:3000.

Development

• Edit pages in src/pages/ to modify route content.
• Create or modify components in src/components/.
• Add images to public/resources/images/ following the folder structure (e.g., home/about/, home/about/education/, etc.).
• Tailwind classes are available globally; no additional CSS files are needed for component styling.

Build

To build for production:

npm run build

The output will be in the dist/ directory.

Preview

To preview the production build locally:

npm run preview

Pages & Routes

Route	Component	Purpose
/	src/pages/index.astro	Home page (placeholder)
/about	src/pages/about/index.astro	About page with carousel and navigation
/about/experience	src/pages/about/experience.astro	Professional and administrative roles
/about/awards	src/pages/about/awards.astro	Awards, fellowships, and academic roles
/about/education	src/pages/about/education.astro	Educational background with placards
/publications	src/pages/publications.astro	Journal publications by year
/conferences	src/pages/conferences.astro	Conference papers by year

Components Reference

NavPill

Pill-shaped navigation link with hover color transition.

<NavPill defaultText="EXPERIENCE" href="/about/experience" hoverColor="hover:bg-rose-500" />

DynamicHeading

Text heading with hover color effect.

<DynamicHeading text="PROFESSIONAL EXPERIENCE" hoverTextColor="hover:text-rose-500" />

ExpandableListItem

Bullet point with expanding detail box on hover.

<ExpandableListItem title="NSS Program officer" details="Coordinated institute NSS activities" themeColor="border-blue-500 text-blue-600" />

ImagePlacard

Rounded card paired with circular image.

<ImagePlacard title="Doctor of Philosophy" duration="(July, 2010 –April, 2015)" details="IIT Kanpur" imagePath="/resources/images/home/about/education/phd.jpg" themeColor="border-blue-500" />

YearLabel

Pill-shaped year label with background color.

<YearLabel year="2024" bgColor="bg-blue-500" />

PublicationCard

Card displaying publication or conference paper details.

<PublicationCard title="Structural Damage Identification" authors="Roy, K." citation="Journal of Engineering Mechanics (2017)" />

ExternalLink

Image wrapper with hover shadow effect.

<ExternalLink href="https://researchgate.net" img="/resources/images/researchgate.svg" alt="ResearchGate" size={48} />

Carousel

Auto-playing image carousel with navigation arrows.

<Carousel images={['/images/slide1.jpg', '/images/slide2.jpg']} interval={4000} />

Notes

• Images should be placed in public/resources/images/ with folder structure matching routes.
• Publication and conference data are currently inline in the .astro files; consider extracting to JSON files for larger datasets.
• Tailwind color utilities are used throughout; adjust theme colors in tailwind.config.cjs if needed.

Deployment

The built site can be deployed to any static hosting platform (Vercel, Netlify, GitHub Pages, etc.). Run npm run build and deploy the dist/ directory.

---

Built with Astro & Tailwind CSS for responsive, performant web experiences.