Fatima's 3D Personal Portfolio

Live Demo

This is a personal portfolio showcasing my projects and skills. The portfolio is built using Next.js, Three.js, React, JSX, and Tailwind CSS.

Tools Used 🧰

Frontend

• Next.js: NextJs - Next.js is a React framework that enables server-side rendering, static site generation, and more, making it ideal for building fast and SEO-friendly web applications.
• Three.js: Threejs - Three.js is a JavaScript library that makes it easy to create and display 3D graphics in the browser.
• React: react - React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the application's state efficiently.
• JSX: jsx introduction - JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript, making it easier to create React components.
• Tailwind CSS: tailwind css - Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs quickly without having to write custom CSS.
• Axios: axios - It is a popular JavaScript library used for making HTTP requests from a web browser or Node. js. It simplifies the process of sending asynchronous HTTP requests to a server, and also handles the response.

Backend

• Express: expressjs - Express is a web application framework for Node.js, providing a robust set of features for building web servers and APIs.
• Mongoose: mongoose - Mongoose is an object modeling tool for MongoDB and Node.js, providing a straightforward schema-based solution for modeling application data.
• Cors: cors npm - CORS (Cross-Origin Resource Sharing) is a mechanism that allows resources on a web page to be requested from another domain outside the domain from which the first resource was served, enabling cross-origin HTTP requests in web applications.

Websites Used 🌐

• Playground.com: Playground - Used for AI generated images.
• Sketchfab.com: Sketchfab - Utilized for sourcing 3D models and assets for Three.js integration.
• GLTFJSX GitHub Repository: GLTFJSX - Used for converting GLTF models to GLB for easy integration with Three.js.
• Lucide Icons: Lucide Icons - Used for accessing a collection of simple and clean icons for UI design.
• GitHub Readme Stats GitHub Repository: GitHub Readme Stats - Utilized for displaying GitHub stats.
• Skillicons: Skillicons - Used for accessing a collection of skill icons for use in portfolio or resume design.
• React Hook Form: react-hook-form - Used to create performant, flexible and extensible forms with easy-to-use validation.

Inspirited by 💫

codebucks27

youtube video