A minimalist, bento-style portfolio template built with HTML, CSS, and JavaScript. This project provides a clean and responsive layout to showcase your personal info, stack, and experience.

• Bento Grid Layout – Modern and aesthetically pleasing design.
• Light & Dark Mode – Switch themes dynamically.
• Live Clock – Displays current time in Your timezone.
• CodersRank Activity Graph – Showcases Git contributions.
• Fully Responsive – Works on all screen sizes.

.
├── index.html        # Main HTML file
├── styles.css        # Styling and layout
├── script.js         # JavaScript functionality
├── favicon.svg       # Favicon icon
├── README.md         # Documentation
└── assets/           # Image and media files

git clone https://github.com/mxpanf/html-bento-portfolio.git
cd html-bento-portfolio

Simply open index.html in your browser.

• Update your personal information in index.html.
• Replace your social media links in the .welcome-social-links section.
• Modify the CodersRank username (see below).

To display your Git activity graph, follow these steps:

1. Register an account on CodersRank: https://codersrank.io
2. Replace your username in script.js (line 33):
   • Open script.js and find this line:

     username="nickname"

   • Replace nickname with your CodersRank username.

Modify :root variables in styles.css:

:root {
  --primary-color: #222;
  --secondary-color: #333;
  --accent-color: #ffcc00;
}

Icons are from Iconify and can be changed easily:

<span class="iconify" data-icon="mdi:github"></span>

Find more icons at https://icon-sets.iconify.design.

This project is licensed under the MIT License. You are free to use, modify, and distribute this code with proper attribution.

Contributions are welcome! Feel free to submit a pull request or open an issue.

Built with ❤️ using HTML, CSS & JavaScript.

Inspired by Bento-like Portfolio from Gianmarco.

Shadertoy clone

Comes with a crippled glsl clone

vec3 main()
{
  return vec3(1, 1, 1);
};

Produces a white screen.

The program is run for each pixel on the screen, the return value of main will be the color of the pixel on the screen.
vec3(0, 0, 0) is black, vec3(1, 1, 1) is white. x = red, y = green, z = blue.

Everything has to end with a semicolon – typically } will always have a semicolon that follows it unless it’s inside of an if else if else chain.

vec3 main()
{
  return vec3(uv.x, 0, 0);
};

Produces a red gradient that gets more intense as x increases. uv = (0, 0) represents top left and uv = (1, 1) represents bottom right.
uv is automatically defined every time the program is run.

float function_name(float param, vec3 other_param)
{
  return param;
};

Currently, a return statement won’t exit the function, it will only set the return value that will be returned at the end of the function.

if (expr)
{
}
else if (other expr)
{
}
else
{
};

+, -, *, / work on floats and vectors.

< and > can compare floats.

Operators can only have the same type on both sides, so if you want to scale a vector for example by 2:

vec3 a = vec3(1, 2, 3);
a = a * vec3(2, 2, 2);

Unary - doesn’t exist, use 0- instead.

• print: Print values. Debugging purposes typically
• sqrt: Square root of a float
• distance: Distance between two vectors of variable size
• dot: Dot product between two vectors of variable size
• normalize: Normalize vector of variable size
• length: Length of vector of variable size
• abs: Absolute value
• pow: pow(base, exp)
• sin: sine
• cos: cosine
• tan: tangent
• asin: arcsin
• acos: arccos
• atan: arctan