Construire un portfolio personnel moderne » ?

Un tutoriel étape par étape sur le développement du site Web de portfolio parfait à l'aide du framework Next.js pour un meilleur accès aux ressources du portfolio via un site Web visuellement attrayant avec de belles animations de particules et des transitions fluides et ressources interactives pour des expériences améliorées. voici le lien en direct mon-portfolio

? Caractéristiques

• Conception réactive pour tous les appareils
• Fond de particules interactif
• Transitions de pages fluides
• Vitrine de projets dynamiques
• Formulaire de contact avec validation par email
• CV téléchargeable
• Intégration des réseaux sociaux
• Section Blog
• Visualisation des compétences professionnelles
• Prise en charge de Docker pour la conteneurisation

?️ Construit avec

• Suivant.js 14
• Réagir 18
• CSS Tailwind
• Mouvement du cadreur
• Icônes de réaction
• Swiper
• Articles TSP
• Composants de l'interface utilisateur Radix
• Docker

?‍♂️ Pour commencer

Conditions préalables

• Node.js 18 ou supérieur
• npm ou fil

Installation

1. Clonez le dépôt :

   git clone https://github.com/B-KEY/BIBEK-PORTFOLIO.git

1. Installer les dépendances :

   npm install
   # or
   yarn install

1. Exécutez le serveur de développement :

   npm run dev
   # or
   yarn dev

1. Ouvrez http://localhost:3000 dans votre navigateur.

Si vous préférez la configuration Docker

1. Construisez l'image Docker :

   docker build -t portfolio .

1. Exécutez le conteneur :

   docker run -p 3000:3000 portfolio

? Structure du projet

portfolio/
├── app/ # Next.js app directory
│   ├── contact/ # Contact page
│   ├── resume/ # Resume page
│   ├── work/ # Projects showcase
│   └── layout.jsx # Root layout
├── components/ # Reusable components
├── public/ # Static assets
└── styles/ # Global styles

? Déploiement

Le projet peut être déployé sur Vercel avec ces étapes :

1. Poussez votre code sur GitHub
2. Connectez votre référentiel à Vercel
3. Déployez en un seul clic

? Variables d'environnement

Créez un fichier .env.local dans le répertoire racine :

NEXT_PUBLIC_CONTACT_FORM_KEY=your_form_key
Also add username and api for Blog

? Contribuer

1. Fork le référentiel
2. Créez votre branche de fonctionnalités (git checkout -b feature/AmazingFeature)
3. Validez vos modifications (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (fonctionnalité git push origin/AmazingFeature)
5. Ouvrir une Pull Request

? Licence

Ce projet est sous licence ISC - voir le fichier LICENSE pour plus de détails.

? Auteur

Bibek Thapa

• LinkedIn : bibek-thapa1
• GitHub : @B-KEY

? Remerciements

• L'équipe Next.js pour l'incroyable framework
• Vercel pour l'hébergement
• Tous les contributeurs open source
• Inspiration partielle de cristianmihai01

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!