This is a Next.js project bootstrapped with create-next-app.

Nextjs Portfolio, multiple pages with dark mode

---

a portfolio for developers

Getting Started

First, run the development server: View Live Template

npm run dev
# or
yarn dev
# or
pnpm dev

features

---

🌑 Dark Mode Toggler

Open http://localhost:3000 with your browser to see the result. 📖 Multiple Pages (React Router)

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file. 📱 Fully Responsive

This project uses next/font to automatically optimize and load Inter, a custom Google Font. 🎨 Modern Design

Learn More

💡 Perfect Lighthouse Score

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

---

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

getting started

Deploy on Vercel

prerequisites

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

• have Git installed on your machine
• have Node.js installed on your machine
• basic familiarity with your machine's command line
• basic understanding of JSON data outline (arrays of objects basically)
• basic understanding of Nextjs framework

Check out our Next.js deployment documentation for more details.

how to use

• fork the repository and clone locally
• cd into the project and run npm install to install dependencies
• once installation is complete, run npm run dev to get your local copy running in the browser(localhost:3000).
• Added the how-tosteup.next.config.js to check how to configure the next.config.js for environment variables.

edit Info.js

Next, open the project in your code editor. Navigate to src/info/Info.js. There are some instructions written in the comments there, but I will go over it all here as well:

---

How to create project mock-ups in Canva

You must have a Canva account for this to work! If you don't want to create one, feel free to send me laptop and mobile sized screenshots of your projects and I will make some mocks for you! It just might take a couple days to get to them. My contact info can be found on my Github profile or in this readme. Feel free to contact via Twitter or email, or to open an issue on this project.

Now, then!

The easiest way is to click on this link and edit with the desktop and mobile views of your project.

1. Double-click the "computer" screen in the mockup linked above, and click "delete" on your keyboard to remove it. Do the same with the screenshot that is in mobile. Once completed, it should look like this:

2. On the left sidebar, click "uploads" and then "upload files" to upload your screenshots of your own project (get one for desktop view and one for mobile view)

3. Drag those screenshots into the appropriate frames, replacing the cloud-and-sky background. It should snap right in.

4. Finally, at the top right corner, click on the "Share" button and then "Download" -- set the file type to PNG, and then download. If you have Canva Premium, you can do this with a transparent background. If not, remove the background yourself using either a photo editor like Photopea, or an AI background remover (just google it, you can usually use them for free a few times).

5. These are the images you will want to put in the img/ folder of the project and name "mock1" "mock2" etc. etc. Hope this helps!

Test (Cypress)

Installing

Install Cypress for Mac, Linux, or Windows, then get started.

npm install cypress --save-dev

or

yarn add cypress --dev

Run Test

write npm run cypress in this project as the configuration is been done for this project!!