Loading repository data…
Gitnaseem745 / repository
A minimal and modern portfolio website built with Next.js 14+, TypeScript, and TailwindCSS. Features a clean, responsive design with light/dark theme support and smooth animations.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A minimal and modern portfolio website built with Next.js 14+, TypeScript, and TailwindCSS. Features a clean, responsive design with light/dark theme support and smooth animations.
Live Demo: View Live Site | Preview:
Selected from shared topics, language and repository description—not editorial ratings.
xyzprtk /
A developer portfolio featuring a scalable Next.js architecture, optimized rendering (SSR/ISR), responsive design, semantic HTML, automatic dark mode, text-animation components, and an integrated MDX blog support with dynamic Metadata. Built for speed, clarity, and maintainability.
55/100 health| Category | Technology | Version |
|---|---|---|
| Framework | Next.js | 14+ |
| Language | TypeScript | 5.0+ |
| Styling | TailwindCSS | 3.0+ |
| Animations | Framer Motion | Latest |
| Icons | Lucide React | Latest |
| Theming | next-themes | Latest |
| Code Quality | ESLint + Prettier | Latest |
Before you begin, ensure you have the following installed:
git clone https://github.com/Gitnaseem745/portfolio-wisp-blog.git
cd portfolio-wisp-blog
npm install
# or
yarn install
npm run dev
# or
yarn dev
Visit http://localhost:3000 to see your portfolio in action! 🎉
Create a .env.local file in the root directory for any environment variables:
# Example environment variables
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id
portfolio-wisp-blog/
├── 📁 public/ # Static assets
│ ├── 🖼️ images/ # Image assets
│ └── 📄 *.svg # SVG icons
├── 📁 src/
│ ├── 📁 app/ # Next.js App Router pages
│ │ ├── 📄 layout.tsx # Root layout
│ │ ├── 📄 page.tsx # Home page
│ │ └── 📁 blog/ # Blog pages
│ ├── 📁 components/ # Reusable UI components
│ │ ├── 🎨 button.tsx # Custom button component
│ │ ├── 🎨 header.tsx # Navigation header
│ │ ├── 🎨 footer.tsx # Site footer
│ │ └── 🌙 theme-toggle.tsx # Dark/light mode toggle
│ ├── 📁 sections/ # Page sections
│ │ ├── 🏠 hero-section.tsx
│ │ ├── 💼 experience-section.tsx
│ │ ├── 🛠️ skills-section.tsx
│ │ └── 📧 contact-section.tsx
│ ├── 📁 lib/ # Utility functions
│ └── 📁 config/ # Configuration files
│ └── ⚙️ siteConfig.ts # Site-wide settings
├── 📄 package.json # Dependencies and scripts
├── 📄 tailwind.config.ts # TailwindCSS configuration
├── 📄 tsconfig.json # TypeScript configuration
└── 📄 next.config.ts # Next.js configuration
| Script | Command | Description |
|---|---|---|
| Development | npm run dev | 🚀 Start development server with hot reload |
| Build | npm run build | 🏗️ Build optimized production bundle |
| Start | npm run start | ▶️ Start production server |
| Lint | npm run lint | 🔍 Run ESLint for code quality checks |
| Lint Fix | npm run lint:fix | 🔧 Fix ESLint issues automatically |
| Type Check | npm run type-check | 📝 Run TypeScript type checking |
# Start development with hot reload
npm run dev
# Run linting and type checking
npm run lint && npm run type-check
# Build for production
npm run build
# Preview production build locally
npm run start
Customize your portfolio by editing src/config/siteConfig.ts:
export const siteConfig = {
name: "Your Name",
title: "Your Portfolio Title",
description: "Your portfolio description",
url: "https://yoursite.com",
// ... more configurations
}
Available customizations:
The portfolio supports both light and dark modes with:
src/sections/Example:
// src/sections/new-section.tsx
export function NewSection() {
return (
<section className="py-20">
{/* Your content */}
</section>
);
}
Deploy your portfolio to Vercel with one click:
Manual Vercel deployment:
The portfolio builds to static files and can be deployed anywhere:
| Platform | Command | Notes |
|---|---|---|
| Netlify | npm run build | Drag & drop out/ folder or connect via Git |
| GitHub Pages | npm run build | Use GitHub Actions for automatic deployment |
| AWS S3 | npm run build | Upload out/ folder to S3 bucket |
| Firebase Hosting | npm run build | Use Firebase CLI to deploy |
# Build for production
npm run build
# The build output will be in the 'out' directory
# Ready for static hosting deployment
For production deployment, set these environment variables:
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id
# Add other environment variables as needed
We welcome contributions from the community! Here's how you can help:
git checkout -b feature/amazing-featuregit commit -m 'feat: add amazing feature'git push origin feature/amazing-featurenpm run lint before committingThis project is licensed under the MIT License - see the LICENSE file for details.
MIT License
Copyright (c) 2025 Naseem's Portfolio
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Made with ❤️ by Naseem Ansari