|
1 | 1 | # Bikram Gole - The Aura Website |
2 | 2 |
|
3 | | -Welcome to my personal website, where I mix space vibes, hacker energy, and controlled chaos. |
4 | | -If it looks dramatic, that is intentional. |
| 3 | +Welcome to my personal website 👋, a unique digital space blending cosmic aesthetics, hacker ethos, and controlled dynamism. This site is intentionally dramatic, reflecting my distinctive personal brand. |
5 | 4 |
|
6 | | -Live site: `https://devxtechnic.github.io/bikram-site/` |
| 5 | + |
7 | 6 |
|
8 | | -## Why this exists |
| 7 | +**Live Site:** `https://devxtechnic.github.io/bikram-site/` |
9 | 8 |
|
10 | | -I wanted a website that feels like me: |
| 9 | +## Motivation |
11 | 10 |
|
12 | | -- Dark, interactive, and slightly unhinged (in a good way) |
13 | | -- Personal, not corporate |
14 | | -- Fun enough that people remember it |
15 | | -- Technical enough that devs nod in approval |
| 11 | +I conceived this project to create a personal website that authentically represents my identity and technical prowess. My key objectives included: |
16 | 12 |
|
17 | | -## What is inside |
| 13 | +- **Distinctive Design:** A dark, interactive, and engaging user experience. |
| 14 | +- **Personal Expression:** A platform that feels personal rather than corporate. |
| 15 | +- **Memorable Experience:** Designed to be unique and leave a lasting impression on visitors. |
| 16 | +- **Technical Sophistication:** Showcasing technical skills in a way that resonates with fellow developers. |
18 | 17 |
|
19 | | -- Multi-page setup: `Home`, `About`, `Contact` |
20 | | -- Theme engine with many styles (including Liquid Glass and chaos modes) |
21 | | -- Persistent theme across page switches |
22 | | -- Mini terminal with commands |
23 | | -- Persona quiz game |
24 | | -- Live GitHub repo cards from `github.com/DevXtechnic` |
25 | | -- Easter eggs, pulse effects, and vibe-heavy UI interactions |
| 18 | +## Key Features |
26 | 19 |
|
27 | | -## Tech stack (aka my weapons) |
| 20 | +My website incorporates a variety of interactive and engaging features: ✨ |
28 | 21 |
|
29 | | -- HTML |
30 | | -- CSS |
31 | | -- Vanilla JavaScript |
32 | | -- GitHub Pages (hosting) |
33 | | -- GitHub API (repo data) |
| 22 | +- **Multi-Page Navigation:** Seamless navigation across `Home`, `About`, and `Contact` sections. |
| 23 | +- **Dynamic Theme Engine:** A robust theme system offering multiple visual styles, including 'Liquid Glass' and 'Chaos' modes, with theme persistence across page transitions. |
| 24 | +- **Interactive Mini Terminal:** A functional command-line interface for enhanced user engagement. |
| 25 | +- **Persona Quiz Game:** An integrated game designed to interactively explore user personas. |
| 26 | +- **Live GitHub Repository Cards:** Displays real-time project information fetched from `github.com/DevXtechnic` via the GitHub API. |
| 27 | +- **Engaging UI/UX:** Features such as easter eggs, pulse effects, and other dynamic interactions to create a vibrant user experience. |
34 | 28 |
|
35 | | -## Project map |
| 29 | +## Technology Stack |
36 | 30 |
|
37 | | -- `index.html` -> main landing zone |
38 | | -- `about.html` -> lore, identity, interests |
39 | | -- `contact.html` -> direct channels |
40 | | -- `styles.css` -> all themes + UI styling |
41 | | -- `script.js` -> interactions, terminal logic, quiz logic, effects |
| 31 | +I leveraged a modern web development stack to deliver this project's rich features: |
42 | 32 |
|
43 | | -## Run locally |
| 33 | +- **HTML:** For structuring the web content. |
| 34 | +- **CSS:** For styling and implementing the diverse theme engine. |
| 35 | +- **Vanilla JavaScript:** Powers all interactive elements, terminal logic, quiz functionality, and dynamic effects. |
| 36 | +- **GitHub Pages:** Utilized for reliable and free hosting of my static site. |
| 37 | +- **GitHub API:** Used to dynamically fetch and display my repository data. |
44 | 38 |
|
45 | | -```bash |
46 | | -cd bikram-site |
47 | | -python -m http.server 8000 |
48 | | -``` |
| 39 | +## Project Structure |
49 | 40 |
|
50 | | -Then open `http://localhost:8000`. |
| 41 | +The repository is organized as follows: 📁 |
51 | 42 |
|
52 | | -## Notes from me |
| 43 | +- `index.html`: My main landing page. |
| 44 | +- `about.html`: Contains my lore, identity, and interests. |
| 45 | +- `contact.html`: Provides direct channels to contact me. |
| 46 | +- `styles.css`: Centralized stylesheet for all themes and UI styling. |
| 47 | +- `script.js`: Contains all my JavaScript logic for interactions, terminal, quiz, and visual effects. |
53 | 48 |
|
54 | | -- `.nojekyll` is here so GitHub Pages serves files directly without Jekyll surprises. |
55 | | -- Theme state is stored in `localStorage`, so your selected theme stays consistent. |
56 | | -- Yes, I over-engineered parts of this for fun. No regrets. |
| 49 | +## Getting Started (Run Locally) |
| 50 | + |
| 51 | +To set up and run my project on your local machine, follow these steps 👇: |
| 52 | + |
| 53 | +1. **Clone the repository:** |
| 54 | + ```bash |
| 55 | + git clone https://github.com/DevXtechnic/bikram-site.git |
| 56 | + cd bikram-site |
| 57 | + ``` |
| 58 | +2. **Serve the files:** |
| 59 | + You can use a simple Python HTTP server 🐍: |
| 60 | + ```bash |
| 61 | + python -m http.server 8000 |
| 62 | + ``` |
| 63 | +3. **Access the site:** |
| 64 | + Open your web browser and navigate to `http://localhost:8000`. 🚀 |
| 65 | + |
| 66 | +## Developer Notes |
| 67 | + |
| 68 | +- I included a `.nojekyll` file to ensure GitHub Pages serves files directly, bypassing Jekyll processing. |
| 69 | +- I manage theme state using `localStorage` to maintain your selected themes across sessions. |
| 70 | +- I intentionally included over-engineered elements for demonstrative and exploratory purposes, reflecting my commitment to creative and technical experimentation. No regrets! |
| 71 | + |
| 72 | +## Contributing |
| 73 | + |
| 74 | +Contributions are welcome! If you have suggestions for improvements or new features, please open an issue or submit a pull request. |
| 75 | + |
| 76 | +## License |
| 77 | + |
| 78 | +This project is unlicensed. Feel free to use, modify, and distribute it as you wish. 🔓 |
0 commit comments