Add skill wheels for sample profiles to roles page

main/static/assets/sample_data/sample_profile_1.json

@@ -3,6 +3,7 @@
         "user_id": 1,
         "name": "User 1",
         "role": "Research Software Engineer",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consequat mauris. Aenean id lacus eleifend, porttitor dolor sed, dapibus dui. Quisque tincidunt leo vel magna facilisis feugiat quis ac elit. Sed eget purus posuere, pellentesque mi non, faucibus magna. Ut sollicitudin sagittis risus, at rutrum nisl vulputate non. Nunc luctus lobortis iaculis. Aenean suscipit orci nibh, at dapibus elit eleifend id. Sed in bibendum dui, id sollicitudin enim. Cras eget erat nec diam dictum fermentum at vitae ex. Morbi eget mauris laoreet, varius nisl vel, euismod ipsum. Vestibulum a congue tellus. In sed ligula dui.",
         "user_data": [
             {
             "skill": "Writing code & knowledge of programming languages",

main/static/assets/sample_data/sample_profile_41.json

@@ -3,6 +3,7 @@
         "user_id": 41,
         "name": "User 41",
         "role": "RSE Team Lead",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consequat mauris. Aenean id lacus eleifend, porttitor dolor sed, dapibus dui. Quisque tincidunt leo vel magna facilisis feugiat quis ac elit. Sed eget purus posuere, pellentesque mi non, faucibus magna. Ut sollicitudin sagittis risus, at rutrum nisl vulputate non. Nunc luctus lobortis iaculis. Aenean suscipit orci nibh, at dapibus elit eleifend id. Sed in bibendum dui, id sollicitudin enim. Cras eget erat nec diam dictum fermentum at vitae ex. Morbi eget mauris laoreet, varius nisl vel, euismod ipsum. Vestibulum a congue tellus. In sed ligula dui.",
         "user_data": [
             {
             "category": "Professional skills",

main/static/assets/sample_data/sample_profile_59.json

@@ -3,6 +3,7 @@
         "user_id": 59,
         "name": "User 59",
         "role": "Community Manager",
+        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consequat mauris. Aenean id lacus eleifend, porttitor dolor sed, dapibus dui. Quisque tincidunt leo vel magna facilisis feugiat quis ac elit. Sed eget purus posuere, pellentesque mi non, faucibus magna. Ut sollicitudin sagittis risus, at rutrum nisl vulputate non. Nunc luctus lobortis iaculis. Aenean suscipit orci nibh, at dapibus elit eleifend id. Sed in bibendum dui, id sollicitudin enim. Cras eget erat nec diam dictum fermentum at vitae ex. Morbi eget mauris laoreet, varius nisl vel, euismod ipsum. Vestibulum a congue tellus. In sed ligula dui.",
         "user_data": [
             {
             "category": "Professional skills",

main/templates/main/pages/competencies.html

@@ -15,7 +15,7 @@
                     <a href="{% url 'index' %}">Home</a>
                 </li>
                 <li class="breadcrumb-item">
-                    <a href="{% url 'privacy' %}">Framework</a>
+                    <a href="{% url 'competencies' %}">Framework</a>
                 </li>
                 <li class="breadcrumb-item active" aria-current="page">Competencies</li>
             </ol>

main/templates/main/pages/roles.html

@@ -16,31 +16,97 @@
                 <li class="breadcrumb-item active" aria-current="page">Roles</li>
             </ol>
         </nav>
-        <div class="row">
-            <div class="col-lg-9 col-xl-8 pe-lg-4 pe-xl-0">
-                <h1 class="pb-2 pb-lg-3">Roles and job profiles</h1>
-                <p class="fs-lg pt-2 pt-sm-3">
-                    Dolor laoreet fermentum lectus praesent aenean molestie mollis integer. Sem ullamcorper montes, lorem ullamcorper orci, pellentesque ipsum malesuada gravida. Donec imperdiet nulla suscipit in. Dignissim ornare ac lorem consectetur massa a. Pellentesque urna pharetra, quis maecenas. Sit dolor amet nulla aenean eu, ac. Nisl mi tempus, iaculis viverra vestibulum scelerisque imperdiet montes. Mauris massa elit pretium elementum eget tortor quis. Semper interdum lectus odio diam.
-                </p>
-                <p class="fs-lg mb-3">
-                    Ut pellentesque bibendum dignissim a molestie. Ultrices diam ut vel neque tincidunt eget. Sed ut quis sit semper nunc at etiam lacinia. Quam laoreet eget id sapien a pharetra, ornare diam dignissim. Lorem amet nisl, enim mi aenean mauris. Porta nisl a ultrices ut libero id. Gravida a mi neque, tristique justo, et pharetra. Laoreet nulla est nulla cras ac arcu sed mattis tristique. Morbi convallis suspendisse enim blandit massa. Cursus augue dui mattis morbi velit.
-                </p>
-            </div>
-            <aside class="col-lg-3 offset-xl-1">
-                <div class="offcanvas-lg offcanvas-end" id="sidebar">
-                    <div class="offcanvas-header">
-                        <h4 class="offcanvas-title">Sidebar</h4>
-                        <button class="btn-close ms-auto"
-                                type="button"
-                                data-bs-dismiss="offcanvas"
-                                data-bs-target="#sidebar"
-                                aria-label="Close"></button>
+        {% if sample_data %}
+            {% for profile in sample_data %}
+                <section id="role-{{ profile.user_id }}" class="overflow-hidden pb-5">
+                    <div class="pb-sm-3 mb-md-2 mb-lg-3">
+                        <div class="row g-4">
+                            <div class="col-md-7 {% if forloop.counter|divisibleby:"2" %}order-md-2{% endif %}"
+                                 data-aos="{% if forloop.counter|divisibleby:"2" %}fade-left{% else %}fade-right{% endif %}"
+                                 data-aos-duration="600"
+                                 data-aos-offset="280"
+                                 data-disable-parallax-down="md">
+                                <div class="h-100 bg-skill-wheel rounded-3">
+                                    <div id="dataviz_{{ profile.user_id }}"></div>
+                                </div>
+                            </div>
+                            <div class="col-md-5 {% if forloop.counter|divisibleby:"2" %}order-md-1{% endif %}"
+                                 data-aos="{% if forloop.counter|divisibleby:"2" %}fade-right{% else %}fade-left{% endif %}"
+                                 data-aos-duration="600"
+                                 data-aos-offset="280"
+                                 data-disable-parallax-down="md">
+                                <div class="d-flex flex-column h-100 bg-secondary rounded-3 py-5 px-4 px-lg-5">
+                                    <h2 class="mb-xl-4">{{ profile.role }}</h2>
+                                    <p class="mb-4 mb-xl-5">{{ profile.description }}</p>
+                                    <div class="mt-auto">
+                                        <a class="btn btn-outline-primary" href="#role-{{ profile.user_id }}">Learn more</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="offcanvas-body">
-                        <h4 class="pt-1 pt-lg-0 mt-lg-n2"></h4>
-                    </div>
-                </div>
-            </aside>
-        </div>
+                </section>
+            {% endfor %}
+        {% else %}
+            No profiles
+        {% endif %}
     </section>
+    <script>
+document.addEventListener('DOMContentLoaded', function () {
+    const sampleData = {{ sample_data|safe }};
+    const skillLevelsLoadedFromContext = {{ skill_levels|safe }};
+
+    // Function to render the radial bar chart
+    function renderSkillWheel(userData, userId) {
+        const radialBarChartConfig = {
+            innerRadius: 0,
+            width: 900,
+            innerRadius: 200,
+            outerPadding: 80,
+            categoryPadding: 0.1,
+            skillPadding: 0.05,
+            arcPercent: 0.8,
+            arcStartOffset: 0.1,
+            annotationPadding: 10,
+            lineThickness: 2,
+            labelTextColor: "white",
+            lvlTextColor: "var(--ar-primary)",
+            lvlArcColor: "rgba(var(--ar-primary-rgb), 0.2)",
+            colourList: [
+                "#4E79A7", // blue
+                "#F28E2B", // orange
+                "#E15759", // red
+                "#76B7B2", // teal
+                "#59A14F", // green
+                "#EDC948", // yellow
+                "#B07AA1", // purple
+                "#FF9DA7", // pink
+                "#9C755F", // brown
+                "#BAB0AC", // grey
+            ],
+        };
+
+        const datavizRoot = document.getElementById('dataviz_'+userId);
+
+        // Clear existing chart
+        datavizRoot.innerHTML = '';
+
+        main().RadialBarChart({
+            target: datavizRoot,
+            data: userData,
+            levels: skillLevelsLoadedFromContext,
+            config: radialBarChartConfig,
+        });
+    }
+
+    window.loadSkillWheels = function() {
+        for (let i = 0; i < sampleData.length; i++) {
+            // Render the skill wheel
+            renderSkillWheel(sampleData[i].user_data, sampleData[i].user_id);
+        }
+    };
+
+    loadSkillWheels();
+});
+    </script>
 {% endblock content %}

main/templates/main/snippets/hero.html

@@ -35,25 +35,22 @@ <h1 class="display-3 mb-sm-4">Digital Research Competencies Framework</h1>
         <div class="mx-auto">
             <div class="row g-4 mb-3 mb-xl-0">
                 <div class="col-md-5 col-lg-4 order-md-1">
-                    <div class="card border-0 bg-hero-role-desc h-100 px-xl-4 pb-sm-2 pb-xl-4">
+                    <div class="card border-0 rounded-2 bg-dark h-100 px-xl-4 pb-sm-2 pb-xl-4">
                         <div class="card-body">
-                            <h3>Skill Wheels give a visual overview of role profiles</h3>
+                            <h3>Explore Roles with the Skills Wheel</h3>
                             <p class="card-text">
-                                The skills wheel shows the range of competencies that make up the role of a
-                                Research Software Engineer. It helps you see how technical, research, and
-                                professional skills fit together, and where you might want to focus your
-                                development. Use the skill wheel to reflect on your own strengths, plan learning, and
-                                understand how your role connects to wider research careers.
+                                The Skills Wheel provides a clear, visual overview of the competencies that make up a digital research role.
+                                It shows how technical expertise, research knowledge, and professional skills come together, helping you
+                                identify strengths, spot areas for growth, and plan your development. Use the wheel to reflect on your own skills
+                                and understand how your role contributes to the wider research landscape.
                             </p>
-                            <a class="btn btn-outline-warning mt-2" href="{% url 'roles' %}">More Role Profiles</a>
+                            <a class="btn btn-primary mt-2" href="{% url 'roles' %}">View Sample Roles</a>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-7 col-lg-8 order-md-2">
-                    <div class="card border-0 bg-hero-role-profile h-100 px-xl-4 pb-sm-2 pb-xl-4">
-                        <div class="card-body">
-                            <div id="dataviz_hero"></div>
-                        </div>
+                    <div class="card border-0 rounded-2 h-100 bg-skill-wheel">
+                        <div id="dataviz_hero"></div>
                     </div>
                 </div>
             </div>

main/views.py

@@ -183,10 +183,47 @@ class TrainingPageView(TemplateView):
 
 
 class RolesPageView(TemplateView):
-    """View that renders the terms and conditions page."""
+    """View that renders the role profiles page."""
 
     template_name = "main/pages/roles.html"
 
+    def get_context_data(self, **kwargs: Mapping[str, object]) -> dict[str, object]:
+        """Add sample profile data to the template context."""
+        context = super().get_context_data(**kwargs)
+
+        # Skill levels from the database
+        skill_levels = SkillLevel.objects.all()
+        skill_levels_data = [
+            {
+                "level": sl.level,
+                "name": sl.name,
+                "description": sl.description,
+            }
+            for sl in skill_levels
+        ]
+
+        # Combine multiple sample JSON files
+        sample_data_files = [
+            "main/static/assets/sample_data/sample_profile_1.json",
+            "main/static/assets/sample_data/sample_profile_41.json",
+            "main/static/assets/sample_data/sample_profile_59.json",
+        ]
+
+        combined_sample_data = []
+        for file_path in sample_data_files:
+            json_path = Path(file_path)
+            if json_path.exists():
+                with open(json_path) as f:
+                    data = json.load(f)
+                    if isinstance(data, list):
+                        combined_sample_data.extend(data)
+                    else:
+                        combined_sample_data.append(data)
+
+        context["skill_levels"] = skill_levels_data
+        context["sample_data"] = combined_sample_data
+        return context
+
 
 class GetInvolvedPageView(TemplateView):
     """View that renders the terms and conditions page."""

node/src/scss/_user.scss

@@ -12,15 +12,35 @@ html {
   scroll-margin-top: 138px;
 }
 
+[id^="role-"] {
+  scroll-margin-top: 138px;
+}
+
 .competencies-sticky {
   top: 100px;
   max-height: calc(100vh - 100px);
   overflow-y: auto;
 }
 
-.bg-hero-role-profile,
-.bg-hero-role-desc {
-  background-color: rgba(0, 0, 0, .9);
+.bg-skill-wheel {
+  position: relative;
+  background-image: url("/static/assets/img/landing/grunge-black-concrete-textured-background.webp");
+  background-position: center;
+  background-size: cover;
+}
+
+.bg-skill-wheel::before {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  content: "";
+  background-color: rgba(18, 21, 25, .5);
+  border-radius: inherit;
+}
+
+.bg-skill-wheel > * {
+  position: relative;
+  z-index: 1;
 }
 
 .alert p {

tests/main/test_main_views.py

@@ -159,3 +159,22 @@ def test_provides_required_context(self, admin_client):
         assert "skill_levels" in response.context
         assert isinstance(response.context["skill_levels"], str)
         # TODO: Improve this test
+
+
+class TestRolesPageView(TemplateOkMixin):
+    """Test suite for the role profiles page view."""
+
+    _template_name = "main/pages/roles.html"
+
+    def _get_url(self):
+        return reverse("roles")
+
+    def test_provides_required_context(self, admin_client):
+        """Test that the role profiles view renders the data visualization."""
+        response = admin_client.get(self._get_url())
+        assert response.status_code == 200
+        assert "sample_data" in response.context
+        assert isinstance(response.context["sample_data"], list)
+        assert "skill_levels" in response.context
+        assert isinstance(response.context["skill_levels"], list)
+        # TODO: Improve this test