Skip to content

A sleek and minimal dark-themed website designed to showcase your skills with animated progress bars. Fully optimized for mobile and desktop devices.

License

Notifications You must be signed in to change notification settings

paoloronco/skills-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

Skills Website

Overview

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

How It Works

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.

Technologies Used

  • Next.js (React framework)
  • TypeScript
  • Tailwind CSS
  • Other standard npm packages

Project Structure

├── 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

How to Edit the Site

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.

Local Development

  1. Install all required dependencies:
    npm install
  2. Run the development server:
    npm run dev

If you want to simulate a production build locally:

npm run build
npm start

Deployment

Deploy to Vercel

  1. Create a new project on Vercel.
  2. Connect your GitHub repository.
  3. Vercel will automatically detect the Next.js setup and configure the deployment.
  4. (Optional) Set environment variables if needed.

Self-Hosting

  1. Clone the repository:
    git clone https://github.com/your-username/your-repo.git
    cd your-repo
  2. Install dependencies:
    npm install
  3. Start the development server:
    npm run dev
  4. Build and run for production:
    npm run build
    npm start

About

A sleek and minimal dark-themed website designed to showcase your skills with animated progress bars. Fully optimized for mobile and desktop devices.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published