Responsive Modern and Clean Developer Portfolio Template
Developer
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
/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
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 <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.