Skip to content

Commit b3a472c

Browse files
FlorianRubyFlorianRuby
committed
made website responsive (#5)
1 parent 4e3b56c commit b3a472c

12 files changed

+269
-16
lines changed

‎.gitignore

+42-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1-
1+
# Environment variables
2+
.env
3+
4+
# Dependencies
5+
node_modules/
6+
7+
# Debug logs
8+
*.log
9+
debug.log
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Runtime data
15+
pids
16+
*.pid
17+
*.seed
18+
*.pid.lock
19+
20+
# IDE/Editor specific
21+
.vscode/
22+
.idea/
23+
*.swp
24+
*.swo
25+
.DS_Store
26+
27+
# Build/Output directories
28+
dist/
29+
build/
30+
out/
31+
32+
# Cache directories
33+
.npm
34+
.eslintcache
35+
36+
# Optional: Local data files (if you want to version control them separately)
37+
# data/*.json
38+
39+
# Temporary files
40+
*.tmp
41+
*.temp
42+
.cache/

‎assets/favicon_io/android-chrome-192x192.png

7.55 KB
Loading

‎assets/favicon_io/android-chrome-512x512.png

26 KB
Loading

‎assets/favicon_io/apple-touch-icon.png

6.85 KB
Loading

‎assets/favicon_io/favicon-16x16.png

425 Bytes
Loading

‎assets/favicon_io/favicon-32x32.png

846 Bytes
Loading

‎assets/favicon_io/favicon.ico

15 KB
Binary file not shown.

‎assets/favicon_io/site.webmanifest

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎index.html

+13-11
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta name="viewport" content="width=device-width, initial-scale=0.85, maximum-scale=1.0" />
66
<title>Reazn's Portfolio</title>
77
<link rel="stylesheet" href="styles.css" />
8+
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
9+
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
10+
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
11+
<link rel="manifest" href="/assets/favicon/site.webmanifest">
12+
<link rel="shortcut icon" href="/assets/favicon/favicon.ico">
813
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
914
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
1015
<link rel="stylesheet" href="styles/nav.css">
@@ -19,7 +24,6 @@ <h1>Projects</h1>
1924
<div id="box-about" class="box" onclick="scrollToSection('about-section')">
2025
<h1><img src="https://em-content.zobj.net/source/apple/354/waving-hand_1f44b.png" class="wave" alt="👋"> Hi I'm <span class="gradient-text">Reazn</span></h1>
2126
<p class="about-text">I'm a 17 year old computer science student and avid music enjoyer. <br>I love creating websites for personal use and experimenting with new technologies. <br> <br>I especially enjoy visualizing data and tracking things, like music stats from <a href="https://www.last.fm/user/syntiiix" target="_blank">Last.fm</a>.
22-
2327
<br><br> In my spare time I dabble in photography, graphic design and editing.</p>
2428
<div class="tech-stack">
2529
<a href="https://www.python.org" target="_blank"><img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" title="Python"></a>
@@ -172,8 +176,8 @@ <h2>About Me</h2>
172176
and has evolved to include full-stack development and various programming languages.
173177
</p>
174178
<p>
175-
When I'm not coding, you'll find me discovering new music, taking photos, or working on graphic design projects.
176-
I'm particularly interested in web design, data visualization, and creating tools that make information more accessible and engaging. </p>
179+
When I'm not coding, you'll find me discovering new music, taking photos, working on graphic design projects or studying Chinese.
180+
I'm particularly interested in web design, data visualization, and creating tools that make information more accessible. </p>
177181
<p>
178182
Recently, I've also become interested in AI and machine learning. I've run LLMs on my PC and experimented with their implementations using APIs.
179183
</p>
@@ -242,7 +246,8 @@ <h3>Connect With Me</h3>
242246
<span>HTML</span> •
243247
<span>CSS</span> •
244248
<span>Docker</span> •
245-
<span>AWS</span>
249+
<span>AWS</span> •
250+
<span>Scrum</span>
246251
</div>
247252
</div>
248253

@@ -254,9 +259,11 @@ <h3>Connect With Me</h3>
254259
<span>Business Law</span> •
255260
<span>Law</span> •
256261
<span>Finance & Accounting</span> •
262+
<span>Math</span> •
257263
<span>French</span> •
258264
<span>English</span> •
259-
<span>German</span>
265+
<span>German</span> •
266+
<span>Chinese</span>
260267
</div>
261268
</div>
262269

@@ -306,12 +313,10 @@ <h4>Select Time Period</h4>
306313
<p>That's why this year I've challenged myself to listen to a new album every single day throughout 2025, pushing the boundaries of my musical comfort zone. You can see some of the albums I've listened to below!</p>
307314
</div>
308315

309-
<!-- Album history container moved here and renamed -->
310316
<div class="album-history-container albums-2025-container">
311317
<h4>Albums I've Listened to in 2025</h4>
312318
<div class="album-grid album-grid-small" id="album-history-grid" style="--album-size: 100px; --album-gap: 8px;">
313319
<div class="loading-albums">Loading album history...</div>
314-
<!-- Albums will be added dynamically -->
315320
</div>
316321
</div>
317322
</div>
@@ -322,23 +327,20 @@ <h4>Albums I've Listened to in 2025</h4>
322327
<h4>Top Artist</h4>
323328
<div class="music-box-content">
324329
<div class="music-item-loading">Loading...</div>
325-
<!-- Content will be added dynamically -->
326330
</div>
327331
</div>
328332

329333
<div class="music-box" id="top-track-box">
330334
<h4>Top Track</h4>
331335
<div class="music-box-content">
332336
<div class="music-item-loading">Loading...</div>
333-
<!-- Content will be added dynamically -->
334337
</div>
335338
</div>
336339

337340
<div class="music-box" id="top-album-box">
338341
<h4>Top Album</h4>
339342
<div class="music-box-content">
340343
<div class="music-item-loading">Loading...</div>
341-
<!-- Content will be added dynamically -->
342344
</div>
343345
</div>
344346
</div>

‎preview-cards.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
// Preview cards in the projects section
2+
13
// Debug flag - set to true to show console logs
2-
const DEBUG = true;
4+
const DEBUG = false;
35

46
// Basic variables
57
let mouseX = 0;

‎styles.css

+210
Original file line numberDiff line numberDiff line change
@@ -1579,4 +1579,214 @@ body::-webkit-scrollbar {
15791579
display: none;
15801580
width: 0;
15811581
background: transparent;
1582+
}
1583+
1584+
/* Add responsive design rules */
1585+
@media screen and (max-width: 768px) {
1586+
/* Hide navigation and clock completely on mobile */
1587+
.side-nav,
1588+
.ascii-clock {
1589+
display: none !important;
1590+
}
1591+
1592+
#content {
1593+
display: flex !important;
1594+
flex-direction: column !important;
1595+
gap: 1rem;
1596+
padding: 1rem;
1597+
width: 90%;
1598+
margin: 0 auto;
1599+
}
1600+
1601+
/* Make bento boxes take full width of their container */
1602+
#box-projects,
1603+
#box-about,
1604+
#box-lastfm,
1605+
#box-links,
1606+
#cv-download {
1607+
grid-column: 1 / -1;
1608+
grid-row: auto;
1609+
margin-bottom: 1rem;
1610+
width: 100%;
1611+
box-sizing: border-box;
1612+
}
1613+
1614+
/* Adjust about box header size for mobile */
1615+
#box-about h1 {
1616+
font-size: 1.8rem !important; /* Increased from 1.1rem */
1617+
margin-bottom: 1rem !important;
1618+
}
1619+
1620+
#box-about h1 img.wave {
1621+
width: 32px !important; /* Increased from 20px */
1622+
height: 32px !important; /* Increased from 20px */
1623+
vertical-align: middle !important;
1624+
}
1625+
1626+
#box-about .gradient-text {
1627+
font-size: 1.8rem !important; /* Increased from 1.1rem */
1628+
}
1629+
1630+
/* Fix section layouts for mobile */
1631+
.content-section {
1632+
width: 90%;
1633+
padding: 1rem;
1634+
}
1635+
1636+
/* About section mobile layout */
1637+
.about-section-content {
1638+
display: flex;
1639+
flex-direction: column;
1640+
gap: 2rem;
1641+
}
1642+
1643+
.education-timeline {
1644+
position: relative;
1645+
top: 0;
1646+
right: 0;
1647+
width: 100%;
1648+
margin: 2rem 0;
1649+
}
1650+
1651+
/* Music section mobile layout */
1652+
.music-container {
1653+
display: flex;
1654+
flex-direction: column;
1655+
gap: 2rem;
1656+
}
1657+
1658+
.music-info,
1659+
.music-boxes {
1660+
width: 100%;
1661+
}
1662+
1663+
/* Adjust other content sections */
1664+
.section-content {
1665+
width: 100%;
1666+
padding: 1rem 0;
1667+
}
1668+
1669+
.section-content-about {
1670+
width: 100%;
1671+
padding: 0;
1672+
}
1673+
1674+
/* Adjust about section text width */
1675+
.about-text-content {
1676+
width: 90%;
1677+
margin: 0 auto;
1678+
}
1679+
1680+
/* Fix tech stack positioning and layout */
1681+
#box-about {
1682+
order: -1 !important;
1683+
}
1684+
1685+
#box-projects {
1686+
order: 1 !important;
1687+
}
1688+
1689+
.tech-stack {
1690+
position: static !important;
1691+
display: grid !important;
1692+
grid-template-columns: repeat(4, 1fr) !important;
1693+
gap: 1rem !important;
1694+
margin-top: 2rem !important;
1695+
bottom: auto !important;
1696+
left: auto !important;
1697+
width: 100% !important;
1698+
margin-bottom: -8rem !important;
1699+
}
1700+
1701+
.tech-stack a {
1702+
width: 35px !important;
1703+
height: 35px !important;
1704+
margin: 0 !important;
1705+
}
1706+
1707+
.tech-stack img {
1708+
width: 35px !important;
1709+
height: 35px !important;
1710+
}
1711+
1712+
/* For even smaller screens */
1713+
@media screen and (max-width: 480px) {
1714+
.tech-stack {
1715+
grid-template-columns: repeat(4, 1fr) !important;
1716+
gap: 0.8rem !important;
1717+
}
1718+
1719+
.tech-stack a,
1720+
.tech-stack img {
1721+
width: 30px !important;
1722+
height: 30px !important;
1723+
}
1724+
}
1725+
1726+
/* Make preview cards responsive */
1727+
.project {
1728+
padding: 1.5rem 1rem !important;
1729+
position: relative !important;
1730+
}
1731+
1732+
.project h3 {
1733+
font-size: 1.2rem !important;
1734+
margin-bottom: 0.8rem !important;
1735+
padding-right: 70px !important; /* Make space for links */
1736+
}
1737+
1738+
.project p {
1739+
font-size: 0.9rem !important;
1740+
line-height: 1.4 !important;
1741+
margin-bottom: 1rem !important;
1742+
padding-right: 70px !important; /* Make space for links */
1743+
}
1744+
1745+
/* Remove line breaks in project descriptions */
1746+
.project p br {
1747+
display: none !important;
1748+
}
1749+
1750+
.project-links {
1751+
position: absolute !important;
1752+
right: 1rem !important;
1753+
top: 1.5rem !important;
1754+
transform: none !important;
1755+
gap: 0.3rem !important;
1756+
}
1757+
1758+
.project-links a {
1759+
font-size: 0.9rem !important;
1760+
width: auto !important;
1761+
min-width: 45px !important;
1762+
}
1763+
1764+
.tags {
1765+
font-size: 0.8rem !important;
1766+
margin-top: 0.5rem !important;
1767+
}
1768+
1769+
.tags span {
1770+
margin-right: 0.4rem !important;
1771+
}
1772+
1773+
.music-timespan-container {
1774+
display: none !important;
1775+
}
1776+
}
1777+
1778+
/* Additional adjustments for even smaller screens */
1779+
@media screen and (max-width: 480px) {
1780+
.project h3 {
1781+
font-size: 1.1rem !important;
1782+
}
1783+
1784+
.project p {
1785+
font-size: 0.85rem !important;
1786+
}
1787+
1788+
.project-links a {
1789+
font-size: 0.85rem !important;
1790+
min-width: 40px !important;
1791+
}
15821792
}

‎update-lastfm-data.js

-3
This file was deleted.

0 commit comments

Comments
 (0)