Responsive Modern and Clean Developer Portfolio Template
Product Information
$91.82
Add to cartDeveloper
Public chat
Product Details
Overview This portfolio website showcases my web development expertise and projects. It is built using Next.js, React, Aceternity UI, and TypeScript, providing a modern and responsive user experience.
Technologies Used
- Next.js: A React framework that enables server-side rendering and static site generation, improving performance and SEO.
- React: A JavaScript library for building user interfaces, allowing for the creation of reusable components.
- Aceternity UI: A UI framework that offers a set of customizable components for building sleek and responsive layouts.
- TypeScript: A typed superset of JavaScript that helps catch errors early and improves code maintainability.
Folder Structure
- /pages: Contains the main application routes. Each file corresponds to a route in the website.
- /components: Contains reusable React components, such as navigation bars, project cards, and footers.
- /styles: Contains global styles and CSS modules to style the components consistently across the site.
- /public: Contains static assets like images and icons used throughout the website.
Key Features
- Home Page: Introduces the portfolio with a brief about me and links to my projects.
- Projects Section: Displays various projects with descriptions, technologies used, and links to live demos or GitHub repositories.
- Responsive Design: The website is designed to work seamlessly on various devices, thanks to flexible layouts and media queries.
- Approach: The website features a My Approach section that tells the approach you take when creating a product.
Implementation Highlights
- Routing: Next.js handles routing automatically based on the file structure in the
/pagesdirectory. - Dynamic Imports: Optimizes loading times by dynamically importing components as needed.
Conclusion This portfolio website not only serves as a showcase for my work but also demonstrates my skills in modern web development practices. It is continuously updated to reflect new projects and technologies I learn.
? 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
Installation Instructions
Prerequisites
Make sure you have the following installed on your machine:
Git
Node.js
npm (Node Package Manager)
Installation
Install the project dependencies using npm:
npm install
Running the Project
npm run dev
Open http://localhost:3000 in your browser to view the project.
Change and Adaptation Instructions
1) For changing the email that is copied on clicking, users should go to BentoGrid.tsx and edit the following code:
const handleCopy = () => {
navigator.clipboard.writeText('[YOUR EMAIL]');
setCopied(true);
}
2) For adding your personal projects in the projects section, users should go to index.ts and edit the projects object as follows:
{
id: 1,
title: "OptiBank - Modern Banking Platform",
des: "OptiBank is a modern banking application for everyone! Access and manage your accounts and transactions efficiently.",
img: "/project1.png",
iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/next.svg", "/fm.svg"],
link: "https://banking-lyart.vercel.app",
},
3) To edit work experiences with your own experience, the user should go to index.ts and edit workExperience object as follows:
{
id: 1,
title: "Full Stack Developer",
desc: "Developed a web-based job platform using Python on Django, enhancing interactivity.",
className: "md:col-span-2",
thumbnail: "/exp1.svg",
},
3) If the user want to change the description of My Approaches, users can go to Approach.tsx, and edit description prop in
description="We'll collaborate to map out your website's goals, target audience, and key functionalities. We'll discuss things like site structure, navigation, and content requirements."
>
4) User can add their name in the metadata of the website by going to layout.tsx and edit the metadata object:
export const metadata: Metadata = {
title: "Yasir Naseem",
description: "Modern and minimalist portfolio",
};
5) The user can change the email address to their own in the footer button "Let's get in touch" by going to Footer.tsx and edit edit the anchor tag.
Price Information
Price Statistics
Insights
Related Products
-
Punch Game Annoying Clown
Supports SDK Versions 34 and 35 Integrated with AdMob Ads for in-game revenue Easy reskinning and expanding levels for developers 64-bit architecture, ready for Google Play Store publishing Smooth and fast-paced gameplay optimized for mobile Developed with Unity 2020.x, built on Unity 2020.3.38
added by AshCoder AchrafBuker
$92.62
-
Source code game unitty 2D
Gameplay: Use the mouse to attack in the direction of the mouse, use Q to use the attack skill Luminios, use R to use the healing skill Bloom Of Life. Asset used to build the map by the map title: Asset/Building/... (Portal folder includes a prefab used for players to pass the level. Enter the scen
added by ZER
$92.62
-
Online School Result checker
Key Features Admin Features Change and Edit School Name: Admin can update and modify the school name displayed on the platform. Restrict Teacher Access: Admin can control teacher access by setting permissions for various sections and functionalities. SMTP Settings: Admin can add or edit SMTP con
added by Danny01
$192.03
Cookie time!
