ammarahmed.ca

After re-making and re-designing my personal website hundreds of times, I have finally arrived at a design which I quite enjoy. Take a scroll at ammarahmed.ca

👨‍💻 Tech Stack

A high-level overview of the tech stack this website uses:

Front-end

• React with TypeScript is used for the functionality of the website.
• TailwindCSS is used as the UI framework.
• NextUI is used to create the standardized and aesthetic UI.
• Apollo Client is used to handle making GraphQL requests.

Back-end

• Node.js with TypeScript is used for the server environment.
• Notion is used to persist web content (database).
• Notion API is used to connect the server to Notion
• TypeGraphQL is used to structure the GraphQL API with TypeScript.

Hosting

• Google Firebase is used for the client-side hosting
• Fly.io is used for the server-side hosting.

🔧 Notable Features

Content Management

Web content such as blog posts, project content, skills etc. are written, edited and persisted in Notion. Automatically updated whenever changed in Notion

Light/Dark Mode

Switching between light and dark mode.

Continous Deployment

Client-side and server-side deployment is set-up automatically with production branch pushes. SMS Notifications are sent to me after deployment finishes using Twilio.

Skill Charts

Aesthetic radar charts created for skills using recharts

🎨 Design Reference

Colors

Color	Hex
Primary	#72499D
Secondary	#627BE9

Fonts

Type	Font
Heading	DM Serif Display, serif
Body	DM Sans, sans-serif
Mono	DM Mono, monospace

💬 Feedback

If you have any feedback, please reach out to me at [email protected].

📋 Articles/References

Docs

• TailwindCSS
• Next UI
• Apollo GraphQL
• Notion API
• TypeGraphQL