portfoli0_jsm

KO | EN

gitlite — search

#hacktoberfest #llm #golang #android #machine-learning #linux #nodejs #java #windows #kubernetes #awesome-list #security #openai #open-source

(★ 14)

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.

portfoli0_jsm 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<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><br /><br />
<div align="center">
  In this project, I am coding along with Adrian (JavaScript Mastery) to build a Next.js porfolia landing page..

<br><br>
    <a href="https://www.youtube.com/watch?v=FTH6Dn3AyIQ&t=6761s&ab_channel=JavaScriptMastery" target="_blank">Project Video</a>
    <br>
    <a href="https://github.com/adrianhajdin/portfolio.git" target="_blank">Project Source code</a><br><br>

</div>
  <br />
 <p>Hero section </p><br />
   <img src="https://github.com/user-attachments/assets/b0ff4d9f-f34d-454c-9d2a-90346561ef0d" alt="Hero section">
  
  <br />

<br />
 <p>Bento Grid section</p><br />
   <img src="https://github.com/user-attachments/assets/a56a8824-7032-4287-91d5-1f0a9670dca9" alt="Bento Grid section">
 
  <br /> 
<br /> 
 
 <p>Recent Projects</p><br />
   <img src="https://github.com/user-attachments/assets/ca4488c0-3990-4e31-8439-2c74142f2d0a" alt="Recent Projects">
  
  <br /> 
  <br />
 
 <p>Testimonials</p>  <br /> 
   <img src="https://github.com/user-attachments/assets/287aa0fc-f127-4e1a-a9b0-08a728262069" alt="Testimonials">
 
  <br /> <br />
  
 <p>My Work experience</p>  <br /> 
   <img src="https://github.com/user-attachments/assets/6f9af7e1-2eed-4c81-a4d7-18e0ec1931c3" alt="My Work experience">
 
  <br /> <br />

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

</div>

## 📋 <a name="table">Table of Contents</a>

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)

## <a name="introduction">🤖 Introduction</a>

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

## <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/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.

portfoli0_jsm

portfoli0_jsm 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

portfoli0_jsm

portfoli0_jsm 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README