karnas.dev

Live Demo - karnas.dev 👈

A statically generated full-stack portfolio with a blog, inspired by VSC design, built using Next.js

Description

This project is a full-stack portfolio crafted with a blog feature, drawing inspiration from the sleek design aesthetics of Visual Studio Code (VSC) with the Monokai Theme.

This dynamic platform is built with Next.js, Markdown, React, TypeScript, Sass, CSS modules, and more.

Key Features

• Utilize Next.js server-side components for enhanced SEO, performance,
• Organize content with distinct grids for projects and blog posts, providing visual clarity,
• Craft a tab menu and sidebar that closely mimic Visual Studio Code (VSC) behavior, enhancing user navigation,
• Dynamically generate VSC-style menus with text and icons representing file extensions for an intuitive interface,
• Utilize Cloudinary for secure and scalable object storage, optimizing media file handling,
• Dynamically create representations of the technology stack using icons or icons with titles, providing insights into the project's architecture,
• Utilize Sass in conjunction with CSS Modules, to create a design system and modular styled components. This combination allows for a structured and scalable approach to styling, ensuring consistency and reusability across the application

Technologies Used

• Next.js
• Markdown
• React
• TypeScript
• SASS + CSS Modules
• Postman for API testing
• Continuously deployed on Vercel.com

Live Demo - karnas.dev 👈

The application is designed to be fully responsive, aiming to maintain a consistent user experience across different screen sizes. The goal is to provide a practical and user-friendly interface on par with Visual Studio Code (VSC) across all devices.

Install Dependencies

npm install

Run

# start the development server
npm run dev

Open http://localhost:3000 with your browser to see the result.

---