A modern professional developer portfolio Built with Next.js following a JAMstack architecture, leveraging static site generation for optimal performance and deployed automatically on Vercel.
- Professional first impression with clear value proposition
- Comprehensive project showcase with detailed case studies
- Professional background and skills evaluation system
- Responsive mobile-optimized experience across all devices
- Simple contact system with professional networking links
This portfolio follows JAMstack architecture principles with modern tooling for optimal performance, maintainability, and developer experience:
| Category | Technology | Version | Role | Why This Choice |
|---|---|---|---|---|
| 🖥️ Frontend |  |
15.0 | React framework with App Router | SSG capabilities, performance, modern routing |
 |
18+ | UI library | Mature ecosystem, reusable components | |
 |
4 | Utility-first CSS framework | Rapid development, consistent design system | |
 |
Latest | Icon system | Lightweight, optimized SVGs, tree-shaking | |
| ⚙️ Business Logic |  |
- | State management | Simple, performant state handling |
 |
- | Reusable logic | Clean separation of concerns | |
 |
- | Modern JavaScript modules | Native standards, optimization | |
| 🔧 Development Tools |  |
18+ | JavaScript runtime | npm ecosystem, modern tooling |
 |
8+ | Package manager | Performance, disk space efficiency | |
  |
Latest | Code quality | Consistent coding standards | |
| 🚀 Services & APIs |  |
- | Form handling | No backend required, spam protection |
 |
v4 | Repository data | Dynamic project information | |
 |
- | Performance monitoring | Privacy-friendly, built-in | |
| 📦 CI/CD & Deployment |  |
- | CI/CD pipeline | Native integration, automated workflows |
 |
- | Hosting and deployment | Edge network, preview deployments | |
 |
- | Version control | Collaboration, history tracking | |
| 📄 Content Management |   |
- | Content format | Rich content, component embedding |
 |
- | Configuration | Type-safe, easy maintenance | |
 |
- | Content management | Version control, developer-friendly |
- Node.js 18+ (LTS recommended)
- pnpm 8+ (package manager)
- Git (version control)
- GitHub Account (for GitHub Actions)
- Vercel Account (for deployment)
# Clone repository
git clone https://github.com/sikatikenmogne/portfolio.git
cd portfolio
# Install dependencies
pnpm install
# Start development server
pnpm run dev
# → Open http://localhost:3000
# Build for production
pnpm run build
# Start production server
pnpm run start
portfolio/
├── .github/workflows/ # GitHub Actions CI/CD
├── src/
│ ├── app/ # Next.js App Router (pages & layouts)
│ ├── components/ # Reusable React components
│ │ ├── navigation/ # Header, footer, navigation
│ │ ├── projects/ # Project cards, filters, details
│ │ ├── profile/ # About, skills, experience
│ │ ├── contact/ # Contact form, social links
│ │ └── shared/ # Layout, SEO, error boundaries
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and services
│ └── data/ # Configuration and static data
├── content/ # Git-based CMS (Markdown files)
│ ├── projects/ # Project case studies
│ ├── blog/ # Technical articles
│ └── profile/ # About, experience, education
├── public/ # Static assets (images, icons, docs)
├── scripts/ # Build and utility scripts
├── .env.example # Environment variables template
└── next.config.mjs # Next.js configuration
This portfolio is currently under active development. Some features may be incomplete or under implementation.
- User Interface
- Navigation System
- Contact Form
- Dark/Light Theme
- Projects Showcase
- Technical Blog
- Automated Testing
- Internationalization
Last Update: September 2025
This project follows the Contributor Covenant code of conduct. By participating, you are expected to uphold this code.
- Fork the project
- Create a branch (
git checkout -b feature/improvement) - Commit using conventional commits (
git commit -m 'feat: add improvement') - Push (
git push origin feature/improvement) - Open a Pull Request
This project uses Conventional Commits specification for commit messages. This leads to more readable messages that are easy to follow when looking through the project history.
Format: <type>[optional scope]: <description>
Common types:
feat:new feature for the userfix:bug fix for the userdocs:changes to documentationstyle:formatting, missing semi colons, etcrefactor:refactoring production codetest:adding missing tests, refactoring testschore:updating grunt tasks etc
main: Production-ready code, auto-deployed to live sitedevelop: Integration branch, auto-deployed to preview environmentfeature/*: Feature branches, merged to develop via PRhotfix/*: Critical production fixes, merged directly to main and back to develop
%%{init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#ffffff',
'primaryTextColor': '#333333',
'primaryBorderColor': '#E60012',
'lineColor': '#333333',
'git0': '#E60012',
'git1': '#E3F2FD',
'git2': '#E8F5E8',
'git3': '#FFF3E0',
'git4': '#F3E5F5',
'gitBranchLabel0': '#ffffff',
'gitBranchLabel1': '#333333',
'gitBranchLabel2': '#333333',
'gitBranchLabel3': '#333333',
'gitBranchLabel4': '#333333',
'commitLabelFontSize': '10px'
}
}}%%
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Setup"
commit id: "Feature A"
branch feature/auth
checkout feature/auth
commit id: "Auth System"
checkout develop
merge feature/auth
commit id: "Feature B"
checkout main
merge develop
commit id: "Release v1.0"
branch hotfix/critical-bug
checkout hotfix/critical-bug
commit id: "Fix Bug"
checkout main
merge hotfix/critical-bug
commit id: "Hotfix v1.0.1"
checkout develop
merge main
checkout develop
commit id: "Feature C"
branch feature/new-component
checkout feature/new-component
commit id: "New Component"
checkout develop
merge feature/new-component
checkout main
merge develop
commit id: "Release v1.1"
This portfolio is licensed under Creative Commons Attribution 4.0 International License. See the LICENSE file for full details.
For any questions or support, please email us via:
Built with ❤️ by Samuel SIKATI