README.md~

<div align="center">
  <br />
    <a href="https://youtu.be/FTH6Dn3AyIQ" target="_blank">
      <img src="https://github.com/adrianhajdin/portfolio/assets/151519281/c6ca3c03-6cb7-4f67-a9b9-a73da5bfa0d8" alt="Project Banner">
    </a>
  <br />

  <div>
    <img src="https://img.shields.io/badge/-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000000" alt="nextdotjs" />
    <img src="https://img.shields.io/badge/-Framer-black?style=for-the-badge&logoColor=white&logo=framer&color=0055FF" alt="framer" />
    <img src="https://img.shields.io/badge/-Three_JS-black?style=for-the-badge&logoColor=white&logo=threedotjs&color=000000" alt="three.js" />
    <img src="https://img.shields.io/badge/-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4" alt="tailwindcss" />
  </div>

<h3 align="center">A Modern Next.js Portfolio</h3>

   <div align="center">
     Build this project step by step with Adrian's detailed tutorial on <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a> YouTube. Join the JSM family!
    </div>
</div>

# Coding Along with Adrian (JavaScript Mastery)

Welcome to my coding journey! In this repository, I am following along with Adrian from [JavaScript Mastery](https://www.youtube.com/watch?v=ukiGFmZ32YA&t=336s&ab_channel=JavaScriptMastery). As an aspiring software developer, I'm using this project to learn best practices and improve my skills.

https://github.com/adrianhajdin


## 📚 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. While I am not the original developer of this application, I am documenting my progress and any challenges I face while coding along.

## 🎥 Video Reference

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


## 🛠️ **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

## <a name="quick-start">🤸 Quick Start</a>

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/TBC
cd portfolio
```

**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=kt0FrkQgw8w&t=3910s&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.