Responsive Modern and Clean Developer Portfolio Template
Informações do produto
$91.82
Adicionar ao carrinhoDesenvolvedor
Chat público
Detalhes do produto
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
Instruções de instalação
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.
Instruções de alteração e adaptação
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.
Informações de preço
Estatísticas de preço
Insights
Produtos relacionados
-
Track even if phone is off
1. Fake Shutdown 2. Fake Airplane mode 3. Accident detect 4. SOS Mode 5. Low Battery 6. Intruder Selfie Track even if phone is off is designed to offer a comprehensive approach to mobile security, focusing not only on preventing unauthorized access but also on increasing the likelihood of re
added by ImKishan
$3,386.24
-
Equals Books Self Hosted
Invoice Management Accounting Payroll Sales and CRM Purchase and SRM
added by Afolabi
$4,840.00
-
Online Emoji Copy Paste Script
1: Extensive Emoji Collection: Access a vast collection of emojis, including smileys, animals, objects, and more. With our script, you'll have plenty of options to choose from to convey your emotions and messages effectively. 2: Easy Copy and Paste: Simply click on the emoji you want to use, and it
added by Ameer Hamza
$96.05
Hora do biscoito!
