A modern, full-featured personal portfolio and digital presence built with Next.js 15
Live Site: lokmanefe.com
A comprehensive personal website showcasing projects, technical writing, and reading journey. Built with modern web technologies and optimized for performance, SEO, and user experience.
- Dynamic Project Showcase: Interactive project gallery with filtering, search, and detailed view
- Markdown-Powered Blog: Git-based content management with frontmatter support
- Reading Tracker: Personal library with analytics, goals, and progress tracking
- Responsive Design: Seamless experience across all devices
- Dark Mode: System-aware theme switching with persistent preferences
- Smart Search: Full-text search across projects, technologies, and content
- Category Filtering: Organize content by type, technology, and status
- RSS Feeds: Syndication for blog posts and book reviews
- Social Integration: GitHub, LinkedIn, and LeetCode profile integration
- Analytics Dashboard: Reading goals, velocity tracking, and genre distribution
- Static Generation: Pre-rendered pages for optimal loading speed
- SEO Optimized: Meta tags, structured data, and social sharing
- Image Optimization: Next.js Image component with lazy loading
- Font Optimization: Custom font loading with performance best practices
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.0
- Styling: Tailwind CSS + shadcn/ui components
- Animations: CSS transitions and transforms
- Icons: Lucide React
- Blog Posts: Markdown with gray-matter frontmatter
- Book Reviews: Structured markdown with metadata
- Projects: JSON-based configuration with image assets
- Package Manager: npm
- Linting: ESLint with TypeScript rules
- Formatting: Prettier (auto-formatting)
- Git Hooks: Pre-commit validation
- Platform: Vercel (recommended)
- Domain: Custom domain with SSL
- Analytics: Built-in Vercel Analytics
- Node.js 18.0 or later
- npm 9.0 or later
# Clone the repository
git clone https://github.com/lokicik/lokmanefe.com.git
cd lokmanefe.com
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to see the site.
# Create optimized production build
npm run build
# Start production server
npm startCreate posts in content/posts/:
---
title: "Building Scalable AI Applications"
date: "2025-01-15"
excerpt: "Lessons learned from architecting production AI systems"
published: true
tags: ["ai", "architecture", "nextjs"]
readingTime: 8
---
Your content here...Add books to content/books/:
---
title: "Clean Architecture"
author: "Robert C. Martin"
rating: 5
status: "completed"
currentPage: 352
pages: 352
startDate: "2024-01-01"
completedDate: "2024-01-15"
tags: ["architecture", "software-engineering"]
---
Review content...Configure projects in src/components/projects-page-content.tsx:
{
id: "project-name",
title: "Project Title",
description: "Brief description",
longDescription: "Detailed description for featured projects",
category: "Full-Stack",
technologies: ["Next.js", "TypeScript", "Go"],
githubUrl: "https://github.com/user/repo",
liveUrl: "https://project-demo.com",
imageUrl: "/projects/screenshot.png",
featured: true,
year: 2025,
}lokmanefe.com/
├── content/ # Content management
│ ├── posts/ # Blog posts (markdown)
│ ├── books/ # Book reviews (markdown)
│ └── projects/ # Project screenshots
├── public/ # Static assets
│ ├── projects/ # Project images
│ └── favicon.svg # Site favicon
├── src/
│ ├── app/ # Next.js app router
│ │ ├── blog/ # Blog pages
│ │ ├── reading/ # Reading tracker
│ │ ├── projects/ # Projects showcase
│ │ └── globals.css # Global styles
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── blog-*.tsx # Blog components
│ │ ├── reading-*.tsx # Reading components
│ │ └── projects-*.tsx # Project components
│ └── lib/ # Utility functions
│ ├── markdown-*.ts # Content parsers
│ └── utils.ts # Helper functions
├── components.json # shadcn/ui configuration
├── tailwind.config.js # Tailwind CSS config
└── next.config.ts # Next.js configuration
- Update contact details in
src/app/page.tsx - Modify navigation links in
src/components/navigation.tsx - Add your social profiles to the contact section
- Customize colors in
tailwind.config.js - Update fonts and typography in
src/app/globals.css - Modify component themes in individual component files
- Add new project categories in the projects configuration
- Create custom book metadata fields
- Extend the reading analytics with new metrics
- Progress tracking with completion rates
- Reading velocity and pace analysis
- Genre distribution and diversity metrics
- Year-over-year reading goals
- Page views and engagement (via Vercel Analytics)
- Most popular projects and blog posts
- Search query analysis
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # Run TypeScript compiler- ESLint: Enforces coding standards and catches errors
- TypeScript: Static type checking for reliability
- Prettier: Automatic code formatting
- Git Hooks: Pre-commit validation
- Push code to GitHub
- Connect repository to Vercel
- Configure custom domain
- Enable analytics and monitoring
- Static Generation: All pages pre-rendered at build time
- Image Optimization: Automatic WebP conversion and lazy loading
- Bundle Analysis: Use
npm run analyzeto inspect bundle size - Caching: Optimized cache headers for static assets
This is a personal portfolio, but you're welcome to:
- Report issues or bugs
- Suggest improvements
- Use as a template for your own portfolio
- Submit pull requests for general enhancements
MIT License - See LICENSE for details.
Built with ❤️ by Lokman Efe
If you found this portfolio inspiring, feel free to star ⭐ the repository!