Project Report: Portfolio Website using ReactJS, ThreeJS, Framer Motion, Figma, and NodeJS deployed on Vercel.
The purpose of this project was to create a visually appealing and interactive portfolio website using cutting-edge technologies such as ReactJS, ThreeJS, Framer Motion, and Figma for design, along with NodeJS for server-side functionality. The website was successfully deployed on Vercel to make it accessible to a broad audience- or anyone with the link.
This portfolio website, titled "Utkarsh | Penn State” showcases the work and achievements of Utkarsh as a web developer. The website is designed to be immersive and engaging for visitors, providing a seamless user experience while navigating various sections.
ReactJS: ReactJS was used as the frontend framework to build the entire user interface and handle dynamic content rendering. ThreeJS: ThreeJS was employed for creating 3D graphics, animations, and interactive visual elements to enhance the user experience. Framer Motion: Framer Motion was used for smooth and eye-catching animations throughout the website, adding a touch of elegance and interactivity. Figma: Figma played a vital role in the design phase, enabling the creation of wireframes and mockups that served as a blueprint for the website's appearance and layout. NodeJS: NodeJS was utilized for server-side scripting, handling contact form submissions, and other server-related tasks. Vercel: Vercel, a popular platform for deploying web applications, was chosen for hosting the website and making it publicly accessible.
4. Sections and Navlinks: The single-page portfolio website consists of the following sections and corresponding Navlinks:
About: Provides a brief introduction to Utkarsh Choudhary, highlighting his background, skills, and professional interests. Work: Showcases a selection of Utkarsh's previous work projects, accompanied by detailed descriptions and interactive visuals. Contact: An interactive contact form allowing visitors to contact Utkarsh directly for inquiries or collaboration opportunities. Footer: Contains essential links, copyright information, and any additional information Utkarsh wants to display in the footer section. Resume: Clicking on this Navlink directly navigates visitors to a Google Drive document containing Utkarsh's CV
5. Design and Development Process: The project followed an agile development approach with iterative cycles. The steps undertaken during the project were as follows:
Planning and Design: The project's scope and design were outlined, and wireframes and mockups were created using Figma to visualize the website's structure and appearance. Frontend Development: The ReactJS framework was used to create the website's frontend, implementing the design and integrating Framer Motion for animations and ThreeJS for 3D elements. Backend Development: I used Vercel which provides free BaaS or Backend as a service to deploy this application. Testing and Bug Fixing: Extensive testing and modifications were performed to identify and resolve website functionality and appearance issues. Deployment: The website was deployed on Vercel, ensuring it was accessible to a global audience.
Learning Curve: Integrating ThreeJS and Framer Motion was challenging due to the learning curve associated with these technologies. Extensive documentation and online resources were used to overcome this challenge. Responsive Design: Ensuring the website's responsiveness across different devices and screen sizes required careful planning and testing during development. Deployment Configuration: Configuring the deployment settings on Vercel was initially daunting, but the Vercel documentation provided clear guidelines for a successful deployment.
The Portfolio website successfully achieved its goals of showcasing a visually stunning and interactive experience, highlighting the web developer's skills and previous projects. The combination of ReactJS, ThreeJS, Framer Motion, and NodeJS allowed for a seamless and engaging user experience, while Figma served as an essential tool for designing the website. Deployment on Vercel made the website publicly accessible, enabling Utkarsh to reach a broader audience with their work and skills.
Website Link: https://threejs-udogg.vercel.app/ Note: This website is not optimized for Search Engines yet as they do not crawl ReactJS websites. This is the GitHub link to the project: https://github.com/UDogg/threejs .