Welcome to my personal portfolio project! This site is being crafted to showcase my work, skills, and experience in web development. Built with a modern stack including SvelteKit, TypeScript, Tailwind CSS, GSAP, and Three.js, the site focuses on delivering an engaging and interactive user experience.
- SvelteKit: Framework for building fast, optimized web applications with Svelte.
- TypeScript: Adds static typing to JavaScript, ensuring robustness in the code.
- Tailwind CSS: A utility-first CSS framework for styling the site with ease and consistency.
- GSAP (GreenSock Animation Platform): For smooth, performant animations.
- Three.js: Enables 3D graphics in the browser to add dynamic visual elements.
- Interactive Animations: Using GSAP and Three.js for a smooth, immersive experience.
- Responsive Design: Ensuring seamless performance across devices with Tailwind CSS.
- Modular Codebase: Organized and maintainable code using TypeScript and SvelteKit.
- Optimized for Speed: Leveraging SvelteKit’s optimization features.
-
Clone the repository:
git clone https://github.com/yourusername/portfolio-site.git
-
Navigate to the project directory:
cd portfolio-site -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build for production:
npm run build
- src: Main source code directory.
- routes: Contains SvelteKit routes for each page.
- components: Reusable UI components.
- styles: Global styles and Tailwind configurations.
- assets: Images, fonts, and other static files.
| Feature | Status |
|---|---|
| Initial Setup | ✅ Completed |
| Layout & Styling | 🔄 In Progress |
| Animation Integrations | ⏳ Upcoming |
| 3D Elements | ⏳ Upcoming |
| Content Addition | ⏳ Upcoming |
- Dynamic content: Integrate a CMS or API for easy content management.
- SEO Optimization: Ensure visibility across search engines.
- Dark Mode: Add a toggle for light/dark themes.
This project is licensed under the MIT License.
Feel free to explore, contribute, or suggest features!