said7388/developer-portfolio said7388/developer-portfolio

  • Stars
    star
    257
  • Rank 154,210 (Top 4 %)
  • Language
    JavaScript
  • Created over 1 year ago
  • Updated 3 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
said7388/developer-portfolio
github

said7388

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Software Developer Portfolio Website built with next.js and tailwind CSS that helps you showcase your work and skills as a software developer.

Developer Portfolio

Want to create a professional portfolio but cannot figure out how to? Use Developer Portfolio and create your own personalised portfolio today! our easily customisable, user friendly website is designed to cater to developers and freelancers a like.

Demo 🎥

View live demo here.

Table of Contents 📜

Sections 🔖

  • HOME
  • ABOUT
  • RESUME
    • EDUCATION
    • SKILLS
    • EXPERIENCE
    • CERTIFICATES
    • PROJECTS
  • BLOG
  • CONTACTS

Installation ⬇️

You will need to download Git and Node to run this project

Also check this out if you are new to react.

Make sure you have the latest version of both Git and Node on your computer.

node --version
git --version

Getting Started 🎯

Fork and Clone the repo

To Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands

git clone https://github.com/<YOUR GITHUB USERNAME>/developer-portfolio.git

cd developer-portfolio

Clone with TypeScript

git clone -b typescript-version https://github.com/<YOUR GITHUB USERNAME>/developer-portfolio.git

cd developer-portfolio

Install packages from the root directory

npm install

or

yarn install

Start the development server

npm start

or

yarn start

Folder Structure 📂

╭ public
│   ├── _redirects
│   ├── favicon.ico
│   ├── favicon.png
│   ├── favicon512.png
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── assets
│   │   ├── fonts
│   │   │   └── Bestermind
│   │   │       └── BestermindRegular.ttf
│   │   ├── lottie
│   │   │   └── coding.json
│   │   │   └── development.json
│   │   │   └── education.json
│   │   └── svg
│   │       ├── about
│   │       ├── contacts
│   │       ├── education
│   │       ├── experience
│   │       ├── projects
│   │       ├── skills
│   │       └── Social
│   ├── components
│   │   ├── About
│   │   │   ├── About.css
│   │   │   └── About.js
│   │   ├── BackToTop
│   │   │   ├── BackToTop.css
│   │   │   └── BackToTop.js
│   │   ├── Blog
│   │   │   ├── Blog.css
│   │   │   ├── Blog.js
│   │   │   └── SingleBlog
│   │   │       ├── SingleBlog.css
│   │   │       └── SingleBlog.js
│   │   ├── Contacts
│   │   │   ├── Contacts.css
│   │   │   └── Contacts.js
│   │   ├── Education
│   │   │   ├── Education.css
│   │   │   ├── Education.js
│   │   │   └── EducationCard.js
│   │   ├── Experience
│   │   │   ├── Experience.css
│   │   │   ├── Experience.js
│   │   │   └── ExperienceCard.js
│   │   ├── Landing
│   │   │   ├── Landing.css
│   │   │   └── Landing.js
│   │   ├── Navbar
│   │   │   ├── Navbar.css
│   │   │   └── Navbar.js
│   │   ├── Projects
│   │   │   ├── Projects.css
│   │   │   ├── Projects.js
│   │   │   └── SingleProject
│   │   │       ├── SingleProject.css
│   │   │       └── SingleProject.js
│   │   ├── Skills
│   │   │   ├── Skills.css
│   │   │   └── Skills.js
│   │   ├── Animation
│   │   └── index.js
│   ├── contexts
│   │   └── ThemeContext.js
│   ├── data
│   │   ├── aboutData.js
│   │   ├── blogData.js
│   │   ├── contactsData.js
│   │   ├── educationData.js
│   │   ├── experienceData.js
│   │   ├── headerData.js
│   │   ├── projectsData.js
│   │   ├── skillsData.js
│   │   ├── socialsData.js
│   │   └── themeData.js
│   ├── index.css
│   ├── index.js
│   ├── pages
│   │   ├── Blog
│   │   │   ├── BlogPage.css
│   │   │   └── Index.js
│   │   ├── Home
│   │   │   └── Index.js
│   │   ├── Project
│   │   │   ├── ProjectPage.css
│   │   │   └── Index.js
│   │   └── index.js
│   ├── reportWebVitals.js
│   ├── theme
│   │   ├── images.js
│   │   └── theme.js
│   └── utils
│       └── skillsImage.js
├── .dockerignore
├── .env.example
├── docker-compose.yml
├── Dpckerfile
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

Usage 🕹️

Customize your details for each component in src/data folder.

Eg:

export const headerData = {
  name: "-- YOUR NAME --",
  title: "-- YOUR TITLE --",
  desciption: "-- DESCRIPTION --",
  image: "-- IMAGE --",
  resumePdf: "",
};

// You can also import image and PDF from assets as shown below

import resume from "../assets/pdf/resume.pdf";
import profileImg from "../assets/png/profileImg";

export const headerData = {
  name: "-- YOUR NAME --",
  title: "-- YOUR TITLE --",
  desciption: "-- DESCRIPTION --",
  image: profileImg,
  resumePdf: resume,
};

Data for each component is divided into respective files.

Choose your favourite font from src/App.css

About You - src/data/aboutData.js

Education details - src/data/educationData.js

Enter your Projects - src/data/projectsData.js

Add your Skills - src/data/skillsData.js

Experience - src/data/experienceData.js

Your Blogs and Articles - src/data/blogData.js

Contact Details - src/data/contactsData.js

Social Media Profiles - src/data/contactsData.js

// EXAMPLE
export const educationData = [
  {
    id: 1,
    institution: "-- INSTITUTION NAME --",
    course: "-- COURSE NAME --",
    startYear: "2017",
    endYear: "2019",
  },
  //
];

Instructions and format for each section can be found inside the data files.


Hosting 🌐

Netlify

Site Docs Demo
Netlify 3 ways to deploy React apps to Netlify Youtube

Firebase

Site Docs Demo
Firebase Deploy a React App with Firebase Youtube

Heroku

Site Docs Demo
Heroku Deploying React App on Heroku from GitHub Youtube

Github Pages

Site Docs Demo
GitHub Pages Deploying React App on GitHub Pages from GitHub Youtube

SEO 🕷️

Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.

Add the below code snippet to public/index.html with your site info. This step is not mandatory


<meta name="description" content="--- SITE DESCRIPTION ---" />
<meta property="og:image" content="--- YOUR IMAGE ---" />
<meta property="og:site_name" content="--- YOUR NAME ---" />
<meta property="og:title" content="--- YOUR NAME ---" />
<meta property="og:url" content="--- YOUR SITE URL ---" />
<meta property="og:type" content="website" />
<meta property="og:description" content="--- SITE DESCRIPTION ---" />
<meta property="og:locale" content="---  ---" />
<meta property="og:image" content="--- YOUR IMAGE ---" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<meta itemprop="name" content="--- YOUR NAME ---" />
<meta itemprop="url" content="--- YOUR SITE URL ---" />
<meta itemprop="description" content="--- SITE DESCRIPTION ---" />
<meta itemprop="thumbnailUrl" content="" />
<link rel="image_src" href="--- YOUR IMAGE ---" />
<meta itemprop="image" content="--- YOUR IMAGE ---" />

<meta name="twitter:site" content="@--- YOUR TWITTER USERNAME ---" />
<meta name="twitter:creator" content="@--- YOUR TWITTER USERNAME ---" />
<meta name="twitter:url" content="--- YOUR SITE URL ---" />
<meta name="twitter:title" content="--- YOUR NAME ---" />
<meta name="twitter:description" content="--- SITE DESCRIPTION ---" />
<meta name="twitter:image" content="--- YOUR IMAGE ---" />
<meta name="twitter:card" content="summary" />

Packages Used 📦

Client Side Packages
@material-ui/core
@material-ui/icons
@emailjs/browser
react-lottie
react-fast-marquee
react-helmet
react-icons
react-reveal
react-router-dom
react-router-hash-link
react-slick
slick-carousel
validator

Fonts and Images 🎭

Icons

Fonts

More Repositories

1

developer-portfolio-nextjs

Software Developer Portfolio Template built with NextJS and Tailwind CSS with dark and light mode that helps you showcase your work and skills as a software developer.
JavaScript
17
star
2

Github-Awesome-ReadMe

3
star
3

said7388

An awesome developer ReadMe for open source use.
2
star
4

Travel-Agency-client

JavaScript
2
star
5

Frontend-playground

JavaScript
1
star
6

Super-hero-developer

Programming Hero Assignment 08
JavaScript
1
star
7

first-react-ecommerce-app

JavaScript
1
star
8

git-actions-docker

JavaScript
1
star
9

mernboilerplate

JavaScript
1
star
10

Ridux-practice

JavaScript
1
star
11

practice-javascript

JavaScript
1
star
12

assignment-japan

JavaScript
1
star
13

Health-care

Programming Hero Assignment 10
JavaScript
1
star
14

javascript-checklist

JavaScript
1
star
15

firebase-notification

JavaScript
1
star
16

Inventory-managment-backend

JavaScript
1
star
17

meddical-backend

JavaScript
1
star
18

React-Dockerize

JavaScript
1
star
19

react-country-api

JavaScript
1
star
20

travel-app-frontend

TypeScript
1
star
21

react-news-api

JavaScript
1
star
22

travel-agency-server

JavaScript
1
star
23

random-user-api

JavaScript
1
star
24

first-rect-app

JavaScript
1
star
25

jewelry-niche-server

Programming Hero Assignment 12 Server Site
JavaScript
1
star
26

Express-MySql-CRUD-for-beginners

Very simple Express MySQl CRUD API for Absolute beginners!
JavaScript
1
star
27

jewelry-niche

Programming Hero Assignment 12
JavaScript
1
star
28

SmartHead

Online Learning Website Create For Programming Hero Assignment 09
JavaScript
1
star
29

css-carousel

JavaScript
1
star
30

express-rabbitmq-microservice

TypeScript
1
star
31

NFT-Marketplace

https://www.figma.com/file/dHbmdbDdFv89AWpFe3xkws/Website-NFT-Marketplace-(Community)?type=design&node-id=1-263&mode=design
JavaScript
1
star
32

Express-Postgres-blog

A complete blog application REST API using Express, Typescript, and PostgreSQL raw query. The API's are protected with JWT token-based authentication, implements data caching with Redis, and has been tested using Jest and Supertest.
TypeScript
1
star
33

strapi-portfolio

JavaScript
1
star
34

Digital-service-website

JavaScript
1
star