-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (134 loc) · 6.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="icon" href="media/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.halo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="vanta-background">
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="randball.html">RandBall</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<div id="github-readme"></div>
<div id="social-buttons"></div> <!-- Container for social buttons -->
</section>
</main>
<footer>
<p>© 2024 Powered by me, Vanta & ChatGPT.</p>
<p>Hosted by Github.</p>
</footer>
</div>
<script>
// Function to generate random offset values within a certain area
function generateRandomOffset(min, max) {
return Math.random() * (max - min) + min;
}
// Function to initialize Vanta Halo with random offset values
function initVantaHalo() {
const amplitudeOffset = generateRandomOffset(0, 1);
VANTA.HALO({
el: "#vanta-background",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
baseColor: 0x212154,
amplitudeFactor: amplitudeOffset,
xOffset: 0,
yOffset: -0.1,
size: 0.55
});
}
// Call the function to initialize Vanta Halo with random offsets
initVantaHalo();
// Function to display a custom GitHub profile README
function displayCustomReadme() {
const customReadme = `
# Hi! I am Nicolò,
**Aspiring Researcher ☄️ | Computational Physicist 🍎 | Simulations Enthusiast 💾**
---
#### About Me
I am a recent graduate with a MSc in Cosmology and a background in computational methods and programming. ヽ(^^)丿
`;
const formattedReadme = formatMarkdown(customReadme);
document.getElementById('github-readme').innerHTML = formattedReadme;
}
// Function to format Markdown content
function formatMarkdown(markdown) {
// Split the Markdown content by lines
const lines = markdown.split('\n');
let formattedMarkdown = '';
// Iterate through each line
lines.forEach(line => {
// Remove leading and trailing whitespace
line = line.trim();
if (line.startsWith('# ')) {
// Title formatting for lines starting with #
formattedMarkdown += `<h1>${line.replace(/^#\s*/, '')}</h1>`;
} else if (line.startsWith('#### ')) {
// Subtitle formatting for lines starting with ####
formattedMarkdown += `<h4>${line.replace(/^####\s*/, '')}</h4>`;
} else if (line.startsWith('**')) {
// Bold formatting for lines starting with **
formattedMarkdown += `<strong>${line.replace(/\*\*/g, '')}</strong><br>`;
} else if (line.startsWith('- ')) {
// Bullet point formatting for lines starting with -
const lineWithoutBullet = line.replace(/^- /, '');
formattedMarkdown += `<li>${lineWithoutBullet.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')}</li>`;
} else if (line === '---') {
// Horizontal rule formatting for lines containing ---
formattedMarkdown += '<hr>';
} else if (line) {
// Bold formatting for **bold text**
formattedMarkdown += line.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') + '<br>';
}
});
// Wrap the formattedMarkdown in <ul> tags if bullet points are present
if (formattedMarkdown.includes('<li>')) {
formattedMarkdown = `<ul>${formattedMarkdown}</ul>`;
}
return formattedMarkdown;
}
// Function to add social buttons
function addSocialButtons() {
// Fetch LinkedIn and GitHub icons
const linkedinIconUrl = 'media/linkedin.svg';
const githubIconUrl = 'https://simpleicons.org/icons/github.svg';
// Create LinkedIn button
const linkedinButton = document.createElement('a');
linkedinButton.href = 'https://ch.linkedin.com/in/nicmsri';
linkedinButton.target = '_blank';
linkedinButton.innerHTML = `<img src="${linkedinIconUrl}" alt="LinkedIn" width="72" height="72">`;
document.getElementById('social-buttons').appendChild(linkedinButton);
// Create GitHub button
const githubButton = document.createElement('a');
githubButton.href = 'https://github.com/nicmsri';
githubButton.target = '_blank';
githubButton.innerHTML = `<img src="${githubIconUrl}" alt="GitHub" width="72" height="72">`;
document.getElementById('social-buttons').appendChild(githubButton);
}
displayCustomReadme();
addSocialButtons(); // Call function to add social buttons
document.addEventListener("DOMContentLoaded", function() {
// Get the home link
const Link = document.querySelector("nav ul li a[href='#']");
// Add the active class to the home link when the page loads
Link.classList.add("active");
});
</script>
</body>
</html>