Skills Website — Showcasing My Skills in a Modern, Minimal Way with Node.js

skills.paoloronco.it It is a personal website developed to present my professional skills in a clear, elegant, and dynamic way.
It is a project focused on essentiality: a modern interface, a fully dark design, and a layout optimized for both mobile devices and desktop.

The site is already online and represents a real practical exercise in frontend design and development.

Technologies and tools used

To create this project I mainly used:

  • Next.js — React framework for modern and high-performance websites.
  • TypeScript — typed language that improves code quality and maintainability.
  • Tailwind CSS — system of utility classes to create a consistent and responsive design.
  • Node.js and npm — essential tools for dependency management and development environment.

Even though I have used Bolt AI to speed up the initial development phase, the project was an important opportunity for me to consolidate fundamental technical knowledge:

  • Understanding the structure of a project based on Next.js.
  • Learn how to set up a development environment with Node.js And npm.
  • Get better at writing modular React components with TypeScript.
  • Working with configuration files like tsconfig.json And next.config.js.
  • Apply practical concepts of responsive design and performance optimization.

This experience was not limited to simple code assembly: I actively worked on the structure, data organization and complete customization of the interface.

Explore the project

The site is publicly available and can be explored here:

? Official website:? skills.paoloronco.it

The full source code is accessible on GitHub:

? GitHub Repository:
? github.com/paoloronco/skills-website/tree/main

In the repository you can find the entire project structure, including React components, data management and configuration files.

Site structure

The Skills Website project is built in a modular and easily extensible way.
Some of the key files include:

├── project/ │ ├── .gitignore │ ├── .eslintrc.js (or .eslint.config.js) │ ├── index.html │ ├── package.json │ ├── package-lock.json │ ├── postcss.config.js │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── vite.config.ts │ ├── src/ │ ├── main.tsx │ ├── App.tsx │ ├── index.css │ ├── vite-env.d.ts │ ├── components/ │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── ScrollProgress.tsx │ │ ├── SkillCard.tsx │ │ ├── SkillCategory.tsx │ │ └── SkillsShowcase.tsx │ ├── data/ │ │ └── skills.ts │ ├── types/ │ │ └── skills.ts │ └── utils/ │ ├── categoryIcons.tsx │ └── motionProxy.tsx

This structure allows me to easily update content and design in the future, without having to intervene on the entire project base.

Why this project is important in my journey

Skills Website represents a synthesis between minimalist design and solid technical foundations.
It’s not just about showing skills visually: it’s also a practical exercise in modern frontend development, understanding next-generation JavaScript frameworks, and managing an entire workflow on your own, from design to deployment.

This project fits into my portfolio as a concrete demonstration of my ability to:

  • Translating abstract concepts into concrete web products.
  • Adapt to new technologies and development tools.
  • Manage an entire project lifecycle, from initial idea to online publication.