Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rr3s1/portfoli0_jsm

A modern portfolio built using Next.js, Three.js for 3D elements, Framer Motion for animations, and styled with Tailwind CSS. Designed to leave a memorable impact, it features interactive 3D elements, a bento-style layout, testimonials and dynamic animations. Responsive across all devices.
https://github.com/rr3s1/portfoli0_jsm

framer-motion nextjs reactjs tailwindcss three-js

Last synced: 21 days ago
JSON representation

A modern portfolio built using Next.js, Three.js for 3D elements, Framer Motion for animations, and styled with Tailwind CSS. Designed to leave a memorable impact, it features interactive 3D elements, a bento-style layout, testimonials and dynamic animations. Responsive across all devices.

Awesome Lists containing this project

README 

        


  


    

      Project Banner

    

  



  


    nextdotjs

    framer

    three.js

    tailwindcss

  



  


 
Hero section 





   Hero section

  

  
 






 
Bento Grid section





   Bento Grid section

 

  
 


 

 

 
Recent Projects





   Recent Projects

  

  
 

  


 

 
Testimonials
  
 

   Testimonials

 

  
 


  

 
My Work experience
  
 

   My Work experience

 

  
 


  



A Modern Next.js Portfolio



  




# Coding Along with Adrian (JavaScript Mastery)



Welcome to my coding journey! In this repository, I am coding along with Adrian. As an aspiring software developer, I'm using this project to learn best practices and improve my skills.



## 📚 Project Overview



This project is based on a tutorial where Adrian guides viewers through the development of an amazing developer portfolio using Next.js, Three.js, Framer Motion and Tailwind CSS. 



## 🎥 Video Reference



You can watch the tutorial here: [JavaScript Mastery Tutorial](https://www.youtube.com/watch?v=FTH6Dn3AyIQ&t=6761s&ab_channel=JavaScriptMastery).



## 📋 Table of Contents



1. 🤖 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🤸 [Quick Start](#quick-start)

5. 🕸️ [Code to Copy](#snippets)

6. 🔗 [Assets](#links)

7. 🚀 [More](#more)



## 🤖 Introduction



Built with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations and styled with TailwindCSS, this portfolio demonstrates the developer's skills in a unique manner that creates a lasting impact.



## 🛠️ **Technologies Used**



**Next.js:**

A React framework for production-level applications with built-in SSR and SSG.



**React.js**

A JavaScript library for building user interfaces.



**Tailwind CSS:**

A utility-first CSS framework for rapidly building modern websites and applications.



**Framer Motion:** 

A production-ready motion library for React to power animations.



**Three.js:** 

A JavaScript library that makes creating 3D graphics in the browser easier.



# 🚀 Features



👉 **Stunning Sections**: Includes hero, features, pricing (monthly/yearly), FAQ, testimonials, and download software

sections.



👉 **Smooth Animations**: Complex CSS for fluid animations and eye-catching effects.



👉 **Cool CSS Gradients**: Beautiful gradient effects using CSS `before` and `after` pseudo-elements.



👉 **Seamless Navigation**: Offers a smooth user experience with intuitive navigation and scrolling.



👉 **Optimized Performance**: Built for fast loading and an optimized experience.



👉 **Pixel Perfect Design**: Ensures flawless responsiveness across all devices and screen sizes.



👉 **Hero**: Captivating introduction featuring a spotlight effect and dynamic background.



👉 **Bento Grid**: Modern layout presenting personal information using cutting-edge CSS design techniques.



👉 **3D Elements**:  Interactive 3D design elements, such as a GitHub-style globe and card hover effects, adding depth and engagement.



👉 **Testimonials**: Dynamic testimonials area with scrolling or animated content for enhanced engagement.



👉 **Work Experience**: Prominent display of professional background for emphasis and credibility.



👉 **Canvas Effect**: Innovative use of HTML5 canvas to create visually striking effects in the "approaches" section.



👉 **Responsiveness**: Seamless adaptability across all devices, ensuring optimal viewing experience for every user.



and many more, including code architecture and reusability



## 🤸 Quick Start



Follow these steps to set up the project locally on your machine.



**Prerequisites**



Make sure you have the following installed on your machine:



- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)



**Cloning the Repository**



```bash

git clone https://github.com/rr3s1/portfoli0_jsm.git

cd portfoli0_jsm

```



**Installation**



Install the project dependencies using npm:



```bash

npm install

```



**Running the Project**



```bash

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.



## 💡 What I Learned



As this is my third major project, I gained valuable experience in multiple areas of modern web development.



##### **Next.js Development**



- Optimized Images

- API Routes

- Server-Side Rendering (SSR) and Static Site Generation (SSG)

- File-based routing system (dynamic routes)

- Data Fetching Methods

- SEO Optimization

- Deployment



##### **Framer Motion**



- Animating React Components

- Advanced Animations

- Variants and Animation States

- SVG Animations

- Performance Considerations



##### **Tailwind CSS**



- Utility-First CSS Approach

- Responsive Design

- Customization and Theming

- Advanced Layout Techniques

- Pseudo-Classes and States



##### **Three.js**



- 3D Rendering Basics

- Scene, Camera, Renderer

- Lighting and Shadows

- Loading and Displaying 3D Models

- Materials and Textures



##### **Version Control with Git**



- Committing changes and managing branches.

- Collaborating and tracking progress over time.

- Maintained clear documentation and code comments.



## 🤝 Acknowledgments



Adrian Hajdin: For the comprehensive tutorial and

guidance. [JavaScript Mastery](https://www.youtube.com/watch?v=FTH6Dn3AyIQ&t=6761s&ab_channel=JavaScriptMastery).



## 📄 License



This project is licensed under the MIT License.



Note: This project is for educational purposes and is free to use under the terms of the MIT License.