Explore the key features and interface of My New Portfolio through these interactive screenshots.
The main landing page showcasing a clean, GitHub-inspired design with modern typography and smooth animations. Features a hero section with personal introduction and quick navigation to key sections.
Interactive projects gallery with advanced filtering, search functionality, and detailed project cards. Each project displays technologies used, GitHub stats, and quick access to live demos.
Fully responsive layout that adapts beautifully to all screen sizes. Mobile-first approach ensures optimal user experience across desktop, tablet, and mobile devices.
A modern, GitHub-inspired portfolio website built with Next.js 15, showcasing my projects, experience, and skills with a clean, professional design.
src/
āāā app/ # Next.js App Router pages
ā āāā layout.tsx # Root layout with Header/Footer
ā āāā page.tsx # Home page
ā āāā about/ # About page
ā āāā projects/ # Projects showcase
ā āāā experience/ # Work experience
ā āāā contact/ # Contact information
ā āāā api/ # API routes
ā āāā github-contributions/
ā āāā github-profile/
āāā components/ # Reusable components
ā āāā layout/ # Layout components
ā ā āāā Header.tsx
ā ā āāā Footer.tsx
ā ā āāā theme-provider.tsx
ā ā āāā index.ts
ā āāā home/ # Home page components
ā ā āāā ProfileSection.tsx
ā ā āāā ContributionsGraph.tsx
ā ā āāā index.ts
ā āāā projects/ # Project page components
ā ā āāā ProjectsSection.tsx
ā ā āāā index.ts
ā āāā ui/ # Generic UI components
ā ā āāā Tooltip.tsx
ā ā āāā input.tsx
ā ā āāā typewriter-effect.tsx
ā ā āāā index.ts
ā āāā icons/ # Custom icons
ā āāā index.tsx
āāā data/ # Static data
ā āāā index.ts
ā āāā projects.ts
āāā lib/ # Utilities
āāā utils.ts
Clone the repository
git clone https://github.com/adarsh3699/My-New-Portfolio.git
cd My-New-Portfolio
Install dependencies
pnpm install
# or
npm install
Start development server
pnpm dev
# or
npm run dev
Open your browser Navigate to http://localhost:3000
pnpm dev # Start development server with Turbopack
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
/) - Personal introduction and overview/about) - Detailed background and skills/projects) - Showcase of all projects with filtering/experience) - Professional work history/contact) - Contact information and formThe project uses a consistent design system inspired by GitHub's interface:
Edit src/data/projects.ts to add new projects:
{
id: "unique-id",
name: "Project Name",
description: "Project description",
technologies: ["React", "TypeScript"],
githubUrl: "https://github.com/...",
liveUrl: "https://...",
// ... other fields
}
Theme configuration is in src/components/layout/theme-provider.tsx. The system supports:
The project uses Tailwind CSS with custom GitHub-inspired utilities. Global styles are in src/app/globals.css.
The project is a standard Next.js application and can be deployed to:
Contributions are welcome! Please feel free to submit a Pull Request.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)ā If you found this portfolio helpful, please give it a star on GitHub!