developerFolio
Safe Release
Ändern Sie einfach src/portfolio.js um Ihr persönliches Portfolio zu erhalten. Passen Sie das Portfolio -Thema an, indem Sie Ihr eigenes Farbschema weltweit in der Datei src/_globalColor.scss verwenden. Fühlen Sie sich frei, es so zu verwenden oder so zu personalisieren, wie Sie möchten.
Wenn Sie einen Beitrag leisten möchten und dies für andere Benutzer viel besser machen möchten, schauen Sie sich Probleme an.
Etwas Fantastisches für Ihre Gabel des Portfolios erstellt und es teilen möchten? Fühlen Sie sich frei, eine Pull -Anfrage zu öffnen.
✔️ Zusammenfassung und über mich
✔️ Fähigkeiten
✔️ Ausbildung
✔️ Berufserfahrung
✔️ Open Source -Projekte, die mit GitHub verbunden sind
✔️ Große Projekte
✔️ Erfolge und Zertifizierungen?
✔️ Blogs
✔️ spricht
✔️ Podcast
✔️ kontaktieren Sie mich
✔️ Twitter Timeline
✔️ Github -Profil
Klicken Sie hier , um ein Live -Beispiel anzuzeigen.
Mit diesen Anweisungen werden Sie für die Entwicklung und Testzwecke eine Kopie des Projekts auf Ihrer lokalen Maschine in Betrieb genommen.
Sie benötigen Git und Node.js (die mit NPM geliefert) auf Ihrem Computer installiert sind oder Docker verwenden.
[email protected] or higher
[email protected] or higher
[email protected] or higher
1) BUILD IMAGE : docker build -t developerfolio:latest .
2) RUN IMAGE: docker run -t -p 3000:3000 developerfolio:latest
Aus Ihrer Befehlszeile klonen und führen Sie Entwicklerfolio aus:
# Clone this repository
git clone https://github.com/saadpasta/developerFolio.git
# Go into the repository
cd developerFolio
# Setup default environment variables
# For Linux
cp env.example .env
# For Windows
copy env.example .env
# Install dependencies
npm install
# Start a local dev server
npm startGenerieren Sie ein klassisches GitHub -Token für persönliche Zugriff nach diesen Anweisungen (stellen Sie sicher, dass Sie keinen Umfang auswählen. Erstellen Sie einfach ein einfaches Token). Wenn Sie GitHub -Aktionen verwenden, um Ihr Portfolio bereitzustellen, können Sie diesen Abschnitt überspringen.
HINWEIS: Konfigurieren von Umgebungsvariablen vor dem Bereitstellen Ihres Portfolios wird dringend empfohlen, da einige Komponenten von API -Daten abhängen.
- DeveloperFolio
- node_modules
- public
- src
- .env < -- create it here
- env.example < -- this is the base file
- .gitignore
- package-lock.json
- package.jsonREACT_APP_GITHUB_TOKEN und weisen Sie Ihr Github -Token wie diesen zu, fügen Sie auch Ihren Benutzernamen als GITHUB_USERNAME hinzu // .env
REACT_APP_GITHUB_TOKEN = " YOUR GITHUB TOKEN HERE "
GITHUB_USERNAME = " YOUR GITHUB USERNAME "
USE_GITHUB_DATA = " true " Setzen Sie showGithubProfile auf true oder false, um das Kontaktprofil mit GitHub zu zeigen, standardmäßig auf False.
Warnung: Behandeln Sie Ihre Token wie Passwörter und halten Sie sie geheim. Verwenden Sie bei der Arbeit mit der API Token als Umgebungsvariablen, anstatt sie in Ihre Programme zu schärfen.
HINWEIS: Open Source -Projekte Abschnitt Zeigen Sie nur festgestellte Elemente Ihres Github. Wenn Sie etwas wie unten gezeigt sehen, befolgen Sie diese Anweisungen.
Wenn die obige Lösung noch nicht funktioniert, besuchen Sie die Wiki -Seite.
Optional können Sie den Abschnitt Blogs mit Ihrem mittleren Benutzerkonto verknüpfen:
MEDIUM_USERNAME // .env
MEDIUM_USERNAME = " YOUR MEDIUM USERNAME "MEDIUM_USERNAME in .github/workflows/deploy.yml Setzen Sie displayMediumBlogs auf true oder false in portOfolio.js, um abgerufene Medium -Blogs anzuzeigen, Standardeinstellungen an true.
/src/portfolio.js und ändern Sie es gemäß Ihren Bedürfnissen. Sie müssen auch index.html ändern, um den Titel und die Metadaten zu ändern, um genaue SEO für Ihr persönliches Portfolio bereitzustellen. /* Change this file to get your Personal Porfolio */
const greeting = {
/* Your Summary And Greeting Section */
title : "Hi all I'm Saad" ,
subTitle : emoji ( "A passionate Full Stack Software Developer " ) ,
resumeLink : "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing"
} ;
const socialMediaLinks = {
/* Your Social Media Link */
github : "https://github.com/saadpasta" ,
linkedin : "https://www.linkedin.com/in/saadpasta/" ,
gmail : "[email protected]" ,
gitlab : "https://gitlab.com/saadpasta" ,
facebook : "https://www.facebook.com/saad.pasta7"
} ;
const skillsSection = { ... . }
const techStack = { ... . }
const workExperience = { ... . }
const openSource = { ... . }
const bigProjects = { ... . }
const achievementSection = { ... . }
const blogSection = { ... . }
const contactInfo = { ... . }
const twitterDetails = { ... } Um Ihren eigenen Lebenslauf hochzuladen, laden Sie einfach ein PDF in src/containers/greeting/resume hoch und benennen Sie die PDF in resume.pdf um.
Zum Hinzufügen von Emoji? Verwenden Sie in die Texte in Portfolio.js die Funktion emoji() und übergeben Sie den Text, den Sie als Argument benötigen. Dies würde dazu beitragen, Emojis über verschiedene Browser und Plattformen kompatibel zu halten.
Sie können einen Lottie auswählen und sie im JSON -Format von Websites wie diesem herunterladen. Ersetzen Sie in src/assets/lottie die Lottie JSON -Datei, die Sie mit demselben Dateinamen ändern möchten. Wenn Sie die Lottie-Optionen ändern möchten, wechseln Sie zu src/components/displayLottie/DisplayLottie.js und ändern Sie das defaultOptions -Objekt, Sie können Lottie-React-Dokumente für weitere Informationen zum Standard-Objekt defaultOptions finden.
Fügen Sie Ihren Twitter -Benutzernamen in portfolio.js ein, um Ihre aktuelle Aktivitäten auf Ihrer Seite anzuzeigen.
const twitterDetails = {
userName : "Your Twitter Username"
} ; Hinweis: Verwenden Sie nicht @ Symbol, wenn Sie den Benutzernamen hinzufügen.
Wenn Sie mit dem Setup fertig sind, sollten Sie Ihre Website online hosten. Wir empfehlen dringend, die Bereitstellung auf Github -Seiten für React durchzulesen.
Zuerst sollten Sie die GitHub -Aktionen für das von Ihnen verwendete Repository aktivieren.
Das Profil und die Repository -Informationen von GitHub werden nur zum Zeitpunkt der Bereitstellung erstellt, und die Website muss erneut eingesetzt werden, wenn diese Informationen aktualisiert werden müssen. Ein konfigurierbarer Cron -Job ist also eingerichtet, das Ihre Website jede Woche bereitstellt. Sobald Sie Ihr Profil auf GitHub aktualisieren, wird er in Ihrem Portfolio angezeigt. Sie können es auch manuell mit workflow_dispatch -Ereignis auslösen. Weitere Informationen finden Sie in dieser Anleitung, wie dies zu tun ist.
In diesem Abschnitt werden Sie Ihr Portfolio auf GitHub -Seiten bereitgestellt.
Navigieren Sie zu package.json und geben Sie Ihren Domain -Namen anstelle von https://developerfolio.js.org/ in homepage -Variable ein. Wenn Sie beispielsweise möchten, dass Ihre Website https://<your-username>.github.io/developerFolio ist, fügen Sie dasselbe dem Homepage-Abschnitt von package.json hinzu.
Kurz gesagt, Sie können package.json auch add /devloperFolio hinzufügen, da beide genau gleich sind. Auf diese Weise sagen Sie, dass create-react-app das Pfadvermögen entsprechend hinzufügt.
Konfigurieren Sie optional die Domäne. Sie können eine benutzerdefinierte Domäne mit GitHub -Seiten konfigurieren, indem Sie der public/ Ordner eine CNAME -Datei hinzufügen.
Folgen Sie den Leitfaden zum Einrichten von Github -Seiten der offiziellen CRA -Dokumente hier.
Sie können auch direkt mit Netlify hosten, indem Sie Ihr eigenes Repository verknüpfen.
Weitere Informationen finden Sie im Hosting auf Netlify.
Wenn Sie uns bei diesen helfen können. Bitte zögern Sie nicht, eine Pull -Anfrage zu öffnen.
Verbinden Sie sich mit LinkedIn, um Zusammenfassung, Fähigkeiten, Bildung und Erfahrung zu erhalten
Ziehen Sie nach Gatsby
Fügen Sie weitere Abschnitte hinzu
Saad Pasta | Kartik Choudhary | Naveen Mk | Muhammad Haschham |
Vielen Dank an diese wunderbaren Menschen (Emoji -Schlüssel):
Fawad Ali ? | Dasun Navoda | Brian Teeman | Rajkumar s | Slim Coder | Mohamed Sayyaf | Ashutosh Hathidara |
Rizwan Jamal ⚡️ | Muhammad Haschham | Ujjawal Joshi | Palak Sethi | Vinicius Barbosa | Bharat Kammakatla ? | Garima Singh |
Henry Heng ? | Pulkit Banta ? | Akshay Kumar ? | Amna Ejaz ? | Paras Nagpal | Sparsh Garg | Aashutosh Rathi |
Abhishek Kashyap ? | Lucas VC Nicolau | Bradley C. Herrin ? | Zekinah Lecaros | ungepeat | Arshad Ahmed | Xiaohui Liu ? |
Seunggyeon-Lee | Najam Shehzad | Randy Jesus Real Srsen | Tamojit Das | Waren Gonzaga | Benjamin Bourgeois | Keshav Jain |
Hanzla | Yogesh Rathod | Kunal Mundada | Anubhav Gupta | Vatsal Dave | Elvis Ciuffetelli | Scott Jellen ? |
Karthik Mohan ? | Mhowell11 | Gajanandh ? | JOOHYUKKIM | Roter Kopfhörer ? | Sunit Roy ? | Atir Nayab ? |
Shehriyar Qureshi | Respektech | Brayden ? | Canciu Costin | Atharv Singh | Ishan Khandelwal | Sergey Lyapustin |
Camila Pozas | Sai Teja ? | Vinit Hemadri | Njong Emy | Tamal Das | Dunsin | Muneeb Ahmed |
Qais Attarwala |
