{"id":21492120,"url":"https://github.com/colddsam/nextjsportfolio","last_synced_at":"2025-03-17T11:23:17.435Z","repository":{"id":242544835,"uuid":"809851134","full_name":"colddsam/nextjsportfolio","owner":"colddsam","description":"This is my second portfolio website make on top of next js and tailwind css. We took help of aceternity ui for making this portfolio.","archived":false,"fork":false,"pushed_at":"2024-08-06T15:39:08.000Z","size":19806,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T20:51:52.383Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://colddsam.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/colddsam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-03T15:10:58.000Z","updated_at":"2024-08-06T15:39:12.000Z","dependencies_parsed_at":"2024-07-06T19:42:48.821Z","dependency_job_id":null,"html_url":"https://github.com/colddsam/nextjsportfolio","commit_stats":null,"previous_names":["colddsam/nextjsportfolio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colddsam%2Fnextjsportfolio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colddsam%2Fnextjsportfolio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colddsam%2Fnextjsportfolio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colddsam%2Fnextjsportfolio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colddsam","download_url":"https://codeload.github.com/colddsam/nextjsportfolio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244022635,"owners_count":20385133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-23T15:22:34.326Z","updated_at":"2025-03-17T11:23:17.389Z","avatar_url":"https://github.com/colddsam.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## colddsam Portfolio: A Showcase of Cutting-Edge Web Development using NextJS\nThis project, hosted at [https://colddsam.dev](https://colddsam.dev), is a personal portfolio website designed and built by Samrat Das (colddsam), a web developer and machine learning enthusiast. The site leverages the power of Next.js, Tailwind CSS, and the Aceternity UI component library to deliver a visually stunning and highly interactive user experience. \n\n### Project Goals\n\n- **Showcase Expertise:** The primary goal of this project is to showcase Samrat's skills and experience in web development and machine learning. This includes:\n    - Full-stack development capabilities using JavaScript, React, Node.js, and Python.\n    - Proficiency in graphics design and UI/UX principles.\n    - Expertise in developing innovative machine learning solutions.\n- **Attract Opportunities:** The portfolio aims to attract potential employers, clients, and collaborators by presenting a compelling narrative of Samrat's professional journey and capabilities.\n- **Interactive Experience:** The website employs engaging animations and interactive elements to create a memorable and unique browsing experience for visitors.\n\n### Technologies Used\n\n| Technology | Description | Role |\n|---|---|---|\n| **Next.js** | A React framework for building fast and SEO-friendly web applications. | Provides the foundation for server-side rendering, routing, and data fetching. |\n| **Tailwind CSS** | A utility-first CSS framework for rapid UI development. | Enables quick styling and customization of the website's visual elements. |\n| **Aceternity UI (NextUI)** | A React UI library based on Tailwind CSS, offering pre-built, customizable components. | Simplifies UI development by providing ready-to-use elements and ensuring design consistency. |\n| **Framer Motion** | A production-ready motion library for React. | Powers smooth animations and interactive effects throughout the website. |\n| **Three.js** | A JavaScript library for creating 3D graphics in the browser. |  Used to create the interactive 3D globe on the \"Let's Connect\" section. |\n| **Spline** | A design tool and runtime for creating 3D web experiences. | Used to create and embed the 3D model featured in the introductory hero section. |\n| **Resend** | A transactional email API for developers. | Used to send feedback emails to Samrat and thank-you emails to users submitting feedback. |\n\n### Website Structure and Features\n\nThe portfolio website is structured around various sections, each highlighting a specific aspect of Samrat's expertise and experience. \n\n1. **Hero Section:** A visually striking introductory section featuring:\n    - A personalized greeting using the `FlipWords` component, cycling through different ways to address visitors.\n    - An animated 3D model created using Spline, adding a dynamic and visually engaging element.\n    - A concise introduction to Samrat's background and a call to action to view his resume. \n    - The `Spotlight` component, creating a subtle animated spotlight effect on hover. \n2. **Skills Section:** This section highlights Samrat's technical skills using the custom `PinContainer` component, featuring:\n    - An interactive 3D pin metaphor, showcasing each skill with its logo, description, and proficiency level. \n    - The `Vortex` component, creating a dynamic background of animated particles. \n3. **Experience Section:** This section details Samrat's professional experience using the `StickyScroll` component, which: \n    - Creates a sticky scroll effect, dynamically updating the displayed content and background based on the scroll position.\n    - Presents each experience with its title, description, duration, and a related image. \n4. **Projects Section:** This section showcases Samrat's notable projects using the `InfiniteMovingCards` component, which: \n    - Creates an infinite loop of moving cards, each representing a project with its title, description, thumbnail, technologies used, and a link to the project.\n    - Provides two separate instances of the component, one moving left and one moving right, creating a visually dynamic presentation. \n5. **Achievements Section:** This section highlights Samrat's accomplishments using the `BentoGrid` component, featuring:\n    - A responsive grid layout that adapts to different screen sizes.\n    - The `GoogleGeminiEffect` component, creating an animated background with colorful, flowing lines.\n    - Each achievement is presented with its title, description, date, and a relevant icon.\n6. **Events Section:** This section showcases events that Samrat has attended, leveraging:\n    - The `AnimatedTooltip` component, providing interactive tooltips with images and descriptions for each event.\n    - The `BackgroundBeams` component, creating a dynamic background with animated, colorful beams.\n7. **Let's Connect Section:** This section encourages visitors to connect with Samrat, using:\n    - An interactive 3D globe built with Three.js, showcasing locations around the world. \n    - A call to action to connect with Samrat on different platforms.\n8. **Contact Form:** This section features a contact form, allowing visitors to provide feedback, utilizing:\n    - The `HeroHighlight` component, creating an interactive spotlight effect that follows the user's mouse movements.\n    - Custom `Input` and `Label` components for a consistent design language.\n    - Integration with the Resend API to send email notifications to both Samrat and the user submitting feedback. \n\n### Design and User Experience\n\n- **Dark Mode:** The website features a dark mode color scheme, providing a sleek and modern aesthetic. \n- **Responsive Design:** The site is fully responsive, ensuring optimal viewing experience across a wide range of devices. \n- **Interactive Animations:** Extensive use of Framer Motion provides smooth animations and interactive effects, enhancing user engagement.\n- **Visual Hierarchy:** Careful use of typography, spacing, and visual elements establishes a clear visual hierarchy, guiding users through the content. \n\n### References and Resources\n\n- **Next.js Documentation:** [https://nextjs.org/docs](https://nextjs.org/docs)\n- **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs)\n- **NextUI Documentation:** [https://nextui.org/docs](https://nextui.org/docs)\n- **Framer Motion Documentation:** [https://www.framer.com/motion/](https://www.framer.com/motion/)\n- **Three.js Documentation:** [https://threejs.org/docs](https://threejs.org/docs)\n- **Spline Documentation:** [https://spline.design/](https://spline.design/)\n- **Resend Documentation:** [https://resend.com/docs](https://resend.com/docs)\n\n### Conclusion\n\nThis project showcases the power of combining modern web development technologies and design principles to create a compelling and engaging portfolio website. It serves as a testament to Samrat's expertise and passion for technology, and a platform for connecting with potential opportunities. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolddsam%2Fnextjsportfolio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolddsam%2Fnextjsportfolio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolddsam%2Fnextjsportfolio/lists"}