A mobile-responsive website built with Astro.build and Tailwind CSS, featuring data visualizations and creative content exploring themes of resilience and adaptation.

• Mobile-first responsive design using Tailwind CSS
• Octopuses page with interactive Leaflet map for data visualization
• Mosquitoes page with data visualization placeholders
• Graphic Design gallery with three-column responsive layout
• Fiction writing showcase
• Professional resumé page
• About & Contact page with contact form
• Lexend font from Google Fonts throughout
• Clean navigation with mobile hamburger menu

1. Index (Octopuses) - / - Features an interactive Leaflet map ready for data connection
2. Mosquitoes - /data-viz-2 - Data visualization page with placeholders for charts
3. Graphic Design - /graphic-design - Three-column gallery showcase
4. Fiction - /fiction - Creative writing portfolio
5. Resumé - /resume - Professional experience and skills
6. About & Contact - /about-contact - Information and contact form

• Node.js 18+
• npm or yarn

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:4321

npm run build

npm run preview

• Astro.build - Static site generator
• Tailwind CSS - Utility-first CSS framework
• Leaflet - Interactive maps library
• TypeScript - Type safety
• Lexend - Google Fonts typography

1. Octopus Map: Edit src/pages/index.astro and replace the sample markers with your actual data
2. Mosquito Charts: Edit src/pages/data-viz-2.astro and replace placeholders with actual chart components
3. Gallery Images: Replace placeholder content in src/pages/graphic-design.astro with actual images

• All styles use Tailwind CSS classes
• Custom color scheme can be modified in tailwind.config.mjs
• Font settings are configured in the base layout

• Update contact information in src/layouts/BaseLayout.astro (footer)
• Modify personal information in src/pages/about-contact.astro
• Replace placeholder content throughout with actual content

The site is built mobile-first with responsive breakpoints:

• sm: 640px and up
• md: 768px and up
• lg: 1024px and up
• xl: 1280px and up

All components are tested and optimized for mobile devices.

This project is open source and available under the MIT License.