Converted to Next.js with full Server-Side Rendering support

Modern portfolio with Next.js SSR, TypeScript, and multi-language support 🚀

• Server-Side Rendering (SSR): Full SSR support for better SEO and initial load performance
• Multi-language Support: English and German localization with automatic language detection
• Dark/Light Theme: Theme toggle with system preference detection
• Responsive Design: Mobile-first responsive design using Bootstrap
• TypeScript: Full type safety throughout the application
• Modern Stack: Next.js 14, React 18, SCSS modules

• Next.js 14
• React 18
• TypeScript 5
• Bootstrap 5
• SCSS
• React Bootstrap
• React Vertical Timeline
• Iconify

Edit src/data/en.json, src/data/de.json and public/images for your data

# Install dependencies
yarn install
# or
npm install

# Start dev server
yarn dev
# or
npm run dev

Open http://localhost:3000 to view the portfolio.

# Build
yarn build
# or
npm run build

# Start production server
yarn start
# or
npm start

portfolio/
├── pages/              # Next.js pages
│   ├── _app.tsx       # App wrapper
│   ├── _document.tsx  # Document wrapper
│   └── index.tsx      # Home page (SSR)
├── src/
│   ├── components/    # React components
│   ├── data/          # Portfolio data (en.json, de.json)
│   ├── scss/          # SCSS styles
│   └── utils/         # Utility functions
├── public/            # Static assets
└── next.config.js     # Next.js configuration

• Language Detection: Server-side language detection from browser headers
• SEO Optimization: Meta tags and proper HTML structure for search engines
• Performance: Optimized initial page load with SSR
• i18n Support: Built-in internationalization with Next.js i18n

Update language content in:

• src/data/en.json - English content
• src/data/de.json - German content

Theme variables are in:

• src/scss/themes/theme-dark.scss
• src/scss/themes/theme-light.scss

# Deploy to Vercel
vercel
# or
vercel --prod

Build the project and deploy the .next folder along with public, package.json, and next.config.js.

Pull requests are welcome! Feel free to improve the portfolio.

See LICENSE file for details.

Mohammad Shbool - Senior Software Engineer & Mobile Engineer

• LinkedIn: mohammad-shbool
• GitHub: @mohshbool