https://github.com/colddsam/nextjsportfolio
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.
https://github.com/colddsam/nextjsportfolio
Last synced: over 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/colddsam/nextjsportfolio
- Owner: colddsam
- Created: 2024-06-03T15:10:58.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-06T15:39:08.000Z (almost 2 years ago)
- Last Synced: 2025-01-23T20:51:52.383Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://colddsam.dev
- Size: 18.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## colddsam Portfolio: A Showcase of Cutting-Edge Web Development using NextJS
This 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.
### Project Goals
- **Showcase Expertise:** The primary goal of this project is to showcase Samrat's skills and experience in web development and machine learning. This includes:
- Full-stack development capabilities using JavaScript, React, Node.js, and Python.
- Proficiency in graphics design and UI/UX principles.
- Expertise in developing innovative machine learning solutions.
- **Attract Opportunities:** The portfolio aims to attract potential employers, clients, and collaborators by presenting a compelling narrative of Samrat's professional journey and capabilities.
- **Interactive Experience:** The website employs engaging animations and interactive elements to create a memorable and unique browsing experience for visitors.
### Technologies Used
| Technology | Description | Role |
|---|---|---|
| **Next.js** | A React framework for building fast and SEO-friendly web applications. | Provides the foundation for server-side rendering, routing, and data fetching. |
| **Tailwind CSS** | A utility-first CSS framework for rapid UI development. | Enables quick styling and customization of the website's visual elements. |
| **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. |
| **Framer Motion** | A production-ready motion library for React. | Powers smooth animations and interactive effects throughout the website. |
| **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. |
| **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. |
| **Resend** | A transactional email API for developers. | Used to send feedback emails to Samrat and thank-you emails to users submitting feedback. |
### Website Structure and Features
The portfolio website is structured around various sections, each highlighting a specific aspect of Samrat's expertise and experience.
1. **Hero Section:** A visually striking introductory section featuring:
- A personalized greeting using the `FlipWords` component, cycling through different ways to address visitors.
- An animated 3D model created using Spline, adding a dynamic and visually engaging element.
- A concise introduction to Samrat's background and a call to action to view his resume.
- The `Spotlight` component, creating a subtle animated spotlight effect on hover.
2. **Skills Section:** This section highlights Samrat's technical skills using the custom `PinContainer` component, featuring:
- An interactive 3D pin metaphor, showcasing each skill with its logo, description, and proficiency level.
- The `Vortex` component, creating a dynamic background of animated particles.
3. **Experience Section:** This section details Samrat's professional experience using the `StickyScroll` component, which:
- Creates a sticky scroll effect, dynamically updating the displayed content and background based on the scroll position.
- Presents each experience with its title, description, duration, and a related image.
4. **Projects Section:** This section showcases Samrat's notable projects using the `InfiniteMovingCards` component, which:
- Creates an infinite loop of moving cards, each representing a project with its title, description, thumbnail, technologies used, and a link to the project.
- Provides two separate instances of the component, one moving left and one moving right, creating a visually dynamic presentation.
5. **Achievements Section:** This section highlights Samrat's accomplishments using the `BentoGrid` component, featuring:
- A responsive grid layout that adapts to different screen sizes.
- The `GoogleGeminiEffect` component, creating an animated background with colorful, flowing lines.
- Each achievement is presented with its title, description, date, and a relevant icon.
6. **Events Section:** This section showcases events that Samrat has attended, leveraging:
- The `AnimatedTooltip` component, providing interactive tooltips with images and descriptions for each event.
- The `BackgroundBeams` component, creating a dynamic background with animated, colorful beams.
7. **Let's Connect Section:** This section encourages visitors to connect with Samrat, using:
- An interactive 3D globe built with Three.js, showcasing locations around the world.
- A call to action to connect with Samrat on different platforms.
8. **Contact Form:** This section features a contact form, allowing visitors to provide feedback, utilizing:
- The `HeroHighlight` component, creating an interactive spotlight effect that follows the user's mouse movements.
- Custom `Input` and `Label` components for a consistent design language.
- Integration with the Resend API to send email notifications to both Samrat and the user submitting feedback.
### Design and User Experience
- **Dark Mode:** The website features a dark mode color scheme, providing a sleek and modern aesthetic.
- **Responsive Design:** The site is fully responsive, ensuring optimal viewing experience across a wide range of devices.
- **Interactive Animations:** Extensive use of Framer Motion provides smooth animations and interactive effects, enhancing user engagement.
- **Visual Hierarchy:** Careful use of typography, spacing, and visual elements establishes a clear visual hierarchy, guiding users through the content.
### References and Resources
- **Next.js Documentation:** [https://nextjs.org/docs](https://nextjs.org/docs)
- **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs)
- **NextUI Documentation:** [https://nextui.org/docs](https://nextui.org/docs)
- **Framer Motion Documentation:** [https://www.framer.com/motion/](https://www.framer.com/motion/)
- **Three.js Documentation:** [https://threejs.org/docs](https://threejs.org/docs)
- **Spline Documentation:** [https://spline.design/](https://spline.design/)
- **Resend Documentation:** [https://resend.com/docs](https://resend.com/docs)
### Conclusion
This 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.