{"id":21197348,"url":"https://github.com/manuelenolli/personalwebsite","last_synced_at":"2025-03-14T22:09:32.940Z","repository":{"id":261279745,"uuid":"862543567","full_name":"ManueleNolli/PersonalWebsite","owner":"ManueleNolli","description":"Personal Website with Serveless (AWS) NextJS 🤩","archived":false,"fork":false,"pushed_at":"2024-11-05T16:58:04.000Z","size":2449,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T14:28:15.719Z","etag":null,"topics":["aws-lambda","nextjs","serverless"],"latest_commit_sha":null,"homepage":"https://www.manuelenolli.ch","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ManueleNolli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-24T19:21:37.000Z","updated_at":"2024-11-05T16:58:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"c7cf7eec-2ea7-4a85-a093-038b96e1138e","html_url":"https://github.com/ManueleNolli/PersonalWebsite","commit_stats":null,"previous_names":["manuelenolli/personalwebsite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManueleNolli%2FPersonalWebsite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManueleNolli%2FPersonalWebsite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManueleNolli%2FPersonalWebsite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManueleNolli%2FPersonalWebsite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManueleNolli","download_url":"https://codeload.github.com/ManueleNolli/PersonalWebsite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243652709,"owners_count":20325610,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aws-lambda","nextjs","serverless"],"created_at":"2024-11-20T19:43:39.374Z","updated_at":"2025-03-14T22:09:32.922Z","avatar_url":"https://github.com/ManueleNolli.png","language":"TypeScript","readme":"# Personal Website\n\nMy personal website visitable at [https://www.manuelenolli.ch](https://www.manuelenolli.ch) 🚀\n\nThe base framework is [Next.js](https://nextjs.org/) written in Typescript, additional libraries are:\n\n- [PrimeReact](https://primereact.org/): UI components\n- [Tailwind CSS](https://tailwindcss.com/): CSS framework for styling\n- [tsparticles](https://particles.js.org/): Particles animation\n- [gsap](https://gsap.com/): Animation library\n- [AOS](https://michalsnik.github.io/aos/): Animate on scroll library\n- [Octokit](https://github.com/octokit): GitHub API client via GraphQL\n\n## Requirements\n\n- node: 20.16.0\n- yarn: 1.22.22\n\n## Installation and Usage\n\n```bash\nyarn install\n```\n\n```bash\nyarn dev\n```\n\n## Folder Structure\n\n```bash\nsrc/ # All source code\n    app/ # pages and components\n        layout.tsx # Header and Providers\n        page.tsx # Home Page\n        error.tsx # Error Page\n        components/ # Components\n        constants/ # Constants\n        context/ # Contexts\n        providers/ # Providers\n        services/ # Services\npublic/ # static assets\n    assets/ # images, icons, etc.\n```\n\n## Deployment\n\nThe website is hosted on AWS using the following services:\n\n- [Amazon S3](https://aws.amazon.com/s3/): Static website hosting\n- [AWS Lambda](https://aws.amazon.com/lambda/): Serverless functions (Yes, NextJs Server Side Rendering on AWS Lambda 😄)\n- [Amazon API Gateway](https://aws.amazon.com/api-gateway/): API management\n- [Amazon CloudFront](https://aws.amazon.com/cloudfront/): Content delivery network\n- [Amazon Route 53](https://aws.amazon.com/route53/): Domain name management\n- [Amazon Certificate Manager](https://aws.amazon.com/certificate-manager/): SSL certificates\n- [Amazon WAF](https://aws.amazon.com/waf/): Web application firewall\n- [Amazon Simple Email Service](https://aws.amazon.com/ses/): Manage email\n\nThe AWS Infrastructure can be seen in the following diagram:\n![AWS Infrastructure](./.github/assets/aws_diagram.png)\n\nA more detailed explanation of the AWS Infrastructure can be found in the project [PersonalWebsiteAWS](https://github.com/ManueleNolli/PersonalWebsiteAws), where the _Infrastructure as Code_ is implemented using the [AWS CDK](https://aws.amazon.com/cdk/).\n\nIn addition, there is an email service to create the \"contact me\" form that uses AWS SES, more details on [AwsLambdaSimpleEmailService](https://github.com/ManueleNolli/AwsLambdaSimpleEmailService).\n\nFor fetching my github repositories I created another service using lambda: [AwsLambdaGithubRepositoriesService](https://github.com/ManueleNolli/AwsLambdaGithubRepositoriesService).\n\n### AWS Infrastructure Costs\n\nThis section provides an overview of the estimated costs for hosting a personal website on AWS.\n\n##### Free Tier Resources\n\n| **Service**                            | **Free Tier Limit**                                                                                                                                                | **Sources**                                                        |\n| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------ |\n| **CloudFront**                         | 10,000,000 HTTPS requests per month                                                                                                                                | [CloudFront Pricing](https://aws.amazon.com/cloudfront/pricing/)   |\n| **API Gateway**                        | First 1,000,000 HTTP API calls per month                                                                                                                           | [API Gateway Pricing](https://aws.amazon.com/api-gateway/pricing/) |\n| **Lambda**                             | 1,000,000 free requests per month                                                                                                                                  | [Lambda Pricing](https://aws.amazon.com/lambda/pricing/)           |\n| **S3 (Amazon Simple Storage Service)** | 5GB of standard storage, 20,000 GET requests, and 2,000 PUT requests for the first 12 months. For a personal website, the cost would be less than $3.00 per month. | [S3 Pricing](https://aws.amazon.com/s3/pricing/)                   |\n| **Simple Email Service**               | 3,000 messages per year                                                                                                                                            | [SES Pricing](https://aws.amazon.com/ses/pricing/)                 |\n\n#### Additional Resources\n\nThose resources are not included into the project, I configured them manually on AWS console.\n\n| **Service**                        | **Cost**                                        | **Sources**                                                                        |\n| ---------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------- |\n| **Route 53**                       | $0.50 per month for domain name management      | [Route 53 Pricing](https://aws.amazon.com/route53/pricing/)                        |\n| **Budgets**                        | $0.01 per report to monitor costs and usage     | [Budgets Pricing](https://aws.amazon.com/aws-cost-management/aws-budgets/pricing/) |\n| **Certificate Manager (SSL)**      | Free SSL certificates for use with AWS services | [Certificate Manager Pricing](https://aws.amazon.com/certificate-manager/pricing/) |\n| **WAF (Web Application Firewall)** | $5.00 per month for web security protection     | [WAF Pricing](https://aws.amazon.com/waf/pricing/)                                 |\n\nThe total monthly cost for the AWS infrastructure is estimated to be less than **\\$5.00** per month (plus **\\$5.00** for security), considering the resources used and the free tier limits.\n\nNot bad for a personal website! 🚀\n\n#### Additional Information\n\n- [AWS Free Tier Overview](https://aws.amazon.com/free/)\n- [S3 Cost Calculator for Personal Websites](https://calculator.aws/#/createCalculator/S3)\n\n## CI/CD\n\nThe CI/CD pipeline is implemented using GitHub Actions, the workflow is defined in the file [main.yml](./.github/workflows/actions.yml).\n\nThere are four steps:\n\n1. **Tests**: Run the tests (Never failed a test 😎)\n2. **Build**: Build the Next.js application with cache and divide the output into `static`, `dependencies` and `code` files.\n3. **Upload**:\n   - Upload the `static` files to the S3 bucket.\n   - Upload the `dependencies` files to the Lambda Layer.\n   - Upload the `code` files to the Lambda function.\n4. **Refresh Lambda**: Refresh the Lambda function to apply the changes and delete older layer versions.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelenolli%2Fpersonalwebsite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelenolli%2Fpersonalwebsite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelenolli%2Fpersonalwebsite/lists"}