Responsive Modern and Clean Developer Portfolio Template

Product Information

$91.82
cart Add to cart Favorites
User Guide Live Preview

Developer

Yasir Naseem
Request Code Sample Direct message

Sep 24, 2024

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


  1. Home Page: Introduces the portfolio with a brief about me and links to my projects.

  2. Projects Section: Displays various projects with descriptions, technologies used, and links to live demos or GitHub repositories.

  3. Responsive Design: The website is designed to work seamlessly on various devices, thanks to flexible layouts and media queries.

  4. 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 /pages directory.

  • 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

Follow these steps to set up the project locally on your machine.

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

After getting the application running, the user can edit the required data as follows:
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 <Card /> component:
<Card title="Planning & Strategy" icon={<AceternityIcon order="Phase 1"/>}
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

Highest Price
$NA
Average Price
$NA
Lowest Price
$NA
AI Price Forecast
$NA

Insights

Limited Preview Only


Real Product Contains All Files And Full Code

Check dependencies

See product external dependencies

Randomly Selected Sample File

Project File Statistics

Hierarchy

Choose a sample file
X

Stay in touch

  • Get Practical Tips For Business and Developers.
  • Learn about PieceX Community Needs for Source Code Projects.
  • Be the First to Know PieceX Newest Free Community Code Projects.
PieceX Logo