Modern, futuristic, and minimal website with both dark and light design modes.
It is fully responsive and adapts perfectly to both mobile and desktop screens.
Ideal for showcasing your skills and competencies through a stylish website with animated skill bars.
🔗 Live Demo: skills.paoloronco.it
The project is built with Next.js and TypeScript.
It uses a modular structure, making it easy to customize elements like the header, footer, and skill sections.
You can deploy it easily on Vercel or use self-hosting.
- Next.js (React framework)
- TypeScript
- Tailwind CSS
- Other standard npm packages
├── project/
│ ├── .gitignore
│ ├── .eslintrc.js (o .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
Key editable components:
-
Folder
src/
footer.tsx
— Edit the footer content.header.tsx
— Edit the navigation bar and site header.
-
Folder
src/Data/
skills.ts
— Edit the list of skills or technologies displayed.
- Install all required dependencies:
npm install
- Run the development server:
npm run dev
If you want to simulate a production build locally:
npm run build
npm start
- Create a new project on Vercel.
- Connect your GitHub repository.
- Vercel will automatically detect the Next.js setup and configure the deployment.
- (Optional) Set environment variables if needed.
- Clone the repository:
git clone https://github.com/your-username/your-repo.git cd your-repo
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Build and run for production:
npm run build npm start