First, you should know that you'll need to install some dependencies to be able to run the project.

  1. install node.js environment
  2. install VSCode
  3. Open the portfolio project in VS Code to edit the code and preview it in your Chrome browser.
  4. Replace the portfolio data with your personal information. It's recommended to have basic knowledge of JavaScript arrays and objects to edit the data more easily.
  5. Add appropriate images in place of the placeholder images.
  6. Enable the contact form to allow users to send messages via email.
  7. Deploy the portfolio using a hosting provider Vercel to make it accessible online.
  8. Test the contact form and other functionalities to ensure everything works properly

    9. Folder Structure - files/folders that should modified

      ├── public                          # [Folder] images and cv file
│   ├── images                      # [Folder] Images
│   │   ├── projects                # [Folder] Project images
│   │   ├── tools                   # [Folder] Tool images
│   │   ├── clients                 # [Folder] Client images
│   │   ├── about.png               # [File] About image
│   │   └── hero.png                # [File] Hero image
│   └── cv.pdf                      # [File] CV PDF file
├── src                             # [Folder] Source Folder (main folder)
│   ├── _actions                    # [Folder] Actions (specifically for form action)
│   ├── app                         # [Folder] App router
│   │   └── favicon.ico             # [File] favicon image
│   ├── components                  # [Folder] Components
│   ├── data                        # [Folder] Data (portfolio data) modify all files inside
│   │   ├── about.ts                # [File] About section data
│   │   ├── contact.ts              # [File] Contact section data
│   │   ├── experience.ts           # [File] Experience section data
│   │   ├── config.ts               # [File] configuration file ( theme configuration)
│   │   ├── home.ts                 # [File] Home section data
│   │   ├── projects.ts             # [File] Projects section data
│   │   └── services.ts             # [File] Services section data
│   ├── context                     # [Folder] Context for global state management
│   ├── hooks                     # [Folder] Context for global state management
│   ├── libs                        # [Folder] Custom hooks
│   ├── shared                      # [Folder] Shared types or colors
│   └── styles.module.css           # [Folder] CSS styles module
├── .env                            # [File] Environment variables file
├── .eslintrc                       # [File] Eslintrc file
├── .gitignore                      # [File] Git ignore file
├── components.json                 # [File] Components description
├── next-env.d.ts                   # [File] Environment variables types
├── next.config.mjs                 # [File] Next.js configuration
├── package-lock.json               # [File] NPM lock file
├── package.json                    # [File] NPM lock file
├── postcss.config.mjs              # [File] Postcss configuration
└── tsconfig.ts                     # [File] Project readme
  1. install node.js
  2. install VSCode
  3. open VSCode and open the portfolio project folder Portfolio folder that contains of public, src, .env, etc... files
  4. press CTRL + J to open the terminal and then select output
  5. choose command prompt instead of powershell
  6. write: node -v and press Enter to show the version of nodejs and sure you installed properly otherwise there is a problem about installation
  7. write: npm i and press Enter to install node_modules folder
  8. write: npm run dev and press Enter to open the project in your computer as a server
  9. you will find http://localhost:3000 in the output just press Ctrl + click on http://localhost:3000 to open the link on browser
  10. now you can customize the portfolio and show your customization on the web page without reload the page
  11. you should know that before start: all editing will be on data folder for portfolio data and public folder for images and cv file and .env file for sending mails
  12. try to learn from mockup images and data to understant how to modify the portfolio to fit you and your needs

if you want edit template easily just you need simple knowledage of js variables,arrays and objects to edit the portfolio and it's really simple and here the explanation:

javascript variables

  • Variables are Containers for Storing Data
  • example const name = "Daniel Mark"
  • there are data type and we will use:
  • string for texts, example const about_me = "I Love Programming ...."
  • number, example const years_experience = 9
  • boolean values for true or false, example const is_available = true

javascript objects

  • In real life, objects are things like: houses, cars, people, animals, or any other subjects.
  • example const hero = { name: "Daniel Mark", job: "Web Developer", image: "/images/hero.png" }

javascript arrays

  • An array is a special variable, which can hold more than one value and wrapped by [ ] for example: ["john", "daniel", "mark"]
  • example: const skills = ["graphic design", "programming", "anaysis"]
  • and we can create array of objects: [ {skill: "a", progress: 90}, {skill: "b", progress: 78} ]

data folder

  • Inside the /data folder, you’ll find all the sections of the portfolio (e.g., about, projects, skills, etc.).
  • Each section contains variables and blocks of properties that define its content. To personalize the portfolio, update these values with your own information. For example, change the name, description, or image paths to match your data.
  • The structure is consistent across all sections
  • you can add or remove and edit , you have the full control
  • you will just replace some of texts and images paths to fit yours needs
  • Do not change the names of constants or keys. Only modify the values to suit your needs.

1 - colors

  • You can edit the theme colors by modifying the CSS variables in src/app/global.css
  • if you want to change theme color, copy colors code for example #3b82f6 and paste it in css vars, for example--main

--main-color & --gradient-to

  1. blue: #3b82f6
  2. green #22c55e
  3. red #ef4444
  4. yellow #eab308
  5. orange #f97316
  6. pink #ec4899
  7. purple #a855f7
  8. cyan #06b6d4
  9. teal #14b8a6
  10. lime #84cc16
  11. fuchsia #d946ef
  12. black #000


--cursor-color

  1. blue: #60a5fa
  2. green #4ade80
  3. red #f87171
  4. yellow #facc15
  5. orange #fb923c
  6. pink #f472b6
  7. purple #c084fc
  8. cyan #22d3ee
  9. teal #2dd4bf
  10. lime #a3e635
  11. fuchsia #e879f9


--cursor-heavy-color

  1. blue: #172554
  2. green #052e16
  3. red #450a0a
  4. yellow #422006
  5. orange #431407
  6. pink #500724
  7. purple #3b0764
  8. cyan #083344
  9. teal #042f2e
  10. lime #1a2e05
  11. fuchsia #4a044e
  12. black #000


2 - (dark, light)

by modifying dark_theme in src/data/config.ts

3 - smooth scrolling

by modifying smooth_scrolling and smooth_scrolling_duration in src/data/config.ts

4 - theme variants

  • home_background
  • about_section
  • project_card_option
  • project_image_aspect
  • open public folder and then images and there are projects, tools, hero.png
  • svg repo for tool images, and you can download the tool image as a .png
  • You don’t need to match the exact dimensions of the placeholder images.
  • When you want to add your image (or any image), place it in the images folder. Then, in the data file, update the corresponding property with the image source - for example: /images/hero.png.
  • Replace the existing placeholder images with your own appropriate images.
  • replace these images by your images
  • Delete the cv.pdf file from the public folder and replace it with your actual CV file.
  • Place your project images inside the images/projects folder. Then, in data/projects.ts, update the image paths accordingly.
  • example image: "/images/projects/1-1.jpg"
  • Add your tool icons or images in the images/tools folder. Then, in data/projects, update the image source paths.
  • example image: "/images/tools/nextjs.png"
  • there are predefined icons in data folder's files and easy to use
  • but if you want to get more icons click here and search for the needed icon, just see the name of icon and write it by cammel case like Database
  • example import {Database} from "lucide-react";
  • example Icon: Database
    • or
  • example import {Database as database} from "lucide-react";
  • example Icon: database
  • both methods are correct
    • open .env file
    • create app password from google just go to google, and select privacy section and search for app password and create one and then copy it to add to APP_PASSWORD and the app password contains of 16 characters and don't forget to remove spaces between password
    • add your actual email in EMAIL and look at the example below
    • you can test it to send to your self
    1. install Git
    2. test this command in VSCode terminal:
      1. git -v
      2. you should see the version of git to ensure proper installation
    3. create a github account github
    4. create new repository
    5. write Repository name and make it Private and then create repository
    6. open the terminal in VSCode and copy command lines line by line to push the all portfolio files to your repository, so follow these steps
    7. if you are a new user git config --global user.email "you email here"
      1. git init
      2. git add . to add all files
      3. git commit -m "first commit"
      4. git branch -M main
      5. copy your own: git remote add origin https://github.com/********
      6. git push -u origin main
    8. create vercel account Vercel
    9. click on Add New... button and select project
    10. continue with GitHub
    11. import the portfolio project
    12. write project name and add environment variabels for contact form
    13. Deploy & Enjoy!
    14. optional: Enable analytics
      1. analytics tab
      2. enable it
      3. refresh the page
    15. If you want to make updates later write these commands in VSCode terminal
      1. git add .
      2. git commit -m "update somthing"
      3. git push origin main

    If you face any problem or have confusion about something or have any sugesstion please contact me any time contact me

    • know more about VSCode by watching some videos, how to use, how to add extenstions that make your life easier
    • don't change const variables to another name that exists in data folder's files about.ts, projects.ts, etc..., just edit the values
    • focus when editing
    • if you face any confusion about modification you can know more about javascript variables & datatypes, arrays ,objects
    • choose appropriate images to add
    • hero's image must be .png, so if you have an jpg image you can remove image's background by remove background online tools like
    • about's image maybe .png or jpg it's up to you
    • you can get used tools images from svg repo and that i used in portfolio
    • add your project's screen shots images
    • know more about deployment by watching some videos deploy to vercel
    dark
    light