Welcome to my coding journey! In this repository, I am following along with Adrian from JavaScript Mastery. As an aspiring software developer, I'm using this project to learn best practices and improve my skills.
https://github.com/adrianhajdin
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.
You can watch the tutorial here: JavaScript Mastery Tutorial.
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/TBC
cd portfolioInstallation
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.