Building My Portfolio

This website was very interesting to build. I am not a designer, so I started this without any design. I chose Next.js, Tailwind CSS, and TypeScript for the tech stack, focusing on a clean and responsive layout.

For the hero section, I took some inspiration from Abdul Rahman's website. The skills section and the resume button on the nav were inspired by Al-Imam's site. Many of the canvas animations were taken from CodePen, and some were created by me with the help of ChatGPT.

Projects Management

I didn't want to code my projects manually, so I thought, why not create a custom syntax to maintain them?

Custom Markdown Syntax

# Title

- Description 1
- Description 2

@ Project Type

> Tag1
> Tag2
> Tag3

<Src Link>
[Demo/Live Link]

---

Actual markdown to render something else

Image Handling

To manage and upload images, I set up a file structure and parse the Markdown and images as follows:

File Structure:

├── project-name
│   ├── image-1.png
│   ├── image-2.png
│   ├── image-3.png
│   ├── readme.md

TypeScript Compilation:

import IMAGE_1 from './project-name/image-1.png?url'
import IMAGE_2 from './project-name/image-2.png?url'
import IMAGE_3 from './project-name/image-3.png?url'

export default [
  {
    name: 'project-name',
    title: 'Title',
    type: 'TYPE',
    tags: ['Tag1', 'Tag2', 'Tag3'],
    description: ['Description1', 'Description2'],
    srcLink: 'Src Link',
    visitLink: 'Visit Link',
    images: [IMAGE_1, IMAGE_2, IMAGE_3],
  },
]

Featured Projects

To determine which projects to show on the homepage, I use the following approach:

• Any project name starting with @ will be displayed on the homepage.
• The @ prefix is removed from the name during compilation.

File Structure:

├── @project-name
│   ├── image-1.png
│   ├── readme.md

TypeScript Compilation:

import IMAGE_1 from './@project-name/image-1.png?url'

export default [
  {
    name: 'project-name',
    images: [IMAGE_1],
  },
]

User interactivity

To enhance interactivity, I added various animations throughout the website. Here's a breakdown of how I approached this:

Animations

• Source: Many animations were sourced from CodePen. I also created custom animations with the help of ChatGPT.
• Types: Added effects like rain, thunder, and snow based on the user's local weather.

Weather-Based Animations

• Dynamic Effects: Animations adjust based on real-time weather conditions.
• Customization: Users can enable or disable these effects through the customization menu.
• API Used: Fetch weather data using WeatherAPI.

Secret Features

• User-Based Customization: Implemented secret animations based on other user details.
• Privacy: No personal information is stored. The features are designed to be interactive without compromising user privacy.

This approach not only makes the site engaging but also personalizes the experience based on real-life conditions and user interactions.