This is the repository for my personal website and portfolio, showcasing my projects, skills, and professional journey. Built with modern web technologies, it features a clean design, interactive elements, and AI-powered content generation.
Live Demo: fysp.eth.limo
- Modern Tech Stack: Built with Astro for performance, React for interactivity, and Tailwind CSS for styling.
- Interactive 3D Scenes: Engaging visuals created with Three.js and
@react-three/fiber. - AI Story & Image Generator: An interactive page that leverages Google's Gemini models to generate creative stories and images from user prompts.
- Fully Responsive: Designed to work seamlessly on all devices, from desktops to mobile phones.
- CI/CD: Automated build, test, and deployment pipeline using GitHub Actions.
- Framework: Astro
- UI Library: React
- Styling: Tailwind CSS
- 3D Graphics: Three.js,
@react-three/fiber,@react-three/drei - AI: Cloudflare Workers AI
- Linting & Formatting: ESLint, Prettier
- Package Manager: pnpm
-
Clone the repository:
git clone https://github.com/fysp11/fysp11.github.io.git cd fysp11.github.io -
Install dependencies:
pnpm install
To run the project locally, you'll need to set up the following environment variables. Create a .env file in the root of the project and add the following:
# Google Analytics (Optional)
PUBLIC_GA_ID="G-XXXXXXXXXX"
# HubSpot (Optional)
PUBLIC_HS_ID="XXXXXXXX"
# Google Gemini (Required for AI features)
GOOGLE_GENERATIVE_AI_API_KEY="YOUR_GEMINI_API_KEY"
AI_GATEWAY_API_KEY="YOUR_GATEWAY_API_KEY"You can get your GOOGLE_GENERATIVE_AI_API_KEY from Google AI Studio.
pnpm run devOpen http://localhost:4321 in your browser to see the result.
This project is configured for automatic deployment to Cloudflare Pages and GitHub Pages. Any push to the main branch will trigger a new deployment.
Contributions are welcome! Please read the CONTRIBUTING.md for details on how to get started.
This project is licensed under the MIT License. See the LICENSE file for details.