Finalised font. Minified CSS. Fixed errors. More.

This commit is contained in:
Anuj K 2023-10-05 16:48:09 +05:30
parent 947ac6584c
commit 959158bfbf
12 changed files with 42 additions and 60 deletions

View file

@ -7,7 +7,7 @@
<meta name="author" content="Anuj Kaushik" />
<meta name="description" content="Discover my story, passions and services as an independent musician, designer & self-hosting advocate. Learn more about me and how I can help you on your journey."/>
<link rel="icon" type="image/x-icon" href="content/favicon.svg" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div class="line-top"></div>
@ -15,7 +15,7 @@
<div class="about">
<h1>About Me</h1>
&nbsp;
<p>Greetings! My name is Anuj Kaushik, also known as Aiquiral in the digital world. Originally from Chandigarh, India, I hold degrees in Bachelor of Computer Applications and Master of Science in Information Technology from GGDSD College, Chandigarh. My passion for music led me to start creating my own tracks in 2016. Since then, my single “This Place” has garnered over 5,000 plays on Spotify. As a freelancer, I now offer my expertise to help independent musicians with their branding, visual art, music videos, press kits and more, allowing them to focus on making music.</p>
<p>Greetings! My name is Anuj Kaushik, also known as Aiquiral in the digital world. Originally from Chandigarh, India, I hold degrees in Bachelor of Computer Applications and Master of Science in Information Technology from GGDSD College, Chandigarh. My passion for music led me to start creating my own tracks in 2016. Since then, my single “This Place” has garnered over 4,500 plays on Spotify. As a freelancer, I now offer my expertise to help independent musicians with their branding, visual art, music videos, press kits and more, allowing them to focus on making music.</p>
<p>During my journey of learning about self-hosting, I became increasingly aware of the privacy issues in our society. As a result, Ive been removing proprietary software, services and hardware from my life. On my blog, I share tutorials, guides and configurations for others looking to do the same.</p>
<p>I was born lacto-vegetarian, but after learning about the treatment of animals in the dairy industry, I became a vegan. This lifestyle change sparked my love for cooking, and Ill soon be starting a recipe blog as my form of activism.</p>
<p>Thank you for stopping by, and I look forward to connecting with you.</p>
@ -27,7 +27,7 @@
<img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
</noscript>
<script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" style="position:relative;bottom:-3px" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img class="foot-logo" src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="line-bottom"></div>
</body>
</html>

View file

@ -7,7 +7,7 @@
<meta name="author" content="Anuj Kaushik" />
<meta name="description" content="Get in touch with me through various channels such as email, Matrix, Discord, Telegram, Fiverr and Mastodon. Share your thoughts or collaborate on projects I'm looking forward to connecting with you!"/>
<link rel="icon" type="image/x-icon" href="content/favicon.svg" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div class="line-top"></div>
@ -32,7 +32,7 @@
<img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
</noscript>
<script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" style="position:relative;bottom:-3px" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img class="foot-logo" src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="line-bottom"></div>
</body>
</html>

1
content/aiquiral.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2382.679" height="397.113"><path d="M236.653 272.456H105.228l-20.74 59.381H0L120.728 5.894h100.206l120.728 325.943h-84.488zm-110.467-60.473h89.29L170.94 82.304zM384.888 5.894h84.051v325.943h-84.051zm324.196 331.837h-6.549q-80.558 0-125.312-44.536-44.754-44.536-44.754-124.002 0-79.248 44.536-124.221Q621.759 0 700.133 0q79.248 0 123.347 44.536 44.318 44.536 44.318 124.657 0 55.015-23.578 94.748-23.36 39.733-67.459 59.818l65.712 73.353h-80.121zm-8.951-276.822q-38.423 0-59.6 28.381-21.176 28.381-21.176 79.903 0 52.395 20.74 80.34 20.74 27.726 60.036 27.726 38.642 0 59.818-28.381 21.176-28.381 21.176-79.685 0-51.522-21.176-79.903-21.176-28.381-59.818-28.381zM931.328 5.894h84.051v195.391q0 40.388 13.099 57.853 13.317 17.247 43.226 17.247 30.127 0 43.226-17.247 13.317-17.465 13.317-57.853V5.894h84.051v195.391q0 69.206-34.712 103.044-34.712 33.839-105.882 33.839-70.952 0-105.664-33.839-34.712-33.839-34.712-103.044zm363.056 0h84.051v325.943h-84.051zm285.773 144.524q26.416 0 37.768-9.824 11.571-9.824 11.571-32.31 0-22.268-11.571-31.874-11.352-9.606-37.768-9.606h-35.367v83.614zm-35.367 58.072v123.347h-84.051V5.894h128.369q64.403 0 94.312 21.613 30.127 21.613 30.127 68.332 0 32.31-15.719 53.05-15.5 20.74-46.937 30.564 17.247 3.93 30.782 17.902 13.754 13.754 27.726 41.916l45.628 92.565h-89.509l-39.733-80.994q-12.007-24.451-24.451-33.402-12.226-8.951-32.747-8.951zm458.023 63.966h-131.425l-20.74 59.381h-84.487L1886.888 5.894h100.206l120.728 325.943h-84.487zm-110.467-60.473h89.29L1937.1 82.304zM2151.048 5.894h84.051v262.413h147.58v63.529h-231.631z" fill="#b4b4bb"/></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Binary file not shown.

1
content/hi-i-am.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1921.712" height="414.472" xmlns:v="https://vecta.io/nano"><path d="M12.5 12.5h84.051v124.221h124.002V12.5h84.051v325.943h-84.051V200.25H96.551v138.193H12.5zm374.19 0h84.051v325.943H386.69zm170.94 241.455h78.593v66.586L582.3 401.972h-46.501l21.831-81.431zM878.552 12.5h84.051v325.943h-84.051zm519.806 266.561h-131.425l-20.74 59.381h-84.487L1282.433 12.5h100.206l120.728 325.943h-84.487zm-110.467-60.473h89.29L1332.645 88.91zM1546.593 12.5h106.974l74.227 174.433L1802.456 12.5h106.756v325.943h-79.466V100.044l-75.1 175.743h-53.269l-75.1-175.743v238.399h-79.685z" fill="none" stroke="#b4b4bb" stroke-width="25"/></svg>

After

Width:  |  Height:  |  Size: 663 B

View file

@ -7,19 +7,21 @@
<meta name="author" content="Anuj Kaushik" />
<meta name="description" content="Welcome to my personal website! Here, you'll find information about me as a musician, designer, and programmer. Explore my blog, portfolio, and contact page through the buttons below."/>
<link rel="icon" type="image/x-icon" href="content/favicon.svg" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div class="line-top"></div>
<div class="main">
<div class="hero">
<div class="left">
<h2>HI, I AM</h2>
<h1>AIQUIRAL</h1>
<br>
<img class="txt" style="max-width: clamp(10rem,18vw + 5rem,25rem);" src="content/hi-i-am.svg" />
<br>
<img class="txt" style="max-width: clamp(15rem,20vw + 10rem,35rem);" src="/home/anuj/text2.svg" />
<p class="tagline">Musician • Designer • Programmer</p>
</div>
<div class="right">
<img class="face" src="content/aiquiral.avif" alt="A close-up portrait of a person with purple light highlighting half of their face, set against a deep black background." title="Aiquiral" />
<img src="content/aiquiral.avif" alt="A close-up portrait of a person with purple light highlighting half of their face, set against a deep black background." title="Aiquiral" />
</div>
</div>
<div>
@ -32,7 +34,7 @@
<a class="button" href="https://blog.aiquiral.me">BLOG</a><a class="button" href="https://portfolio.aiquiral.me">PORTFOLIO</a><a class="button" href="contact.html">CONTACT</a>
</div>
</div>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" style="position:relative;bottom:-3px" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img class="foot-logo" src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="line-bottom"></div>
</body>
</html>

View file

@ -7,7 +7,7 @@
<meta name="author" content="Anuj Kaushik" />
<meta name="description" content="Explore my personal website and learn about my commitment to protecting your data. Read the privacy policy, here."/>
<link rel="icon" type="image/x-icon" href="content/favicon.svg" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.min.css" />
</head>
<body>
<div class="line-top"></div>
@ -41,7 +41,7 @@
<img src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/pixel.gif">
</noscript>
<script defer src="https://a.aiquiral.me/ingress/47abe128-5b2e-4b9b-aaa2-2daf9ce568ed/script.js"></script>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" style="position:relative;bottom:-3px" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="foot"><p><a href="https://soundcloud.com/aiquiral">Music</a> <a href="https://git.aiquiral.me/aiquiral">Other Projects</a> <img class="foot-logo" src="content/inline-logo.svg" alt="A stylized logo featuring a majestic deer, gracefully facing towards right." title="Aiquiral Logo" width=28 height=32></img> <a href="privacy-policy.html">Privacy Policy</a> <a href="about.html">About</a></p></div>
<div class="line-bottom"></div>
</body>
</html>

View file

@ -1,60 +1,40 @@
/*
@font-face {
font-family: 'Montserrat-Regular';
src: url('content/fonts/Montserrat-Regular.woff2') format('woff2'),
url('content/fonts/Montserrat-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Montserrat-Black';
src: url('content/fonts/Montserrat-Black.woff2') format('woff2'),
url('content/fonts/Montserrat-Black.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*/
a {
text-decoration: none !important;
color: #b4b4bb;
}
body {
margin: 0;
padding: 0;
background: #25252d;
font-family: sans-serif;
font-family: "DejaVu Sans", sans-serif;
color: #b4b4bb;
display: flex;
min-height: 100vh;
flex-flow: column;
}
h1, h2 {
font-weight: 900;
font-size:clamp(2.813rem,2.813vw + 2.25rem,5.625rem);
margin: 0;
padding: 0;
a {
text-decoration: none !important;
color: #b4b4bb;
}
@media (max-width: 1203px){
h1, h2, p.tagline{
img {
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 1248px){
.tagline{
text-align: center;
}
.txt {
margin-left: auto;
margin-right: auto;
width: auto;
}
}
h3 {
font-weight: 900;
font-size:clamp(0.813rem,0.813vw + 0.25rem,3.625rem);
}
h2 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 3px;
.foot-logo{
position:relative;
bottom:-3px;
display: inline
}
.tagline {
@ -98,8 +78,7 @@ h2 {
align-content: center;
}
.main{margin-top: 3vw;}
.buttons{margin-top: 3vw;}
.main, .buttons {margin-top: 3vw;}
.left, .right{
margin-left: 3vw;
@ -132,11 +111,9 @@ h2 {
}
p {
font-size: clamp(1rem,0.7vw + 0.25rem,3.625rem);
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;
h1 {
font-size: 300%;
}

1
style.min.css vendored Normal file
View file

@ -0,0 +1 @@
a,body{color:#b4b4bb}.button,.foot{text-align:center}body{margin:0;padding:0;background:#25252d;font-family:"DejaVu Sans",sans-serif;display:flex;min-height:100vh;flex-flow:column}a{text-decoration:none!important}img{max-width:100%;height:auto;display:block}@media (max-width:1248px){.tagline{text-align:center}.txt{margin-left:auto;margin-right:auto;width:auto}}.foot-logo{position:relative;bottom:-3px;display:inline}.tagline{font-size:clamp (16px, 2vw, 50px)}.line-top{height:22px;background-image:linear-gradient(145deg,#4c4dfb ,#706efb);box-shadow:rgba(0,0,0,.35) 0 5px 30px}.line-bottom{height:22px;background-image:linear-gradient(145deg,#706efb,#4c4dfb);bottom:0;width:100%;box-shadow:rgba(0,0,0,.35) 5px 0 30px}.foot{bottom:22px;width:100%}.main{flex-grow:1;display:flex;flex-flow:column;align-items:center;justify-content:center;-webkit-align-items:center}.buttons,.hero{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;align-content:center}.buttons,.main{margin-top:3vw}.left,.right{margin-left:3vw;margin-right:3vw}.button{padding:1.5vw;font-weight:900;margin:2vw;background-image:linear-gradient(145deg,#4c4dfb ,#706efb);color:#fff;font-size:28px;width:250px;border-radius:10px;box-shadow:0 0 30px 9px rgba(0,0,0,.3)}.button:hover{background-image:linear-gradient(#25252d,#25252d);outline:#4c4dfb solid 3px;transition:20ms}.about{padding:1vw 10vw}p{line-height:1.5}h1{font-size:300%}