Add HTML and CSS for repository index page

helenclx · Jun 2, 2024 · 7bddfb9 · 7bddfb9
1 parent d00f2e0
commit 7bddfb9
Show file tree

Hide file tree

Showing 2 changed files with 198 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+
+        <title>Helen Chong's Solo Projects for Scrimba's React Course</title>
+    </head>
+    <body>
+        <header>
+            <h1>Helen Chong's Solo Projects for Scrimba's React Course</h1>
+        </header>
+        <main>
+            <article>
+                <p>My solutions to the solo projects of Scrimba's React course.</p>
+
+                <p>Scrimba's React course links:</p>
+                <ul>
+                    <li><a href="https://scrimba.com/learn/learnreact">Scrimba's scrims</a></li>
+                    <li><a href="https://www.youtube.com/watch?v=bMknfKXIFA8">freeCodeCamp's YouTube channel</a></li>
+                </ul>
+
+                <p>All these projects are built with Vite + React, and deployed to GitHub Pages based on DEVLOKER's guide: <a href="https://dev.to/devloker/deploy-a-react-projects-that-are-inside-a-subdirectories-to-github-pages-using-github-actions-cicd-3n9l">Deploy a react projects that are inside a subdirectories to GitHub Pages using GitHub Actions (CI/CD)</a>.</p>
+
+                <h2>Digital Business Card</h2>
+                <img src="./1-digital-business-card/screenshot.png" alt="Screenshot of the digital businees card solo project">
+                <ul>
+                    <li>
+                        <a href="https://helenchong.dev/Scrimba-React-Solo-Projects/1-digital-business-card/">Live site</a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/1-digital-business-card" >Source code</a>
+                    </li>
+                </ul>
+
+                <h2>Travel Journal</h2>
+                <img src="./2-travel-journal/screenshot.png" alt="Screenshot of the travel journal solo project">
+                <ul>
+                    <li>
+                        <a href="https://helenchong.dev/Scrimba-React-Solo-Projects/2-travel-journal/">Live site</a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/2-travel-journal">Source code</a>
+                    </li>
+                </ul>
+                <h2>Quizzical</h2>
+                <img src="./3-quizzical/screenshot-start.png" alt="Screenshot of the start of Quizzical's quiz game">
+                <img src="./3-quizzical/screenshot-questions.png" alt="Screenshot of a list of quuestions from the Quizzical solo project">
+                <img src="./3-quizzical/screenshot-answers.png" alt="Screenshot of Quizzical displaying the quiz result">
+                <ul>
+                    <li>
+                        <a href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Live site</a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/helenclx/Scrimba-React-Solo-Projects/tree/main/3-quizzical">Source code</a>
+                    </li>
+                </ul>
+            </article>
+        </main>
+        <footer>
+            <p>Coded by <a href="https://helenchong.dev/">Helen Chong</a>.</p>
+        </footer>
+    </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,133 @@
+/* ------------------- */
+/* CSS Reset           */
+/* ------------------- */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+    text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+    font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
+
+/* ------------------- */
+/* STYLING BEGINS      */
+/* ------------------- */
+
+/* Based on: SmolCSS - Smol Document Styles
+https://SmolCSS.dev/#smol-document-styles */
+
+body {
+    display: flex;
+    flex-direction: column;
+    padding: 5vh clamp(1rem, 5vw, 3rem) 1rem;
+    font-family: system-ui, sans-serif;
+    line-height: 1.5;
+    color: #222;
+}
+
+body > * {
+    --layout-spacing: max(8vh, 3rem);
+    --max-width: 70ch;
+    width: min(100%, var(--max-width));
+    margin-left: auto;
+    margin-right: auto;
+}
+
+main {
+    margin-top: var(--layout-spacing);
+}
+
+footer {
+    margin-top: auto;
+    padding-top: var(--layout-spacing);
+}
+
+footer p {
+    border-top: 1px solid #ccc;
+    padding-top: 0.25em;
+    font-size: 0.9rem;
+    color: #767676;
+}
+
+:is(h1, h2, h3) {
+    line-height: 1.2;
+}
+
+:is(h2, h3):not(:first-child) {
+    margin-top: 2em;
+}
+
+article * + * {
+    margin-top: 1em;
+}
+
+a {
+    color: navy;
+    text-underline-offset: 0.15em;
+}