Skip to content
← writing
· 3 min read

Skills Website — Node.JS for showcasing my skills in a modern and minimal way

skills.paoloronco.it is a personal website developed to present my professional skills clearly, elegantly, and dynamically. It's a project focused on essentiality...

skills.paoloronco.it is a personal website developed to present my professional skills clearly, elegantly, and dynamically.
It’s a project focused on essentiality: a modern interface, a fully dark design, and an optimized layout for both mobile devices and desktops.

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

Technologies and Tools Used

For this project, I primarily used:

  • Next.js — a React framework for modern and performant web sites.
  • TypeScript — a typed language that improves code quality and maintainability.
  • Tailwind CSS — a utility-first CSS framework to create consistent and responsive designs.
  • Node.js and npm — essential tools for dependency management and development environment.

Although I used Bolt AI to accelerate the initial development phase, this project was an important opportunity for me to consolidate fundamental technical knowledge:

  • Understanding the structure of a Next.js-based project.
  • Learning how to configure a development environment with Node.js and npm.
  • Improving my skills in writing modular React components with TypeScript.
  • Working with configuration files like tsconfig.json and next.config.js.
  • Applying practical concepts of responsive design and performance optimization.

This experience was not just about assembling code: I actively worked on the structure, data organization, and full customization of the interface.

Explore the Project

The site is publicly available and can be explored here:

? Official Site: skills.paoloronco.it

The complete source code is accessible on GitHub:

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

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

Site Structure

The Skills Website project is modular and easily extendable.
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/
│       │   └── skill.ts
│       └── utils/
│           ├── categoryIcons.tsx
│           └── motionProxy.tsx

This structure allows me to easily update content and design in the future without affecting the entire project base.

Why This Project is Important in My Journey

Skills Website represents a synthesis of minimalist design and solid technical foundations.
It’s not just about visually showcasing skills: it’s also a practical exercise in modern frontend development, understanding the latest JavaScript frameworks, and independently managing an entire workflow from design to deployment.

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

  • Translate abstract concepts into tangible web products.
  • Adapt to new technologies and development tools.
  • Manage the entire lifecycle of a project, from initial idea to online publication.