🔖 Release version 1.0.2

.prettierrc.json

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "order": "smacss"
 }

README.md

@@ -0,0 +1,33 @@
+# aassila.com
+
+My personal webpage where you can find my projects and contact information.
+
+## Install
+
+```sh
+npm install
+```
+
+## Development
+
+```sh
+npm run dev
+```
+
+## Lint
+
+```sh
+npm run lint
+```
+
+## Build
+
+```sh
+npm run build
+```
+
+## Preview
+
+```sh
+npm run preview
+```

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="My personal webpage where you will find my projects and contact information."
+      content="My personal webpage where you can find my projects and contact information."
     />
     <meta
       name="keywords"
@@ -38,25 +38,25 @@ <h2 id="bio">Student and Computer Science Enthusiast</h2>
                 <li class="button">
                   <a href="https://twitter.com/younesaassila">
                     <i class="fa-brands fa-twitter"></i>
-                    <span id="social-twitter">Twitter</span>
+                    <span id="ya-social-twitter">Twitter</span>
                   </a>
                 </li>
                 <li class="button">
                   <a href="https://github.com/younesaassila">
                     <i class="fa-brands fa-github"></i>
-                    <span id="social-github">GitHub</span>
+                    <span id="ya-social-github">GitHub</span>
                   </a>
                 </li>
                 <li class="button">
                   <a href="https://www.linkedin.com/in/younes-aassila/">
                     <i class="fa-brands fa-linkedin"></i>
-                    <span id="social-linkedin">LinkedIn</span>
+                    <span id="ya-social-linkedin">LinkedIn</span>
                   </a>
                 </li>
                 <li class="button">
                   <a href="mailto:contact@aassila.com">
                     <i class="fa-solid fa-envelope"></i>
-                    <span id="social-email">Email</span>
+                    <span id="ya-social-email">Email</span>
                   </a>
                 </li>
               </ul>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aassila.com",
-  "version": "1.0.1",
-  "description": "My personal webpage where you will find my projects and contact information.",
+  "version": "1.0.2",
+  "description": "My personal webpage where you can find my projects and contact information.",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -26,6 +26,7 @@
   "homepage": "https://github.com/younesaassila/aassila.com#readme",
   "devDependencies": {
     "prettier": "^2.6.0",
+    "prettier-plugin-css-order": "^1.1.0",
     "typescript": "^4.5.4",
     "vite": "^2.8.0"
   },

src/main.ts

@@ -9,7 +9,7 @@ document.documentElement.setAttribute("lang", locale.identifier)
 
 const bioElement = document.getElementById("bio") as HTMLHeadingElement
 const socialEmailElement = document.getElementById(
-  "social-email"
+  "ya-social-email"
 ) as HTMLSpanElement
 
 bioElement.textContent = locale.getMessage("bio")