Hero section
Bento Grid section
Recent Projects
Testimonials
My Work experience
- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🕸️ Code to Copy
- 🔗 Assets
- 🚀 More
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.
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.
👉 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
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/rr3s1/portfoli0_jsm.git
cd portfoli0_jsmInstallation
Install the project dependencies using npm:
npm installRunning the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
As this is my third major project, I gained valuable experience in multiple areas of modern web 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
- Animating React Components
- Advanced Animations
- Variants and Animation States
- SVG Animations
- Performance Considerations
- Utility-First CSS Approach
- Responsive Design
- Customization and Theming
- Advanced Layout Techniques
- Pseudo-Classes and States
- 3D Rendering Basics
- Scene, Camera, Renderer
- Lighting and Shadows
- Loading and Displaying 3D Models
- Materials and Textures
- Committing changes and managing branches.
- Collaborating and tracking progress over time.
- Maintained clear documentation and code comments.
Adrian Hajdin: For the comprehensive tutorial and guidance. JavaScript Mastery.
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.