🔰 Portfolio

• This repository hold the code for my portfolio website deployed at link, The website used NextJS as frontend and framer for animaitions. Additionally aws lambda function is used to send emails upon form filling leviaging the power of serverless.
• The frontend is deployed on vercel and the lambda function is deplyed on aws api-gateway. Additonally for security, only scienmanas.xyz is allowed to access the lambda function, preventing attacks on the service.
• Vercel Analytics is can be enabled for user monitoring.

📚 Tech Stack

• Frontend: Next JS, TailwindCSS, Framer Motion
• Serverless: lambda function, aws api-gateway

🔩 Environment Variables

This project requirement .env configuration in Frontend folder to handle the dynamicity of the metadata generated when deployed everytime. The .env file should be created in the Frontend folder with the following variables:

Varibale	Description
SITE_URL	Domain name of the website (https://scienmanas.xyz)
SITE_NAME	Name of the site (Here I kept it- Manas)
G_ANALYTICS_ID	Google Analytics ID for tracking user activity

Few Notes

• To add new blog just add files according to the format in Frontend/public/blog folder. The blog will be automatically added to the website.
• The beackend in turned off in the frontend, so the newsletter will not work in the frontend, you need to uncomment the onsubmit function in the form (in Footer.tsx - Frontend)

APIs

The project uses rest APIs hosted on AWS which is made using lambda functions. the API is protected using CORS policy

Endpoint	Purpose
/send-email	Send notification to the contacted person as well as me
/scienGPT	Used to get response from Fine-tuned AI model

Additionally to make these API works, we need to environment variables for both the lambda functions

Variables	Description
EMAIL	Email
PASSWORD	App password of email id
GEMINI_API_KEY	Gemini API Key (from google AI Studio)

Also need to note here is that change the model to your fined tuned model in index.mjs of scienGPT lambda function folder. Additionally this function can be removed by just removing scienGPT component in the page.tsx in root of default_site folder.

Deployment

• The frontend can be deployed on vercel, netlify, github pages, render.com etc.
• The AWS Lambda function can be deployed on aws served via api-gateway.

1. To deploy the frontend, run the following command in the Frontend folder:

• configure the .env file
• npm install
• npm run build

📁 File Structure :

.
├── AWS Lambda Function
│   │── ScienGPT
│   │   └── Files for aws lambda function
│   └── Emailer
│     	└── Files for aws lambda function
├── Frontend
│   │── app
│   │   ├── (default_site)
│   │   │   ├── _blog
│   │   │   │   ├── [slug]
│   │   │   │   │   └── page.tsx
│   │   │   │   ├── page.tsx
│   │   │   │   └── layout.tsx
│   │   │   ├── page.tsx
│   │   │   └── layout.tsx
│   │   ├── lib
│   │   │   └── definition.ts
│   │   ├── utils
│   │   │   ├── dateformatter.ts
│   │   │   └── getBlogData.ts
│   │   ├── ui
│   │   │   ├── components
│   │   │   │   ├── to be added..
│   │   │   ├── landing
│   │   │   │    ├── Hero.tsx
│   │   │   │    ├── Skills.tsx
│   │   │   │    ├── Projects.tsx
│   │   │   │    ├── Flex.tsx
│   │   │   │    ├── CommunityWork.tsx
│   │   │   │    ├── MoreAboutMe.tsx
│   │   │   │    └── Contact.tsx
│   │   │   ├── universal
│   │   │   │    ├── Navbar.tsx
│   │   │   │    └── Footer.tsx
│   │   │   ├── blog
│   │   │   │    └── blog-card.tsx
│   │   │   └── loaders.tsx
│   │   ├── favicon.ico
│   │   ├── global.css
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   ├── notfound.tsx
│   │── public
│   │   ├── Manas_CV.pdf
│   │   ├── blog
│   │   │   └── ... folder with blog files
│   │   └── assets
│   │       └── ... folder with assets
│   │── .eslinktrc.jsom
│   │── next-env.d.ts
│   │── package.json
│   │── package-lock.json
│   │── next.config.mjs (enabled cross image fetching)
│   │── .env
│   │── next-sitemap.js
│   └── ..... Other configuration files (unaltered)
├── .gitignore
├── LICENSE
└── README.md

• site map and robots.txt are automatically generating by using next-sitemap using post build script in package.json file.

🔥 Contributing

Contributions are always welcome! Additionally you can contact me by my email: manas@scienmanas.xyz. I am currently working on a .md based blog engine for this template

📷 Video

Screencast.from.2024-11-10.20-44-16.mp4

🙌 Credits & Acknowledgements

• The website is inspired by the portfolio of Nikhil Raj & Smile Gupta. There are some changes made to the original design. You can access their original portfolio from at Nikhil Raj & Smile Gupta.

🔒 License

This repository is open source and under MIT License.

GitAds Sponsored