Zain Ul-Abdeen's Portfolio Website

Explore the docs »

View Project · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
   • APIs
2. Getting Started
   • Prerequisites
3. Roadmap
4. Contact
5. Acknowledgments

About The Project

This is a simple multi-page portfolio website for all my academic, work experience and side projects and includes detailed descriptions of each individual project along with GitHub repository links and demonstration videos. Additional sections are dedicated to "About Me", my skills and contact details. The homepage has links to my email address, LinkedIn and GitHub profile, in addition to a download link for my CV. It also contains sections related to information about my skills, myself and a working contact form that will forward the user's message directly to my email. This functionality was accomplished by integrating the SendGrid API The website is fully responsive for a wide range of screen sizes. The website is deployed on a Vercel instance and connected to my custom domain zainulabdeen.live.

(back to top)

Built With

• React.js
• Next.js
• Node.js
• Tailwind CSS
• JavaScript
• NPM

(back to top)

APIs

• SendGrid API

(back to top)

Getting Started

Clone or download a copy of the repository to run the portfolio website locally.

Prerequisites

• Run the following command in your terminal to clone

  git clone https://github.com/Zidan2k9/ulabdeen-nextjs-portfolio

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Store your SendGrid API key in .env.local as

SENDGRID_API_KEY='PASTE API KEY HERE'

and reference in api/sendgrid.js as

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

Learn More

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!

Deploy on Vercel

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

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

(back to top)

Roadmap

• Pushed initial version of website to main branch in remote.
• Changed colour theme to white, green and black.
• Integrated Light/Dark modes
• Integrated SendGrid API to receive emails directly from the website
• Deployed repository to Vercel instance for Continuous Deployment.
• Connected custom domain from Name.com with Vercel instance.
• Fix unresolved CSS formatting of some elements.
• Add toggle buttons for light and dark modes.
• Add particle effects to website background using tsparticles
• Add more robust RegEx based user input handling for the contact form.
• Continue to add projects and skills via Vercel CI/CD pipeline as you improve!

(back to top)

Contact

Zain Ul-Abdeen [email protected]

Project Link: https://github.com/Zidan2k9/ulabdeen-nextjs-portfolio/

(back to top)

Acknowledgments

I would like to acknowledge Clint's YouTube channel for providing the template for my website.

I have also used the following resources:

• react-icons - A library of popular icons.
• heroicons - Beautiful hand-crafted SVG icons,by the makers of Tailwind CSS.
• next-themes - An abstraction for themes for Next.js apps, used in this project to implement a dark theme according to local system settings or manual preferences.
• @sendgrid/mail - This is a dedicated service for interaction with the mail endpoint of the [SendGrid v3 API]

(back to top)